Home / Creative & Motion / Ten Thousand Acres, Scroll Story
Ten Thousand Acres, Scroll Story
A conservation charity wants a campaign page that makes people feel the scale of the problem and then act, not another donation form.
The brief and the build
Brief: Tell the story through scroll. An animated hero, copy that reveals as you read, numbers that count up, a pinned horizontal sequence, and one clear call to action at the end.
Everything is driven by one scroll handler that turns scroll position into progress values, so the word-by-word reveal, the progress bar, and the horizontal sequence cannot drift out of step. The hero waves are a small canvas loop that pauses when the tab is hidden.
Motion is optional. With prefers-reduced-motion set, the waves stop, text appears in full, numbers show their final values, and the horizontal sequence becomes a normal row. All text is real HTML, so the story is readable without the effects.
Light is a calm, airy telling. Dark is a deep-sea, cinematic layout. Creative is a loud, poster-style version.
Results
- Problem: A conservation charity wanted a campaign page that conveys scale and then asks for action, rather than another donation form.
- Built: A scroll-driven story with a canvas hero, word-by-word reveal, count-up numbers and a pinned horizontal sequence, with full reduced-motion support.
- Lighthouse, light design, mobile profile: Performance 100, Accessibility 96, Best Practices 100, SEO 100. Largest contentful paint 1.0 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 96, Best Practices 100, SEO 100. The remaining accessibility gap in all three designs is the scroll-reveal text, which starts dim by design before it is revealed.
- Weight: page, stylesheet and script total 9.7 KB (4.4 KB gzipped). The script alone is 5.6 KB (2.6 KB gzipped).
- Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
- Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 96 and 96 for accessibility (100 in the other three categories); the gap is colour contrast.
Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.
Stack
Highlights
- Scroll-linked motion
- Canvas animation
- Pinned sections
- Reduced-motion support
- No animation library
Need something like this?
Tell me what you're building and I'll tell you how I'd approach it.