Scroll-driven 3D storytelling: inside our Adidas concept.

Most brand websites show you a product. A scroll-driven 3D experience makes you move through it. We built an Adidas concept site to explore how far that idea can go before it breaks — on a phone, on hotel wifi, in the real world.

The core idea: scroll is the timeline

The entire experience hangs on one decision: the scrollbar drives everything. As you scroll, the camera travels through a sequence of 3D scenes — the shoe assembles, rotates, explodes into its layers, reforms. No controls to learn. The most universal gesture on the web becomes the narrative engine.

Scene architecture

We structured it as discrete scenes with managed transitions:

1. Hero orbit — the shoe floats, camera slowly circling, flavour copy fading in
2. Exploded view — layers separate along the scroll: sole, cushioning, upper
3. Kinetic typography — text carves through 3D space as features land
4. Reassembly and CTA — the product reforms as the finale resolves into the call to action

Each scene owns a scroll range, and the choreography between them is eased with GSAP — the same power3 curves everywhere, so the whole piece feels like one continuous movement rather than four demos stitched together.

The performance budget (the hard part)

3D on the web dies by jank. Our rules:

• One draw-call-heavy hero object, not a hundred props
• Draco-compressed models, textures at the size they are actually seen
• DPR capped at 2 — phones render sharper than their screens can show anyway
• Scroll-linked animation runs on transforms and the render loop, never on layout
• A generous loading state, because a beautiful wait beats an ugly start

The target was 60fps on a mid-range Android. Hitting it meant deleting as much craft as we added — the exploded view originally had twice the parts, and nobody missed them.

What we learned

The scroll is a promise. Every pixel of progress must reward it — or the story, however beautiful, is just an obstacle between the user and the buy button.

Motion serves hierarchy. The sections users remember are the ones where the 3D answered a question they actually had — what is this made of, why does it feel like that.

We now bring the same choreography discipline to every product page we build — the concepts from this experiment show up in our client work in quieter, faster-loading forms. If your product deserves to be moved through rather than looked at, this is the craft we love being hired for.