SplitFlap React component

Live — this one is real

DeparturesMessageClock

Every character falls forward through the drum, cell after cell, and lands with a slap. Screen readers get the settled text. The timetable is invented.

Departures
Time	Destination	Plat.	Status
08:42	KANAZAWA	4	ON TIME
08:50	NAGANO	11	ON TIME
09:03	SENDAI	7	DELAYED
09:15	NIIGATA	2	ON TIME
09:21	HAKODATE	9	ON TIME

Usage

tsx

"use client";

import { useState } from "react";
import { SplitFlap, Button } from "mizu-ui";

export function Example() {
  const [n, setN] = useState(0);
  const states = ["ON TIME", "BOARDING", "DEPARTED"];
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: 16,
        alignItems: "center",
      }}
    >
      <SplitFlap value={states[n % 3]!} length={8} label="Status" live />
      <Button variant="ghost" onClick={() => setN(n + 1)}>
        Advance
      </Button>
    </div>
  );
}

It starts with "use client" because it keeps state or passes functions to components, so it pastes into a Next.js page as it is. Other React setups ignore the directive.

This code, running — no configuration beyond the data

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

sh

npx shadcn@latest add 0xuser64bit/mizu/split-flap 0xuser64bit/mizu/button

The example also uses Button, so the command adds it too.

Every component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:

tsx

import { SplitFlap } from "@/components/ui/mizu/split-flap";
import { Button } from "@/components/ui/mizu/button";

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.

Inspect signature/SplitFlap.tsx

Source is included in the npm package under src/signature/SplitFlap.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
value / length / align	string / number / left \| right	—	The text, padded or trimmed to `length` cells (its own length by default).
characters	string	—	The drum in falling order — FLAP_CHARACTERS by default. Characters outside it arrive in one flip.
flip / stagger	number	—	Milliseconds for one flap to fall (70) and between neighbouring cells starting (35).
label / live	string / boolean	—	Read before the value; live displays announce each new value politely.
tone / onSettle	SignatureTone / (value) => void	—	Glyph colour, and a call when every cell has arrived.
flapPath()	(from, to, characters, most?) => string[]	—	The flaps a cell passes on its way, for displays of your own.

Accessibility

The cells are hidden from assistive technology; the value and its label sit beside them as plain text, so a display reads as words rather than letters, inside a table cell or a button alike. A live display announces each new value once, not every flap.

Motion

Each cell falls forward through the drum like the real mechanism: the top leaf folds down and darkens while the next character lands with a small overshoot, and neighbouring cells start a beat apart so a change ripples along the line. Long journeys skip ahead to the last dozen flaps. Reduced motion shows the new value at once.

Works alongside

Chronicle TrendChart Waveform Plane