KQ-1583 · BOARD/TILES

Board Tiles

A board where the cursor's path spells a sentence in wooden letter tiles: as it travels, a tile drops into each grid cell it leaves (or, with grid off, one tile-pitch along the path itself, turned a little with it), falling from just above at a larger scale while its shadow tightens, and landing on a spring whose damping comes from bounce, from a dead set-down through the recoil spring's two bounces, with a wooden clack. Spaces leave gaps and the sentence repeats; after its life each tile flips face down on springs.snap and fades. A resting word holds the board until the first tile flips it away, and it drops back in on a cascade once your tiles are gone; the keyboard walks a caret across the cells laying a tile in each one it leaves, and Delete clears the board.

KQ-1583 · BOARD/TILES

Fernworks · Maple letters

resting · move across the board

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/board-tiles

Props

sentence: string; default "Every path spells something"; The sentence the path spells, letter by letter; a space leaves an empty cell.
tileSize: number; default 30; Each tile's side, px.
bounce: number; default 0.5; How much a tile bounces as it lands, 0 (sets down dead) to 1 (lively).
grid: boolean; default true; Snap tiles to a grid of cells; off, they are laid along the path itself, turned with it.
gap: number; default 4; The space between cells, px.
life: number; default 2600; How long a tile shows its letter before it flips face down, ms.
maxTiles: number; default 48; The most tiles on the board; past it the oldest flips early.
tone: "maple" | "walnut" | "ash" | "cherry"; default "maple"; The wood.
uppercase: boolean; default true; Show the letters in capitals.
restText: string; default the sentence's first word; The word laid out at rest, before anyone moves; an empty string leaves the board empty.
interactive: boolean; default true; The pointer and touch lay tiles.
clearKey: string | number; default —; Any change flips every tile on the board face down and clears it.
label: string; default "Letter board"; The board's accessible name.
sound: boolean; default false; Play a wooden clack as each tile lands. Off unless asked for.
onTile: (letter: string, count: number) => void; default —; A tile was laid, with its letter and how many so far.
onSentence: (times: number) => void; default —; The whole sentence was spelled, with how many times so far.
disabled: boolean; default false; Nothing is laid and the keyboard's way in is off.
className: string; default "h-56 w-full"; Sizes the board.

Prop	Type	Default	Description
sentence	string	"Every path spells something"	The sentence the path spells, letter by letter; a space leaves an empty cell.
tileSize	number	30	Each tile's side, px.
bounce	number	0.5	How much a tile bounces as it lands, 0 (sets down dead) to 1 (lively).
grid	boolean	true	Snap tiles to a grid of cells; off, they are laid along the path itself, turned with it.
gap	number	4	The space between cells, px.
life	number	2600	How long a tile shows its letter before it flips face down, ms.
maxTiles	number	48	The most tiles on the board; past it the oldest flips early.
tone	"maple" \| "walnut" \| "ash" \| "cherry"	"maple"	The wood.
uppercase	boolean	true	Show the letters in capitals.
restText	string	the sentence's first word	The word laid out at rest, before anyone moves; an empty string leaves the board empty.
interactive	boolean	true	The pointer and touch lay tiles.
clearKey	string \| number	—	Any change flips every tile on the board face down and clears it.
label	string	"Letter board"	The board's accessible name.
sound	boolean	false	Play a wooden clack as each tile lands. Off unless asked for.
onTile	(letter: string, count: number) => void	—	A tile was laid, with its letter and how many so far.
onSentence	(times: number) => void	—	The whole sentence was spelled, with how many times so far.
disabled	boolean	false	Nothing is laid and the keyboard's way in is off.
className	string	"h-56 w-full"	Sizes the board.