[WEBGL / SCROLL-LINKED]

Scroll spools
the engine.

A turbofan builds itself from bare pylon to takeoff thrust, shot like a film rather than rendered like a diagram. Six framings, real depth of field, image-based lighting, and a fan that keeps turning whether you scroll or not.

Roll camera

Cold section,
hot section

The core stacks along the shaft in order — booster, high-pressure compressor, combustor, then the turbines that drive them all back. Each part carries its own timing offset, so the engine grows rather than appears.

Twenty blades,
one nacelle

Each fan blade is a swept airfoil twisted along its span, seated into the hub one after another. Every part flashes at its edges and strikes the frame as it seats. The cowling arrives last as a light holographic shell and stays transparent, preserving the cutaway view through light-off and full thrust.

Light off

The combustor catches, the focus racks from the cowl edge back to the glow, and the air above the nozzle starts to shimmer. This is a real lens: a circle of confusion computed from scene depth, not a blur pasted over the frame.

Full
thrust

N1 climbs, the blades dissolve into a turning disc, a vortex ropes off the tarmac into the intake, and the airframe shakes. Fan rotation runs on accumulated time, so hold the scroll still and the engine keeps running.

[WHAT THIS IS]

Shot, not just rendered.

The difference between a 3D animation and something cinematic is not polygon count. It is a shot list, a lens, one hard light, and a grade. This page has all four: six framings from 28mm to 85mm, depth of field driven by a depth buffer, a shadow-casting key through hangar haze, an anamorphic streak on the highlights, and film grain over a 2.39:1 frame.

Every effect is hand-written, and nothing is loaded. Three.js ships its post-processing as ES modules no CDN here can serve, so bloom, halation, defocus, heat shimmer and the grade are custom shader passes over render targets. The environment that lights the metal is authored in code and prefiltered at boot; the surface maps are drawn into a canvas; the sound is built from synthesised noise, filters and mechanical transients.

Oberlab — AI & automation studio

RendererThree.js r160 / WebGL
GeometryProcedural, 0 model files
Animated parts—
Shots6 · 28–85mm
LightingIBL + shadowed key
TexturesCanvas-generated
AudioSynthesised, 0 files
Post chainHand-written GLSL
DriverscrollY → progress 0–1