Morning Blinds Hero
A full-bleed hero lit by morning light through window blinds: soft-edged bands across a plaster wall with a gentle penumbra, a window bar, a faint warm bounce off the floor, and shadows that shift slightly. Pure CSS.
What it is for
The opening section of a studio, architect, hospitality or editorial site that wants calm daylight behind its words.
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
- Blind shadow bands, Penumbra layer, Window bar shadow, Floor bounce, Static film grain, Css transform drift, Colour tuning variables, Container query layout, Pause off screen
- Stack
- Vanilla ES modules, CSS
- 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
Light first; the graphite finish turns the same window into a lamp on a dark wall. Nothing runs but CSS transforms, and the light takes your brand colour.
Original composition. Calder & Pike and all copy are invented. No image file: the picture is CSS. Face: Instrument Sans (SIL OFL 1.1), the kit's own.
Anatomy
Blind shadow bands, Penumbra layer, Window bar shadow, Floor bounce, Static film grain, Css transform drift, Colour tuning variables, Container query layout, Pause off screen
Usage notes
The opening section of a studio, architect, hospitality or editorial site that wants calm daylight behind its words. Light first; the graphite finish turns the same window into a lamp on a dark wall. Nothing runs but CSS transforms, and the light takes your brand colour.
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. Calder & Pike and all copy are invented. No image file: the picture is CSS.