Vision

Scroll down and the fiber-optic hero plays forward. Scroll back and it rewinds at the same pace. Each headline line rises in as it enters the viewport and drops away when it leaves, so the stagger replays on the way back up.

react
typescript
nextjs
tailwind

Format: Interactive experience
Platform: Desktop + Mobile
Engine: React + Canvas
Type: Concept

How It Works

On load

Decode

The page fetches the hero video once and samples it into decoded ImageBitmaps, downscaled to keep memory in check. Until they are ready, a plain video element stands in and scrubs by seeking, with one seek in flight at a time.

Interactive

Scrub

Each animation frame eases the playhead toward the scroll position and redraws the canvas only when the frame index changes, cover-fit at any aspect ratio, sharp on high-density screens.

Interactive

Reveal

Every headline line and copy block sits behind an IntersectionObserver. Visibility follows intersection in both directions, so the staggered entrance plays again each time a block comes back into view.

Engineering

Decode once, draw per scroll
Seeking a video on every scroll event makes the browser decode forward from the nearest keyframe each time, and that shows up as stutter. Decoding the sampled frames once at load turns each scroll step into a single canvas draw. The cost moves to load time and memory, so the frame count is capped, and the page closes every bitmap and revokes the video's object URL when it unmounts.
Built inside the site
Vision is a route in this Next.js site, built on the site's color tokens and type. All of its interface copy lives in one content file, so every brand or copy change reads as one diff.
Ownership in the page head
The play page is noindex, its canonical points to this page, and the credit in its corner links back here, so search and answer engines land on the write-up first.