Split Flap Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SplitFlapText from "./SplitFlapText";

export default function Example() {
  return (
    <SplitFlapText
      phrases={[
        "CREATE",
        "EXPLORE",
        "REPEAT"
      ]}
      interval={3000}
      paused={false}
      color={"#e8dfcf"}
      background={"#302c26"}
      duration={550}
      stagger={70}
      gap={5}
      style={{
        "fontSize": 54
      }}
    />
  );
}

Using Split Flap Text

Supply phrases to cycle between messages, or text for a single message updated by your application. Keep message lengths similar for a steadier footprint.

duration and stagger control the mechanical flip. interval sets the time between messages and paused stops the message cycle.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to show when phrases is empty. Updating this prop triggers the flip.
phrases	string[]	No	[]	Optional array of strings to rotate through. An empty array uses text.
interval	number	No	3000	Delay between messages in milliseconds. Zero stops automatic changes; a positive value is clamped to allow each flip to finish.
paused	boolean	No	false	Pause automatic phrase changes. Explicit text updates still render.
color	string	No	"#ede5d7"	Letter colour.
background	string	No	"#292622"	Tile surface colour.
duration	number	No	550	Individual split-flap flip duration in milliseconds.
stagger	number	No	60	Delay between adjacent tiles in milliseconds.
gap	number	No	5	Gap between tiles in pixels.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.