A wall lit from the side, with the shadows of slats across it, as when the sun comes through blinds. The wall and its light are fixed; the slat shadows drift sideways across it very slowly and come back. Their edges are soft, drawn into the gradient rather than blurred, and the whole thing holds still when it is off screen.
Seats open in 11 days. Want one email that morning?
Anatomy
The backdrop sits behind everything else in the host, so the heading, the line and the key need nothing of their own. The wall is a gradient on the finish’s face, with a wash of light across it, painted once.
Variants
Behind a section · the default
A panel standing on it
A narrow section: the slats keep their size
States
Running
Held
Props and options
Name
Kind
Description
[data-run]
attribute
Set by the script: false off screen and in a hidden tab. The stylesheet holds the drift there.
wireBackdrops(root)
function
Wire the backdrops in root, or in the page. kit.mjs already does this for the page and for what is added to it.
Usage notes
Watch the shadows over half a minute: they slide across the wall and ease back. Scroll the section off screen and back: it holds still while it is away.
Accessibility
It is decoration: the element is hidden from a screen reader, never takes focus and never takes the pointer.
Under reduced motion it is one still frame.
It does not run while the section is off screen or the tab is hidden.
It is neutral light, from the finish’s own tokens. It is not a colour, so nothing about it needs a second way of saying it.
A brushed metal surface under a raking light. The grain runs one way, as if drawn with a wire brush, and a soft sheen crosses it in bands. On a fine pointer the light turns slowly toward the pointer as it crosses the section and settles where you leave off; on touch it rests. Otherwise it is still, so it costs nothing at rest.
A warm pool of lamplight on a desk. The desk is the finish’s own, with a fine grain, and a lamp over one corner throws an oval of light that fades to the dim of the room. On a fine pointer the lamp drifts a little toward the pointer, eased. The warmth is the filament lamp’s colour and nothing else: it is not a new colour in the kit.
Two speaker grilles laid one over the other. Each is a plate drilled with a lattice of round holes; one turns a few degrees and back, and where its holes meet the other’s the dark behind shows through. Those dark spots gather and thin and drift across the surface, the way two real grilles beat against each other. Slow, and held still off screen.