ScrollReveal
El texto se desenfoca y revela palabra a palabra con el scroll.
- Código: RODD·TX·019
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/ScrollReveal-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 | React.RefObject | window |
| enableBlur | boolean | true |
| baseOpacity | number | 0.1 |
| baseRotation | number | 3 |
| blurStrength | number | 4 |
| containerClassName | string | "" |
| textClassName | string | "" |
| rotationEnd | string | "bottom bottom" |
| wordAnimationEnd | string | "bottom bottom" |
Otros efectos de tipografía
- SplitText — Divide el texto en letras o palabras para una entrada escalonada.
- TextCursorProximity — Las letras reaccionan a la cercanía del cursor.
- UnderlineToBackground — Subrayado que se convierte en fondo al hover.
- WavyText — Texto que entra con una ola.
- CircularText — Texto en órbita circular que acelera o se detiene al pasar el ratón.
- DepthText — Tipografía extruida en capas con parallax 3D.