Terminus
A split-flap departure board — a grid of matte charcoal tiles whose hinged flaps churn through the character ring and cascade diagonally to the message, each flap landing with a gravity overbite and a shadow cast on the lower half. Only changed tiles animate; optional synthesized flap sound.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/terminusManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | A single message to display. Ignored when messages is provided. | |
| messages | string[] | Messages to cycle through, one after another, like a departure board. | |
| columns | number | the longest message line (clamped 6–22) | Grid width in tiles. |
| rows | number | the tallest wrapped message | Grid height in tiles. |
| align | "left" | "center" | "center" | Horizontal alignment of text within the grid. |
| flipDuration | number | 0.08 | Seconds each single flap takes — the master tempo scale. |
| cascade | number | 0.028 | Seconds of diagonal stagger added per tile (top-left → bottom-right). |
| cycleInterval | number | 3600 | Milliseconds each message holds before cycling to the next. |
| loop | boolean | true | Restart from the first message after the last. |
| charset | string | Ordered ring of characters the flaps churn through. | |
| sound | boolean | false | Play a synthesized mechanical flap click on each flip. |
| volume | number | 0.3 | Flap-click volume, 0–1. |
| tileColor | string | "#17171a" | Matte tile color. |
| glyphColor | string | "#f2ede3" | Glyph color — warm off-white by default. |
| seamColor | string | "#000000" | Hairline center-seam color. |
| tileSize | number | 46 | Tile edge length in px. |
| gap | number | 4 | Gap between tiles in px. |
| radius | number | 6 | Tile corner radius in px. |
| paused | boolean | false | Freeze cycling on the current message. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.