KQ-1547 · LETTER/DICE

Letter Dice

Each letter is an ivory cube with a glyph on every face, sitting in an engraved slot on a felt strip. On its trigger the set is thrown in over the left rail and tumbles in real 3D — rolled a quarter turn per side length travelled, hopping on bounces that die away, spun about the vertical — along seeded paths defined backwards from the rest pose, so every die lands square in its slot with the right letter up, faces shaded from their real normals and a contact shadow tightening as it comes down; the last one rocks on an edge on the springs.recoil ratio before it lies still. The felt is a button: a press throws, a flick throws as hard as it was flicked, and Enter or Space throws again onto the next word.

KQ-1547 · LETTER/DICE

Fieldline · games night

landed · lucky · Enter throws again

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/letter-dice

Props

words: string[]; default —; The words, one per throw, cycled.
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"; default "p"; The element that carries the current word.
tumble: number; default 0.8; How hard the set is thrown, 0.25 to 1.5: more roll, more hops, more spin.
spread: number; default 0.4; How scattered the throw is, 0 (a tidy line) to 1 (dice everywhere, landing at odd times).
feltTone: "green" | "navy" | "wine" | "slate"; default "green"; The felt.
dieColor: string; default —; The dice, any CSS colour; ivory by default, the same in both themes.
inkColor: string; default —; The letters on the dice, any CSS colour; deep ink by default.
size: number; default 1.3; A die's edge, em.
rock: boolean; default true; The last die rocks on an edge before it lies still.
slots: boolean; default true; Engraved slots with each letter faintly printed in them.
trigger: "mount" | "inView" | "manual"; default "inView"; What throws the first time.
play: boolean; default false; With trigger "manual": each change to true throws.
delay: number; default 0; Wait before the first throw, ms.
interactive: boolean; default true; A press, a flick across the felt, Enter or Space throws again.
sound: boolean; default false; Clacks for the throws the visitor makes.
onThrow: (index: number) => void; default —; A throw began: the index of the word it will land on.
onComplete: (index: number) => void; default —; Every die is at rest: the index of the word showing.
className: string; default —; Size and layout; the dice shrink to fit a long word.

Prop	Type	Default	Description
words	string[]	—	The words, one per throw, cycled.
as	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "div"	"p"	The element that carries the current word.
tumble	number	0.8	How hard the set is thrown, 0.25 to 1.5: more roll, more hops, more spin.
spread	number	0.4	How scattered the throw is, 0 (a tidy line) to 1 (dice everywhere, landing at odd times).
feltTone	"green" \| "navy" \| "wine" \| "slate"	"green"	The felt.
dieColor	string	—	The dice, any CSS colour; ivory by default, the same in both themes.
inkColor	string	—	The letters on the dice, any CSS colour; deep ink by default.
size	number	1.3	A die's edge, em.
rock	boolean	true	The last die rocks on an edge before it lies still.
slots	boolean	true	Engraved slots with each letter faintly printed in them.
trigger	"mount" \| "inView" \| "manual"	"inView"	What throws the first time.
play	boolean	false	With trigger "manual": each change to true throws.
delay	number	0	Wait before the first throw, ms.
interactive	boolean	true	A press, a flick across the felt, Enter or Space throws again.
sound	boolean	false	Clacks for the throws the visitor makes.
onThrow	(index: number) => void	—	A throw began: the index of the word it will land on.
onComplete	(index: number) => void	—	Every die is at rest: the index of the word showing.
className	string	—	Size and layout; the dice shrink to fit a long word.

Letter Dice

LUCKY

Install

Props