FoldText

Las líneas se despliegan como papel doblado que se abre.

  • Código: RODD·TX·010
  • Familia: Tipografía
  • Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/FoldText-TS-TW

Cuándo usarlo

Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.

Props para personalizarlo

PropTipoPor defecto
textstring"Design unfolds"
splitBy"char" | "word" | "line""char"
hinge"top" | "bottom" | "left" | "right""top"
durationnumber0.65
staggernumber0.045
easestring"power3.out"
perspectivenumber700
creaseShadingnumber0.55
trigger"mount" | "hover" | "scroll" | "loop""mount"
fontSizestring | number80
fontWeightstring | number800
colorstring"#f7f2e8"
classNamestring""
styleCSSProperties{}

Otros efectos de tipografía

  • Letter3dSwap — Letras que giran en 3D para cambiar de texto.
  • RotatingText — Rota entre varias frases con transiciones de muelle.
  • ScrollReveal — El texto se desenfoca y revela palabra a palabra con el scroll.
  • 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.