ScrollFloat
Las letras flotan hacia su posición al hacer scroll.
- Código: RODD·TX·018
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/ScrollFloat-TS-TW
Cuándo usarlo
Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| children | ReactNode | — |
| scrollContainerRef | RefObject<HTMLElement> | window |
| containerClassName | string | "" |
| textClassName | string | "" |
| animationDuration | number | 1 |
| ease | string | "back.inOut(2)" |
| scrollStart | string | "center bottom+=50%" |
| scrollEnd | string | "bottom bottom-=40%" |
| stagger | number | 0.03 |
Otros efectos de tipografía
- SplitFlapText — Panel de aeropuerto split-flap que cambia de frase con clacks mecánicos.
- TextCursor — Un texto que sigue al cursor dejando una estela de copias.
- TrueFocus — Un visor de enfoque salta entre palabras desenfocando el resto.
- WarpText — Distorsión WebGL que dobla y refracta el texto alrededor del puntero.
- BreathingText — Texto que “respira” cambiando su peso.
- DecryptedText — Descifrado estilo hacker: glifos aleatorios hasta revelar el texto.