Northvane: a scroll-driven 3D story where every pixel is generated in code A 15-scene WebGL experience for an autonomous-drone brand: eroded mountains, a live swarm network and a tactical map, built with three.js and zero 3D models.

Scroll once and the page takes over.

Northvane is a cinematic, scroll-driven product story for a fictional autonomous-aircraft company. Every flick of the wheel flies the camera to the next beat of a mission. The aircraft is introduced over a mountain range, joined by its fleet, and connected into a live mesh network. It spots a heat signature and confirms a fire, then hands everything to a command layer that coordinates the response on a tactical map.

There are no 3D models, no stock footage and no photos. The terrain, the aircraft, the map, the globe and even the images in the use-case cards are all generated in code.

Open it on a laptop, scroll slowly, and move your mouse. https://northvane-aero.vercel.app

What you're looking at

Real terrain, generated from scratch. The mountains come from a 1024×1024 heightfield carved by about 650,000 simulated water droplets. Each droplet picks up sediment going downhill and drops it in the valleys, which is why the ridges branch like real drainage basins. A second pass paints a satellite-style colour map (forest, dry crests, rock, rivers, a lake, a town) and bakes sun shadows and ambient occlusion.

A procedural aircraft. The flying wing is lofted from its own outline, with a thick centre body tapering to thin, rounded edges like a real airfoil. It has a turned engine nacelle, and the panel markings are painted on a canvas texture at runtime. The footer uses a version standing on landing legs, tail-first like a real vertical-launch drone.

Two worlds, one camera. A diagonal wipe hands the terrain flight to the tactical map mid-flight, so the story moves from "what the aircraft sees" to "what the command layer knows" without a cut.

The tactical map. Region outlines draw themselves in. Threat markers pulse and change from yellow to red to cyan. Aircraft icons fly patrol loops with fading trails. A substation turns from red to cyan once the site is secured, and alert callouts connect to each agency on the ground.

A live swarm network. The fleet's links are recalculated as a Delaunay triangulation eight times a second, so the mesh flexes as the drones drift.

HTML labels pinned to 3D. The spec callouts, drone ID tags, detection boxes and map labels are regular HTML, projected from 3D positions every frame, so they stay pin-sharp and selectable.

How the scrolling works. The page is 15 scenes long, about 67 screens of scroll. One scroll gesture plays the page to the next resting point in about 2 seconds, then waits for you, so you never land halfway through a shot. The camera chases a damped copy of the scroll, so every move eases in and out. Headlines reveal letter by letter in random order. Resolution adjusts automatically on weaker laptops, and on phones the layout restacks.

Built with: three.js with custom GLSL shaders, Lenis, vanilla JavaScript and CSS (no framework), Python and NumPy for the terrain generator, Geist and Geist Mono, deployed on Vercel.

Want something like this for your product launch? I build immersive, scroll-driven 3D sites. Send me a message on Contra.