Shuffle

Las letras barajan su posición antes de asentarse.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/Shuffle-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
text	string	""
className	string	""
style	object	{}
shuffleDirection	"left" \| "right" \| "up" \| "down"	"right"
duration	number	0.35
maxDelay	number	0
ease	string \| Function	"power3.out"
threshold	number	0.1
rootMargin	string	"-100px"
tag	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span"	"p"
textAlign	CSS text-align	"center"
onShuffleComplete	() => void	undefined
shuffleTimes	number	1
animationMode	"evenodd" \| "random"	"evenodd"
loop	boolean	false
loopDelay	number	0
stagger	number	0.03
scrambleCharset	string	""
colorFrom	string	undefined
colorTo	string	undefined
triggerOnce	boolean	true
respectReducedMotion	boolean	true
triggerOnHover	boolean	true

Otros efectos de tipografía

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.
EchoText — Copias fantasma siguen al texto hasta fundirse en una sola palabra.