Kit part · Lit surfaces
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.
Seats open in 11 days. Want one email that morning?
Two rooms are free on Saturday morning. Hold one for an hour while you decide.
Free from Saturday morning.
The studio keeps its lamps on until ten.
The studio keeps its lamps on until ten.
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | At rest | Lamp moved up | Lamp moved right |
|---|---|---|---|
| Surface | Booked | Booked | Booked |
Graphite
| Part | At rest | Lamp moved up | Lamp moved right |
|---|---|---|---|
| Surface | Booked | Booked | Booked |
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-backdrop-host | class | on the section | A box that is positioned and makes its own stacking context, so the backdrop stays behind the section’s own content. Any element will do. |
| div.tui-backdrop[aria-hidden="true"] | element | the first child of the host | The surface. It fills the host, follows its rounded corners, and takes no pointer events and no focus. |
| .tui-backdrop--lamp-pool | modifier | the surface | The finish’s desk with a grain, a pool of light over one corner and the dim of the room round it. |
| --bd-lamp | custom property | a colour | The lamp’s colour: the filament lamp’s, as the cloth selector’s. Leave it; a different colour is a different lamp. |
| --bd-x · --bd-y | custom property | lengths | How far the lamp has moved from where it rests. The script sets them as the pointer moves; set them yourself for a fixed place. |
| [data-still] | attribute | on the backdrop | Keeps the lamp where it is, whatever the pointer does. |
| wireBackdrops(root) | function | needs kit.mjs | Wire the backdrops in root, or in the page. kit.mjs already does this for the page and for what is added to it. |
<section class="tui-backdrop-host">
<div class="tui-backdrop tui-backdrop--lamp-pool" aria-hidden="true"></div>
<div class="tui-heading">
<span class="tui-label">Quay Street studio</span>
<h2 class="tui-h2">Booked until Friday</h2>
</div>
<p class="tui-lead">Two rooms are free on Saturday morning.</p>
<button class="tui-key tui-key--primary" type="button">Hold a room</button>
</section>
<!-- data-still keeps the lamp where it is. Put it somewhere else: style="--bd-x: 120px; --bd-y: -40px". -->import { wireBackdrops } from '/kit/kit.mjs';
// kit.mjs wires the backdrops on the page, and any added later.
wireBackdrops(container); // one inside a container you built yourselfNeeds kit.css and kit.mjs. How to install the kit.
Put class="tui-backdrop-host" on the section and the backdrop first inside it. The backdrop sits behind everything else in the host, so the heading, the line and the key need nothing of their own. The desk is the finish’s --tui-desk with a tiled grain. The pool is one radial gradient in the filament lamp’s colour, its fall-off baked into the stops, so nothing is blurred. The script moves that layer with translate, eased a few percent a frame, only while the pointer is moving it.
Put a lamp over a section: a warm pool of light on a grained desk that drifts toward the pointer, gently, and holds still otherwise.
6 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.
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 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.
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.
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.