KQ-1185 · SAND/SCRIPT

Sand Script

A status line written in sand on a canvas: a thin stream pours along the line and its grains fall and land in the letter shapes, the lowest first, so each letter heaps up in relief; when the phrase has rested, a wave runs up the beach with a foam lace, loosens every grain it reaches and drains back, leaving wet sand that dries as the next phrase pours. The pointer draws in the sand — a passing mouse leaves a shallow trail and a press digs a channel that pushes the grains aside, then refills — while the tray's height follows the type on springs.glide. The tray is a real button: Enter or Space draws the same finger through the words, and each phrase is announced once.

KQ-1185 · SAND/SCRIPT

Waylight Pay · transfer 88-204

writing · 1 of 3 · draw in the sand

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/sand-script

Props

phrases: string[]; default —; The status phrases, written in the sand one after another and cycled in order.
active: boolean; default true; Writing. False finishes the pour briskly, sends the wave, writes doneText and stops; the canvas then rests as one still frame.
doneText: string; default —; What stays written once inactive. Defaults to the last phrase.
speed: number; default 1; How fast the sand pours, rests and the wave runs, 0.5 to 2.
grain: number; default 2; Grain size in px, 1 (fine silt) to 3 (coarse): the grains, how densely the letters are sampled and the bed's speckle. Coarser grain sets larger type so a letter still reads.
tone: "dune" | "ash" | "coral"; default "dune"; The beach: golden dune sand with a green-blue sea, grey volcanic ash glinting with mica under a slate sea, or pale pink coral sand with a turquoise sea.
progress: number; default —; Determinate progress, 0 to 1. The phrases share it in equal bands; within its band the settled share of a phrase's grains follows it, and entering the next band sends the wave for the next phrase.
sound: boolean; default false; Play a swish when a pressed finger moves fast through the sand and when the keyboard's finger starts. The pour and the wave are silent.
disabled: boolean; default false; The sand keeps being written, but cannot be drawn in.
onPhraseChange: (index: number) => void; default —; A phrase began: its index in phrases, or -1 for doneText. Also reported on the first commit.
className: string; default —; Classes for the root; it is w-full and the tray is sized for the longest phrase at its width.

Prop	Type	Default	Description
phrases	string[]	—	The status phrases, written in the sand one after another and cycled in order.
active	boolean	true	Writing. False finishes the pour briskly, sends the wave, writes doneText and stops; the canvas then rests as one still frame.
doneText	string	—	What stays written once inactive. Defaults to the last phrase.
speed	number	1	How fast the sand pours, rests and the wave runs, 0.5 to 2.
grain	number	2	Grain size in px, 1 (fine silt) to 3 (coarse): the grains, how densely the letters are sampled and the bed's speckle. Coarser grain sets larger type so a letter still reads.
tone	"dune" \| "ash" \| "coral"	"dune"	The beach: golden dune sand with a green-blue sea, grey volcanic ash glinting with mica under a slate sea, or pale pink coral sand with a turquoise sea.
progress	number	—	Determinate progress, 0 to 1. The phrases share it in equal bands; within its band the settled share of a phrase's grains follows it, and entering the next band sends the wave for the next phrase.
sound	boolean	false	Play a swish when a pressed finger moves fast through the sand and when the keyboard's finger starts. The pour and the wave are silent.
disabled	boolean	false	The sand keeps being written, but cannot be drawn in.
onPhraseChange	(index: number) => void	—	A phrase began: its index in phrases, or -1 for doneText. Also reported on the first commit.
className	string	—	Classes for the root; it is w-full and the tray is sized for the longest phrase at its width.