KQ-1555 · STEAM/WORDS

Steam Words

A cup at the foot of the frame breathes a column of steam out of which a phrase condenses: each letter leaves the coffee as a tall, thin, blurred wisp and climbs to the reading line, opening out to its place and settling on the house drift spring, centre letters first. After a moment legible, the draught shears it apart from the windward end — each letter carried off by a gust that grows with the square of its time released, skewed, stretched and split into wisps — while the next phrase rises. The cup is a real button: Space or Enter blows the phrase away and brings the next, Left and Right blow it toward that side, and a sideways swipe across the steam does the same.

KQ-1555 · STEAM/WORDS

Coldbrook Café

Morning menu

House blend

4.20

steaming · “warm hands” · next “first light”

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/steam-words

Props

phrases: string[]; default —; The phrases the steam spells, cycled in order.
value / defaultValue: number; default 0; The phrase in the air, controlled or initial.
onValueChange: (index: number) => void; default —; A new phrase began to rise, from the cycle or a blow.
rise: number; default 1; How fast the steam lifts and the cycle turns, 0.5 to 2.
shear: number; default 0.6; How hard the draught shears the letters apart, 0 (they melt in place) to 1.
warmth: number; default 0.6; How hot the cup is: more steam, a quicker lift and a warmer tint, 0 to 1.
draught: "left" | "right"; default "left"; Where the draught comes from.
hold: number; default 1600; How long a phrase stays legible, ms at rise 1.
readingLine: number; default 0.42; Height of the reading line, 0 (top) to 1 (foot).
steamColor: string; default "var(--ink-2)"; The steam's cool colour.
warmColor: string; default an amber pigment from --warn; The warm tint the steam and letters take as warmth rises.
cupColor: string; default a cream ceramic pigment; The cup's glaze.
color: string; default "var(--foreground)"; The letters' colour before the warm tint.
interactive: boolean; default true; A hand across the steam breathes on it; a press on the cup or a sideways swipe blows.
paused: boolean; default false; Hold the current phrase where it is legible.
label: string; default "Steam rising from a cup"; The scene's accessible name.
disabled: boolean; default false; The cup cannot be blown on.
className: string; default —; Size (give it a height) and the phrase's type size.

Prop	Type	Default	Description
phrases	string[]	—	The phrases the steam spells, cycled in order.
value / defaultValue	number	0	The phrase in the air, controlled or initial.
onValueChange	(index: number) => void	—	A new phrase began to rise, from the cycle or a blow.
rise	number	1	How fast the steam lifts and the cycle turns, 0.5 to 2.
shear	number	0.6	How hard the draught shears the letters apart, 0 (they melt in place) to 1.
warmth	number	0.6	How hot the cup is: more steam, a quicker lift and a warmer tint, 0 to 1.
draught	"left" \| "right"	"left"	Where the draught comes from.
hold	number	1600	How long a phrase stays legible, ms at rise 1.
readingLine	number	0.42	Height of the reading line, 0 (top) to 1 (foot).
steamColor	string	"var(--ink-2)"	The steam's cool colour.
warmColor	string	an amber pigment from --warn	The warm tint the steam and letters take as warmth rises.
cupColor	string	a cream ceramic pigment	The cup's glaze.
color	string	"var(--foreground)"	The letters' colour before the warm tint.
interactive	boolean	true	A hand across the steam breathes on it; a press on the cup or a sideways swipe blows.
paused	boolean	false	Hold the current phrase where it is legible.
label	string	"Steam rising from a cup"	The scene's accessible name.
disabled	boolean	false	The cup cannot be blown on.
className	string	—	Size (give it a height) and the phrase's type size.