# Staggered Text (React Bits Pro) — a letra nasce da névoa, e a antecipação é invisível

Medido 2026-09-30 na demo de `pro.reactbits.dev/docs/components/staggered-text`
(chars, forward, direction top, easing anticipate, blur on), gravando o estilo computado
de cada `span` a cada quadro depois do "Refresh preview". Aplicado no slogan do ds2.nash.work.

- **Segmento vive 1000 ms, o próximo parte 80 ms depois** (a prop `delay`); espaço é
  segmento e ocupa um passo, `<br>` não.
- **Os primeiros 62% da vida são invisíveis**: y vai de −40 a −44,5 (a antecipação) e mergulha
  até +5 com opacidade 0. O que se vê é a letra nascendo 5 px abaixo, desfocada a ~10 px, e
  assentando em 0 enquanto opacidade 0→1 e desfoque 10→0.
- **Nenhuma curva fechada cobre os três canais juntos**: a réplica toca a tabela medida
  (62 pontos, `[tempo, opacidade, y, desfoque]`) como keyframes WAAPI com `fill: backwards`.
  Valores em px de um texto de 60 px: escalar y e desfoque pelo corpo, com teto de 24 px no
  desfoque por custo.
- **Dividir texto em `inline-block` perde kerning e ligadura**: medido 4 px no "i" de "fi" e
  1,5 px no par "re" a 144 px. Manter "fi" como um segmento e devolver a posição original com
  `margin-left` em em. **Meça todas as posições originais antes de dividir o primeiro nó** —
  dividir um nó desloca os que vêm depois, e a medição do resto sai contaminada (foi o bug
  de +1,49 px no ponto final).
- **`staggerDirection: "reverse"`** é a mesma animação percorrendo os segmentos do fim ao começo.
- Conota: o texto se condensa do nada em vez de chegar de algum lugar — presença que se forma,
  não que entra.