GearShift.
A cinematic browser experience. Six gears, spatial sound, and ambient luxury lighting — crafted entirely in the browser.
Pull away from rest. Clutch bites at 1,200 RPM.
↓ Select a gear position below the shifter
Anatomy of
Touch.
Full-Grain Leather
Hand-stitched Nappa leather. Cross-stitch pattern at 4mm pitch. Ages with every shift.
Billet Aluminium
CNC-machined 6061-T6 aluminium. Mirror-polished to Ra 0.4μm. Corrosion-sealed.
Borosilicate Core
Cast borosilicate glass core with embedded blue LED channel. Thermally stable to 300°C.
Carbon Fibre
3K twill-weave carbon fibre. Clear-coated gloss finish. 40% lighter than aluminium.
Built with
obsession.
No WebGL. No Three.js. No canvas. Every visual and acoustic effect is achieved through pure CSS, SVG, and the Web Audio API — demonstrating what the browser platform is truly capable of.
Spatial Sound
Each gear produces a unique mechanical click synthesized from bandpass-filtered white noise and a triangle oscillator with frequency-mapped resonance. No samples — pure synthesis.
Spring Physics
The shifter knob uses a custom spring curve — cubic-bezier(0.34, 1.56, 0.64, 1) — that overshoots and settles, mimicking the mechanical resistance of a real gated shifter.
Depth of Field
A radial CSS gradient vignette simulates shallow depth of field — edges blur into the dark surround while the knob remains in sharp focus. Pure CSS, no canvas.
Ambient Lighting
Three independently drifting radial gradients simulate studio rim lighting. Each layer moves on a different 8–14s cycle, creating the illusion of a slowly rotating light source.