Inspiration
Most product websites treat a 3D model as decoration — something that spins in a hero section and gets forgotten the moment you scroll past it. We wanted to see what happens if the 3D model is the website: if scrolling controlled a camera the way a director controls a shot, and every section revealed a different system of the machine instead of a different marketing paragraph. AERON X1 is our answer — a fictional 2040 electric superbike, unveiled through a single continuous cinematic scroll.
What it does
AERON X1 is an interactive, scroll-driven 3D product experience for a concept electric superbike:
- A procedurally-built motorcycle (frame, fairing, wheels, suspension, motor, exhaust) rendered in real time with physically-based materials and reflections
- A scroll-controlled cinematic camera that moves through Reveal → Design → Power → Aerodynamics → Intelligence → Performance, with floating labels that anchor to real components
- An Inspect Machine mode — click any part of the bike to pull up specs on the battery, motor, frame, suspension, or wheels
- A live configurator — body finish, wheel finish, and lighting mode update the actual 3D materials instantly
- An Enter the Machine cockpit mode with an animated HUD (speed, RPM, battery, riding mode)
- Hidden easter eggs (a Konami-code camera angle, a five-click logo mode, a headlight double-click)
How we built it
The entire experience is a single self-contained build using Three.js for the 3D scene, an UnrealBloomPass post-processing pipeline for the light/glow accents, and a PMREM-generated environment map so metal and carbon materials pick up real reflections instead of going flat against the dark background. The motorcycle itself is procedurally modeled — no external asset pipeline — using an extruded side-profile silhouette for the tank/seat/tail, torus geometry for the wheels/rims/discs, and tube geometry along Catmull-Rom curves for the frame and exhaust. Scroll position drives a hand-rolled camera interpolation across a set of cinematic keyframes, smoothed with lerp/smoothstep easing so it feels directed rather than mechanical. Ambient sound uses the raw Web Audio API (an oscillator-driven hum) instead of external audio files, so the whole experience ships as one HTML file.
Challenges we ran into
- Getting a procedurally-built vehicle to actually read as "real." Early passes had disconnected-looking parts and materials that were too dark to separate from the background — solved with a single continuous body silhouette plus an environment map for reflections instead of flat unlit color.
- Geometry orientation bugs are sneaky. A wheel that's mathematically correct but rotated 90° on the wrong axis doesn't look like "a slightly wrong wheel" — it looks like it's missing entirely. Debugging that meant reasoning carefully about each primitive's default axis rather than guessing at rotation values.
- Shared materials vs. per-mesh animation. Fading the bike in from wireframe to solid required animating opacity per mesh, but naively cloning materials per mesh silently broke the configurator (which mutates a handful of shared material references). Fixed by deduplicating clones once per unique material.
- Camera choreography that never clips. Framing close, dramatic shots without the camera ending up inside the geometry took careful keyframe tuning across every scene transition.
Accomplishments that we're proud of
A fully interactive, cinematic 3D product story that runs as a single file with no build step, no external 3D assets, and no dependencies beyond Three.js — yet still delivers reflections, bloom, a live configurator, and a working cockpit HUD.
What we learned
How much of "does this look real" comes down to lighting and material continuity rather than geometric complexity — and how important it is to sanity-check every primitive's default orientation before composing a scene out of it.
What's next
- A proper GLTF asset pipeline for higher-fidelity geometry
- GSAP ScrollTrigger for even more precise scene choreography
- Full device-capability branching for low-end mobile
Log in or sign up for Devpost to join the conversation.