RotatingText

Rota entre varias frases con transiciones de muelle.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/RotatingText-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
textsstring[][]
rotationIntervalnumber2000
initialobject{ y: "100%", opacity: 0 }
animateobject{ y: 0, opacity: 1 }
exitobject{ y: "-120%", opacity: 0 }
animatePresenceModestring"wait"
animatePresenceInitialbooleanfalse
staggerDurationnumber0
staggerFromstring"first"
transitionobject
loopbooleantrue
autobooleantrue
splitBystring"characters"
onNextfunctionundefined
mainClassNamestring''
splitLevelClassNamestring''
elementLevelClassNamestring''

Otros efectos de tipografía

  • ScrollVelocity — Marquesina cuya velocidad depende de lo rápido que hagas scroll.
  • 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.