Split-Flap Board

Механическое табло: перелистываются только изменившиеся символы. Бесплатно, MIT · Анимированные компоненты › Наклейки, билеты и табло

Установка

npx valyro-cli@latest add split-flap-board

npx shadcn@latest add https://valyro.xyz/r/split-flap-board.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { SplitFlapBoard } from 'valyro-ui';

Prop	Type	Default
`value` *	`string`		The text to show. The app computes it (a countdown, a status); the board only displays it.
`columns`	`number`		Fixed number of cells per row, for a stable width. Default: as many as the value has characters.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Position of the value inside the fixed grid. Default `start`.
`overflow`	`'wrap' \| 'truncate'`	`'wrap'`	With `columns`: longer text wraps by words onto more rows (`wrap`, default) or is cut (`truncate`).
`duration`	`number`	`320`	How long one cell takes to flip, ms. Default 320.
`stagger`	`number`	`30`	Delay between consecutive changed cells, ms. Default 30.
`announce`	`'off' \| 'polite'`	`'off'`	`polite` reads every new value aloud; `off` (default) leaves it to be read on demand.
`label`	`string`		Name of the reading, shown above the board, such as "Doors open in".
`variant`	`'dense' \| 'sign' \| 'minimal'`	`'dense'`	Look: `dense` (default) dark tiles, `sign` large tiles of a station sign, `minimal` flat tiles without frames.
`onSettled`	`(value: string) => void`		Called once the latest value is fully on the board (after its flips, or at once without motion).
`labels`	`Partial<SplitFlapBoardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.