Split-flap board
Split-flap departure board whose tiles flip through the alphabet and cascade left to right on each new message.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxSplitflap messages="OPUS 5.5 ULTRACODE|CONTEXT 64% · OK|4 AGENTS RUNNING|DEPLOY 14:02 LIVE|SPEED 182 TOK/S" />
Installation
pnpm dlx shadcn@latest add @lumesec/px-splitflapFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-splitflap.jsonUsage
import { PxSplitflap } from "@/components/lumesec/px-splitflap";
export function Example() {
return (
<PxSplitflap />
);
}Behaviour
A departure board of flip tiles. Each tile flips through the alphabet until it lands on its letter, with the flaps cascading left to right, so status changes feel like an announcement.
API reference
Attributes
messagesReact propmessagesTypestringDefaultOPUS 5.5 ULTRACODE|CONTEXT 64% · OK|4 AGENTS RUNNING|DEPLOY 14:02 LIVE|SPEED 182 TOK/SMessages separated by |. Read each time the board advances, so a change shows from the next message on.
Methods
Call them on the element, for example through a React ref.
next()Advances to the next message and restarts the auto-advance timer.
show(message: string)Flips the board to an arbitrary message without changing the rotation position.
Properties
messages (read-only)Typestring[]The messages attribute split on |, or the default list.
Accessibility
- The canvas has
role="img"and itsaria-labelis set to the current message as written. - "Next message" is a native button; clicking the canvas does the same but the canvas is not focusable.
- Reduced motion: tiles switch straight to their target character without flipping.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg and --ui-muted.
Notes
- The board has 18 tiles. Messages are upper-cased, padded or cut to 18 characters, and any character outside A to Z, 0 to 9 and
. : - / · % + >shows as a blank tile. - The board advances every 5.6 seconds while it is on screen. Characters are drawn in the monospace font, digits in the accent colour.
- The canvas height is set from its width so the tiles keep their proportions.
Related
Was this page helpful?