Skip to content
Lumina

One product, one page, one scroll

A single-product launch site where the frame builds itself as you read down the page.

Client
Corvid Cycles
Year
2024
Discipline
3D web experience
Our role
Design, WebGL, front-end

The challenge

The challenge

A four-year development programme had to land in a page a cycling journalist would scroll to the end of. The engineering story was the selling point, and it was buried in a spec table.

The approach — 3 moves

What we did

  • 01

    The frame assembles component by component as the page scrolls, timed to the paragraph that explains each part. The motion carries the argument rather than decorating it.

  • 02

    Scroll drives a single animation timeline, not a stack of independent triggers, so the sequence cannot desynchronise on a slow device.

  • 03

    Reduced motion gets the same story as a set of static renders with the same captions — not a stripped-back page.

Frame part-way through the scroll-driven assembly
Completed frame at the end of the sequence
Static render sequence served under reduced motion

Outcome

What changed

Pre-orders in 6 weeks
18k
Scroll-to-end rate
71%
LCP on 4G
1.6s

Built with

  • Next.js
  • React Three Fiber
  • Lenis
  • Motion

Next project

A WebGL site that had stopped loading on phones

Lodestar Robotics / 2023 / Performance & motion