Fluted Glass Hero
A full-bleed hero over a wall of ribbed glass with one warm lamp drifting slowly behind it. Every rib refracts the lamp into its own slice of light, with a lit edge, a faint caustic and a soft colour at the hot core.
What it is for
The opening section of a lighting, audio or hardware maker, or any product that wants one warm, quiet picture behind its headline.
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
- Ribbed glass refraction, Single lamp drift, Rib edge and caustic, Static film grain, Css fallback picture, Colour tuning variables, Container query layout, Pause off screen
- Stack
- Vanilla ES modules, CSS, WebGL
- 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
The glass is a real shader, the words are ordinary HTML in a slot, and the light takes your brand colour: set one custom property and the lamp is yours, with the words still readable.
Original composition. Orrery Lighting and all copy are invented. No image file: the picture is CSS, one small WebGL shader. Face: Instrument Sans (SIL OFL 1.1), the kit's own.
Anatomy
Ribbed glass refraction, Single lamp drift, Rib edge and caustic, Static film grain, Css fallback picture, Colour tuning variables, Container query layout, Pause off screen
Usage notes
The opening section of a lighting, audio or hardware maker, or any product that wants one warm, quiet picture behind its headline. The glass is a real shader, the words are ordinary HTML in a slot, and the light takes your brand colour: set one custom property and the lamp is yours, with the words still readable.
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. Orrery Lighting and all copy are invented. No image file: the picture is CSS, one small WebGL shader.