Grille and cloth
Perforated metal and speaker cloth, for the place where a real device would breathe or sound.
Kit parts
Grille moiré
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.
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 lower plate is still. The script only watches.
Variants
- Behind a section · the default
- A panel standing on it
- A finer lattice
- A coarser lattice
States
- Running
- Held
- A finer lattice
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 turn 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 dark spots for half a minute: they gather in bands and thin out as the upper grille turns. 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, with the grilles a little out of line so the beat still shows.
- It does not run while the section is off screen or the tab is hidden, so it costs nothing there.
- On a phone nothing scrolls sideways: the turning plate is larger than the host and clipped to it.
Related parts
Brushed metal
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.
Louvre light
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.
Lamp pool
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.