Split Flap Text⁽⁰²⁶⁾

Tactile mechanical departure board text animation simulating retro split-flap displays.

ClickHover

Loading…

Installation

$npx kibo add split-flap-text

Usage

1import { SplitFlapText } from "@/components/kibo/split-flap-text/component";
2 
3export default function Example() {
4  return (
5    <SplitFlapText />
6  );
7}

Props Reference

Prop	Type	Default	Description
`words`	`string[]`	['LAUNCH READY', 'SYNC ONLINE', 'SIGNAL LIVE']	Controls the words for the component animation.
`text`	`string`	-	The text content to display and animate.
`flipDuration`	`number`	0.12	Controls the flip duration for the component animation.
`stagger`	`number`	0.06	Stagger delay in seconds between individual characters/elements.
`cycleDelay`	`number`	2400	Controls the cycle delay for the component animation.
`charset`	`'alpha' \| 'alphanumeric' \| 'numeric' \| (string & {})`	'alphanumeric'	Controls the charset for the component animation.
`flipsPerChar`	`number`	8	Controls the flips per char for the component animation.
`tileColor`	`string`	'#111827'	Controls the tile color for the component animation.
`textColor`	`string`	'#f8fafc'	Controls the text color for the component animation.
`tileRadius`	`number \| string`	8	Controls the tile radius for the component animation.
`gap`	`number \| string`	6	Controls the gap for the component animation.
`fontSize`	`number \| string`	52	Font size in pixels, rems, or fluid clamp notation.
`loop`	`boolean`	true	Controls the loop for the component animation.
`padTo`	`number`	12	Controls the pad to for the component animation.