SplitFlapText

Panel de aeropuerto split-flap que cambia de frase con clacks mecánicos.

Cómo instalarlo

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

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

Prop	Tipo	Por defecto
words	string[]	['LAUNCH READY', 'SYNC ONLINE', 'SIGNAL LIVE']
text	string	undefined
flipDuration	number	0.12
stagger	number	0.06
cycleDelay	number	2400
charset	"alpha" \| "alphanumeric" \| "numeric" \| string	"alphanumeric"
flipsPerChar	number	8
tileColor	string	"#111827"
textColor	string	"#f8fafc"
tileRadius	number \| string	8
gap	number \| string	6
fontSize	number \| string	52
loop	boolean	true
padTo	number	12
className	string	""
style	CSSProperties	{}

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.
FoldText — Las líneas se despliegan como papel doblado que se abre.