KQ-1835 · ETCHED/BRICKS

Etched Bricks

A wall of glass blocks, each etched with one character chosen from a density ramp by the brightness of the picture behind it, so clear glass, light marks and dense letters together read as the picture, with every block glowing warm in proportion as if lit from behind. Every few seconds a slow diagonal band of light sweeps through the wall and each block it crosses turns once on its vertical axis on the springs.snap constants, thinning to a sliver over its dark slot, swapping to another character of the same weight at the halfway point and glinting along its bevel while edge-on; the pointer carries a lamp of its own whose core turns the blocks it reaches, once each. The wall is a real button: arrow keys move the lamp and Enter or Space sends a sweep.

KQ-1835 · ETCHED/BRICKS

Waylight Hotel · lobby wall

Sunrise, laid in glass

waiting for light · click the wall or press enter

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/etched-bricks

Props

src: string; default —; A picture of your own to lay in the wall (same origin, or served with CORS). Without one, scene is drawn.
scene: "dawn" | "peak" | "moon"; default "dawn"; The picture drawn in code when there is no src: a sun half risen over the sea, a snow peak under the moon, or a crescent moon over hills.
alt: string; default the scene's description; What the picture shows; it names the wall for assistive technology.
ramp: string[]; default defaultEtchedRamp; The density ramp, darkest first: one entry per level, its characters the alternates a brick turns between.
brick: number; default 22; Brick width in px; rows and columns are fitted to the box and the bricks stretched a little to fill it.
bevel: number; default 0.5; How deep the bevel and the pillowed face read, 0 (flat glass) to 1.
glow: number; default 0.6; How strongly the backlight and the lamp light the glass, 0 to 1.
light: string; default "oklch(from var(--warn) 0.88 0.11 calc(h - 8))"; The backlight's colour; lit glass is the glass plus this light, summed in linear light.
glass: string; default a deep --accent pigment mixed into the page; The glass's own tint where no light comes through.
sweep: boolean; default true; Send a slow sweep of light through the wall every sweepEvery ms.
sweepEvery: number; default 6500; Time between sweeps, in ms.
sweepDuration: number; default 2600; How long one sweep takes to cross the wall, in ms.
radius: number; default 76; The pointer lamp's radius, in px.
flip: boolean; default true; Bricks turn over to a new character as light passes them.
paused: boolean; default false; Hold the wall still: no sweeps, though the lamp still lights it.
onSweep: () => void; default —; Fires as a sweep starts, whether from the timer, a click or a key.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; Shows the wall but takes no input.
className: string; default "h-full w-full"; Sizes the wall; it fills its parent by default.

Prop	Type	Default	Description
src	string	—	A picture of your own to lay in the wall (same origin, or served with CORS). Without one, scene is drawn.
scene	"dawn" \| "peak" \| "moon"	"dawn"	The picture drawn in code when there is no src: a sun half risen over the sea, a snow peak under the moon, or a crescent moon over hills.
alt	string	the scene's description	What the picture shows; it names the wall for assistive technology.
ramp	string[]	defaultEtchedRamp	The density ramp, darkest first: one entry per level, its characters the alternates a brick turns between.
brick	number	22	Brick width in px; rows and columns are fitted to the box and the bricks stretched a little to fill it.
bevel	number	0.5	How deep the bevel and the pillowed face read, 0 (flat glass) to 1.
glow	number	0.6	How strongly the backlight and the lamp light the glass, 0 to 1.
light	string	"oklch(from var(--warn) 0.88 0.11 calc(h - 8))"	The backlight's colour; lit glass is the glass plus this light, summed in linear light.
glass	string	a deep --accent pigment mixed into the page	The glass's own tint where no light comes through.
sweep	boolean	true	Send a slow sweep of light through the wall every sweepEvery ms.
sweepEvery	number	6500	Time between sweeps, in ms.
sweepDuration	number	2600	How long one sweep takes to cross the wall, in ms.
radius	number	76	The pointer lamp's radius, in px.
flip	boolean	true	Bricks turn over to a new character as light passes them.
paused	boolean	false	Hold the wall still: no sweeps, though the lamp still lights it.
onSweep	() => void	—	Fires as a sweep starts, whether from the timer, a click or a key.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	Shows the wall but takes no input.
className	string	"h-full w-full"	Sizes the wall; it fills its parent by default.