# 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.

Kit part · Free · https://tactileui.dev/parts/brushed-metal

- Element: `<div class="tui-backdrop tui-backdrop--brushed-metal" aria-hidden="true">`
- 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
<section class="tui-backdrop-host" style="width:min(100%,560px);padding:40px 32px;border-radius:var(--tui-r-l);text-align:left;display:grid;gap:12px;justify-items:start"><div class="tui-backdrop tui-backdrop--brushed-metal" 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" style="margin:0">Two rooms are free on Saturday morning. Hold one for an hour while you decide.</p><button class="tui-key tui-key--primary" type="button">Hold a room</button></section>
```

### A panel standing on it

```html
<section class="tui-backdrop-host" style="width:min(100%,480px);padding:28px;border-radius:var(--tui-r-l)"><div class="tui-backdrop tui-backdrop--brushed-metal" aria-hidden="true"></div><div class="tui-panel" style="display:grid;gap:12px;text-align:left"><div class="tui-panel__head" style="margin-bottom:0"><span class="tui-label">Berth B1</span><span class="tui-status"><span class="tui-lamp" data-lamp="green" data-on></span>Free</span></div><p class="tui-text" style="margin:0">Free from Saturday morning.</p></div></section>
```

### Square corners: the backdrop follows the host

```html
<section class="tui-backdrop-host" style="width:min(100%,420px);padding:28px 24px;border-radius:0;text-align:left;display:grid;gap:12px;justify-items:start"><div class="tui-backdrop tui-backdrop--brushed-metal" aria-hidden="true"></div><div class="tui-heading"><span class="tui-label">Quay Street studio</span><h2 class="tui-h2">Open late</h2></div><p class="tui-lead" style="margin:0">The studio keeps its lamps on until ten.</p><button class="tui-key tui-key--primary" type="button">See the rota</button></section>
```

### The light fixed · data-still

```html
<section class="tui-backdrop-host" style="width:min(100%,420px);padding:28px 24px;border-radius:var(--tui-r-l);text-align:left;display:grid;gap:12px;justify-items:start"><div class="tui-backdrop tui-backdrop--brushed-metal" data-still style="--bd-turn: 12deg" aria-hidden="true"></div><div class="tui-heading"><span class="tui-label">Quay Street studio</span><h2 class="tui-h2">Open late</h2></div><p class="tui-lead" style="margin:0">The studio keeps its lamps on until ten.</p><button class="tui-key tui-key--primary" type="button">See the rota</button></section>
```

## Every state

- At rest
- Light turned left
- Light turned right

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| 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--brushed-metal | modifier | the surface | Grain drawn once and a conic sheen over it. Nothing else is painted, and nothing is drawn again unless the light is leaning. |
| --bd-turn | custom property | an angle | How far the light has turned. The script sets it as the pointer moves; set it yourself for a fixed angle. |
| [data-still] | attribute | on the backdrop | Keeps the light 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. |
| backdropTarget() · backdropStep() | function | pure | Where the light should lean for a pointer position, and one frame of easing toward it. |

## Markup

```html
<!-- The host makes the stacking context; the backdrop is its first child and is hidden from a screen reader. -->
<section class="tui-backdrop-host">
  <div class="tui-backdrop tui-backdrop--brushed-metal" 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 light where it is. A fixed angle: style="--bd-turn: 12deg". -->
```

```js
import { wireBackdrops } from '/kit/kit.mjs';

// kit.mjs wires every backdrop on the page, and any added later.
// To wire one inside a container you built yourself:
wireBackdrops(container);
```

The demo on the page:

```html
<section class="tui-backdrop-host" style="width:min(100%,720px);padding:40px 32px;border-radius:var(--tui-r-l);text-align:left;display:grid;gap:12px;justify-items:start"><div class="tui-backdrop tui-backdrop--brushed-metal" 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" style="margin:0">Two rooms are free on Saturday morning. Hold one for an hour while you decide.</p><button class="tui-key tui-key--primary" type="button">Hold a room</button></section>
```

## Usage notes

Move the pointer slowly across the section: the bands of light turn and settle. On a touch screen, or with reduced motion on, the light holds still.

## Accessibility

- It is decoration: the element is hidden from a screen reader, never takes focus and never takes the pointer, so the section reads as it would without it.
- The surface is made from the finish’s own tokens and kept to a narrow range of light, so a heading, a line and a key on top clear 4.5:1 on its lightest and its darkest pixel, in all twelve finishes and both volumes.
- The light leans only on a fine pointer, and only while motion is allowed. On touch and under reduced motion it stays where it is. It never moves on its own, and nothing flashes.
- It stops easing the moment it has arrived, and does not run at all while the section is off screen or the tab is hidden.
- On a phone nothing scrolls sideways: the surface is clipped to its host.

## 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 grain is noise stretched along the brushing, drawn once as a tiled background. The sheen is a conic gradient centred far below the plate, so its bands run nearly straight and fan a little, and it is one layer that turns by `rotate`. The script eases it a few percent a frame, only while the pointer is moving it.

## Rules

Lay brushed metal behind a section: a fine grain, a raking light that turns a little as the pointer crosses, and nothing running when it is not.

The full rules are in `brushed-metal.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Lamp pool](https://tactileui.dev/parts/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.
- [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.
- [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.
- [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.