Web design and development for an architectural studio

My eyes were exhausted of modern video players: flat, sterile glass, cluttered with digital gimmicks and translucent bars. I didn’t want another web widget. I wanted weight, friction, and genuine tactile pleasure.

So I built a machine.

Designed to feel as if it weighed ten kilograms of solid walnut and milled graphite on your desk, this skin transforms Video.js 10 into a physical, skeuomorphic Director’s Console inspired by 1970s Steenbeck and KEM film-editing decks. It was engineered specifically to play "Cold Blood, Warm Glass", a 10-act speculative neo-noir series.

Key features: • Ten independent sunken chalk keys with 7% physical mechanical stroke and latching states. • Procedural acoustic feedback (Web Audio API) delivering walnut wood resonance and micro-switch clicks. • A free-spinning 360° spring-loaded shuttle lever for rotational scrubbing with automatic elastic return. • A gold-phosphor preview monitor that only reveals timecode when scrubbing, preserving pure cinema on the main screen. • Analog volume buttons driving a 7-stage amber LED VU meter. • Full responsive cinematic cover zoom for mobile landscape viewing.

A physical instrument for cinema. Once your fingers touch this console, the rest of the web feels flat.

Directed & Designed by Vanesa Martínez. Built on Video.js 10, React 19, Tailwind CSS v4, Web Audio API, and Mux HLS Streaming.