Overview
STAVEN is a fourteen-section landing page for a prefabricated timber housing manufacturer, built as a production-ready static site. The page is carried by scroll. The hero video expands out of the headline on a scrubbed clip-path, a pinned section sends a deck of house cards travelling in front of a stationary giant word, section media drifts on parallax expressed as a percentage of container height, and the header inverts to white as it crosses the black footer. Every movement runs on transform and opacity, native scrolling is never hijacked, and no pinned section holds the reader longer than its own scroll distance. Timelines and listeners tear down cleanly on hot reload. The type is the other half of the design. Section words are sized at runtime rather than stepped off a fixed scale, because the layout wants each word to span the container regardless of its length. A small measuring module reads each word and applies the size on load, on font load and on resize, so the composition holds at any viewport. All copy, labels, navigation and image paths live in a single data module, so the entire page can be rebranded without touching a render function. Design tokens, motion configuration and section markup are each isolated in their own file. The build ships with its own validation harnesses: scroll-position capture, a seven-viewport responsive sweep, an accessibility pass covering heading order, alt text, control labels and keyboard entry, plus two custom harnesses that measure gutter violations and clipped content against the container rather than the viewport, because horizontal overflow is invisible to the document when the body clips it. Included: full commented source, the production build, the image set, the validation tooling and a README covering structure, motion tuning and content replacement.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
