# Aluminium Plate Hero

A full-bleed hero on a large brushed aluminium plate. Real brushing (two noise filters stretched along the grain), a highlight that follows the cursor and breaks up on the grain, and a softer second reflection; on touch it drifts by itself.

Block · With a Pass · https://tactileui.dev/blocks/aluminium-plate-hero

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Svg noise brushing, Anisotropic conic highlight, Second reflection, Pointer led light, Idle drift, Static film grain, Colour tuning variables, Container query layout, Pause off screen

## Usage notes

The opening section of an industrial-design, hardware or tooling site: a backdrop that is a material, not a picture of one. Move the pointer and the light runs along the grain; leave it and the light wanders. Tint and tone take a brand colour, the metal stays metal.

## Options

| Option | Type | Description |
| - | - | - |
| eyebrow | text | Printed small above the headline. Empty leaves it out. |
| title | text | Headline |
| lead | text | Sentence |
| cta | text | Empty leaves it out. |
| ctaHref | text | Contrast key link |
| cta2 | text | Empty leaves it out. |
| cta2Href | text | Second key link |
| heading | enum | h1 when this is the top of the page. |
| tint | text | Empty is the house default. |
| tone | text |  |
| toneStrength | number | At 0 the greys are plain. |
| intensity | number |  |
| motion | boolean | Off holds one still picture, as reduced motion does. |
| finish | enum | Auto takes the page’s own finish, then the visitor’s system. |

## Methods

- refresh
- update
- destroy

## States

1. **At rest**: 
2. **Tinted**: 
3. **Toned**: 
4. **Hover and focus**: Keys brighten on hover and sink by their skirt when pressed.
5. **Finishes**: Aluminium (light) or graphite (dark), by the finish option, the page’s data-finish or tone, its colour scheme, or the visitor’s system.
6. **Tablet**: 
7. **Phone**: 
8. **Reduced motion**: The animation stops and one still picture is drawn. The same happens with the motion option off.
9. **Off screen or hidden**: Everything pauses when the section is off screen or the tab is hidden, and resumes when it is back.
10. **No hardware graphics**: On a browser that draws with the CPU the picture holds still: one frame, no loop.

## How it works

Original composition. Maren Works and all copy are invented. No image file: the picture is CSS and two SVG noise filters.