` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Lit surfaces - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Behind a section · the default ```html

Quay Street studio

Booked until Friday

Two rooms are free on Saturday morning. Hold one for an hour while you decide.

``` ### A panel standing on it ```html

Berth B1Free

Free from Saturday morning.

``` ### The lamp fixed · data-still ```html

Quay Street studio

Open late

The studio keeps its lamps on until ten.

``` ### The lamp moved · --bd-x and --bd-y ```html

Quay Street studio

Open late

The studio keeps its lamps on until ten.

Quay Street studio

Booked until Friday

Two rooms are free on Saturday morning.

``` ```js 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 yourself ``` The demo on the page: ```html

Quay Street studio

Booked until Friday

Two rooms are free on Saturday morning. Hold one for an hour while you decide.

``` ## Usage notes Move the pointer over the section: the lamp follows, slowly and not all the way. On a touch screen, or with reduced motion on, it stays put. ## Accessibility - It is decoration: the element is hidden from a screen reader, never takes focus and never takes the pointer. - The pool is kept dim enough that a heading, a line and a key on top clear 4.5:1 on its brightest and its darkest pixel, in all twelve finishes and both volumes. A pale finish gets a stronger pool than a dark one, because it can bear one. - The lamp moves only on a fine pointer, only while motion is allowed, and only a little: under half the way to the pointer. On touch and under reduced motion it stays where it rests. - It stops easing the moment it has arrived, and does not run while the section is off screen or the tab is hidden. - Warmth is never the only thing that says anything: the section’s words carry the meaning. ## How it’s built 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. ## Rules 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. The full rules are in `lamp-pool.rules.md` in the brain, which ships with the Kit. ## Related parts - [Brushed metal](https://tactileui.dev/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](https://tactileui.dev/parts/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. - [Grille moiré](https://tactileui.dev/parts/grille-moire): 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. - [Lamp](https://tactileui.dev/parts/lamp): 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.