ScrollAndSwapText
Texto que cambia de letras al hacer scroll.
- Código: RODD·TX·057
- Familia: Tipografía
- Origen: Fancy Components (Daniel Petho) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://fancycomponents.dev/r/scroll-and-swap-text.json"
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 | React.ReactNode | |
| as | ElementType | "span" |
| containerRef | React.RefObject<HTMLElement | null> | |
| offset | [string, string] | ["0 0", "0 1"] |
| className | string | |
| springConfig | { stiffness?: number damping?: number mass?: number } | { stiffness: 200, damping: 30 } |
Otros efectos de tipografía
- SparklesText — Texto con destellos que aparecen alrededor.
- TextAnimate — Texto con varias animaciones de entrada (fade, blur, slide…).
- TextType — Máquina de escribir con cursor parpadeante y ritmo ajustable.
- VerticalCutReveal — Texto que se revela con un corte vertical.
- BlurText — Las palabras emergen del desenfoque hasta quedar nítidas.
- CurvedLoop — Marquesina que fluye sobre una curva y se puede arrastrar.