Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Split-Flap Display

Pro

A ceramic and graphite split-flap device that ripples each flap into your message.

css 3d3dcssmechanicalflipboardtypography
Split-Flap Display component preview

Overview

Split-Flap Display is a React and Tailwind CSS split flap board, the Solari style departure display from airports and train stations, in Next.js or any React app, with no dependencies. Each module steps through its character drum one flap at a time under a gravity curve, like the hardware, and neighbouring modules start in a stagger so messages ripple into place. Cycle a list of messages or show one, pick a ceramic or graphite shell, and onSettle fires when every flap lands. Reduced motion jumps straight to each message. Text is uppercased, and characters missing from charset show as blanks.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add split-flap-display

Usage

Import SplitFlapDisplay from @/components/wensity/split-flap-display and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { SplitFlapDisplay } from "@/components/wensity/split-flap-display";


export default function Example() {
  return (
    <SplitFlapDisplay
      messages={["HELLO\nWORLD", "GATE B12\nNOW\nBOARDING", "SHIP IT\nON TIME"]}
      rows={3}
      columns={10}
      flapMs={70}
    />
  );
}

Props

PropTypeDefaultDescription
messagesstring[]-Messages to cycle through. Each one advances after it has fully settled.
textstring"HELLO"A single static message. Ignored when messages is set. Use \n for a line break.
columnsnumber10Flap modules per row, clamped to 3 to 24.
rowsnumber3Rows of modules, clamped to 1 to 4.
size"sm" | "md" | "lg""md"Maximum module size. Modules also shrink to fit their container.
flapMsnumber70Time between flap releases in milliseconds. The drum eases in and out around it, and several flaps fall at once.
holdMsnumber2800How long a settled message stays up before advancing.
staggerMsnumber45Delay between neighbouring modules starting to flip.
charsetstringA to Z, 0 to 9, punctuationCharacters on each drum, in flip order. A blank is always first.
theme"auto" | "light" | "dark""auto"Ceramic or graphite shell. Auto follows the .dark class.
pausedbooleanfalseStop auto-advancing. The current message still finishes flipping.
onSettle(message: string, index: number) => void-Fires each time every module lands on the current message.

Related components

  • Interactive 3D Globe component preview

    Interactive 3D Globe

    A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.

  • Animated Code Diff Viewer component preview

    Animated Code Diff Viewer

    Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

  • Animated Terminal component preview

    Animated Terminal

    A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.

  • Tinder-Style Swipe Cards component preview

    Tinder-Style Swipe Cards

    Tinder-style swipe cards where the top card flicks off under your thumb and the one underneath rises in real time.

Featured in React 3D components.