SkyBadge is a digital pilot

SkyBadge is a digital pilot logbook I founded and build. For its new landing page I wanted a hero that showed the product's best feature, 3D flight replay without making a visitor wait for it.

A pinned, scroll-driven 3D scene in Three.js. At rest, a Boeing 737 sits under the heading in a night sky of procedurally generated fog; the aircraft banks with the cursor as if rolling into a turn. As the visitor scrolls, the camera orbits from a front-left view round the tail to directly above, contrails stream from the engines, and a second headline reveals beneath.

How it's made

React + Three.js + Framer Motion (scroll progress drives the camera in spherical coordinates)

The aircraft is the same model used in the app's replay feature, retinted to brand colours at load and compressed with meshopt from 8.5 MB to 1.3 MB

Fog is ~100 billboard sprites with noise-generated textures, drifting along the aircraft's heading

Contrails are chains of soft particles that billow and thin with age

The scene is lazy-loaded behind the heading, stops rendering when off-screen, caps pixel ratio at 1.5×, and is skipped entirely on phones — the page still scores well on Core Web Vitals

Result

A hero that feels like a native app, costs the page nothing on first paint, and ties directly to the feature pilots pay for.

I build 3D and motion-led websites like this for clients through AMS Digital — Three.js, Spline, Rive, scroll-driven storytelling. If you want something that moves, get in touch.

Live: skybadge.app