Hero
A hero states, it does not list: one headline, one accent word, at most two actions. Four shapes — the fourth being the cinematic one.
Frame the work — and cut the noise.
Courses, build logs, and the occasional trip — documented on camera.
.hero.hero-statement — centred manifesto
S02 · E0714:22
.hero-split — copy left, framed stage right
.hero-band.hero-band-media — the inverse billboard, copy bottom-anchored
The cinematic one
Two more modifiers on the same band, added because the travel collection had this shape as forty lines of inline style that no other page could reach: .hero-band-full takes it to the full viewport and pulls it up under the floating nav, and .hero-band__scan lays a film over the footage. Put any .pattern-scanline inside the scan layer; add data-ripple and nav.js tracks the pointer through it via --mx/--my. With the script blocked the mask rests centred — a vignette, not a broken effect — and under prefers-reduced-motion the film stops chasing, the displacement freezes and looping footage pauses.
Every road, in order.
Move the pointer across the frame.
.hero-band__scan[data-ripple] — the film, revealed where the pointer is. Shown here at 18rem rather than the real .hero-band-full 100dvh, which would take the whole docs viewport
| Class | What it adds |
|---|---|
.hero-band-full | full viewport, full bleed, pulled up under the island nav |
.hero-band__scan | the film layer — holds a .pattern-*, blends over the footage |
[data-ripple] | nav.js tracks the pointer; CSS masks the film to a soft circle around it |
--mx / --my | the only two things the script writes. Every visual decision stays in CSS |