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.
What it is for
The opening section of an industrial-design, hardware or tooling site: a backdrop that is a material, not a picture of one.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- 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
- Stack
- Vanilla ES modules, CSS, Svg filter
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe backdrop in its default light, drifting very slowly (a cycle of 20 seconds or more); the words in the slot: eyebrow, headline, one sentence, a contrast key and a second key.
- TintedSet --hb-tint (or the tint option) to a brand colour: the light takes it. Its lightness is held in the range the picture was drawn for and its chroma capped (${b.chroma}), so the words keep their contrast.
- TonedSet --hb-tone and --hb-tone-strength (0 to 0.12): the greys lean toward that hue at their own lightness. --hb-intensity (0.4 to 1.4) sets how strong the light is.
- Hover and focusKeys brighten on hover and sink by their skirt when pressed; every link shows a 2px focus ring.
- FinishesAluminium (light) or graphite (dark), by the finish option, the page’s data-finish or tone, its colour scheme, or the visitor’s system.
- TabletUnder 700px of container width the layout re-composes; the headline and sentence take the full width.
- PhoneUnder 520px of container width the keys fill the width, one above the other; no sideways scroll at 390px.
- Reduced motionThe animation stops and one still picture is drawn. The same happens with the motion option off.
- Off screen or hiddenEverything pauses when the section is off screen or the tab is hidden, and resumes when it is back.
- No hardware graphicsOn a browser that draws with the CPU the picture holds still: one frame, no loop.
Notes
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.
Original composition. Maren Works and all copy are invented. No image file: the picture is CSS and two SVG noise filters. Face: Instrument Sans (SIL OFL 1.1), the kit's own.
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
How it works
Original composition. Maren Works and all copy are invented. No image file: the picture is CSS and two SVG noise filters.