MACE: MC-23
A DJ's portfolio built around a working two-deck mixer that runs on Web Audio in the browser.
- Sector
- Hard techno producer and DJ
- Year
- 2026
- Built on
- React 19 + React Three Fiber
A portfolio for a hard techno DJ, built for desktop only, with nothing that feels like a template. Visitors play the music themselves with the on-screen deck.
The whole site is one real-time scene rendered with WebGPU, with a WebGL2 fallback that keeps the look. The picture runs through a CRT shader written from scratch. Underneath sits a two-deck Web Audio engine with an equal-power crossfader, per-deck EQ and a DJ filter, so the controls on screen change what you hear. The transport, the record library, the master filter and mute also have plain HTML twins for keyboards and screen readers, and a calm mode respects reduced motion.
- React 19
- React Three Fiber
- three.js WebGPU
- TSL shaders
- Web Audio API
- TypeScript
- Vite
By the numbers
- WebGPURenderer, WebGL2 fallback
- 2Decks on a live Web Audio graph
- 1997The broadcast monitor it's styled on
Facts about the build, which runs on desktop only.
Worth pointing out.
A working mixer
Two decks, an equal-power crossfade, per-deck EQ and a bipolar DJ filter, all on the Web Audio graph.
WebGPU first, WebGL2 always
The scene renders on WebGPU where the browser supports it and falls back to WebGL2 without losing the look.
A CRT shader from scratch
Barrel warp, the line structure of an old tube, halation and a rolling sync bar, written in TSL and deterministic frame to frame.
A room that hears the record
An audio feature bus splits the mix into bands and detects onsets, so the club reacts to whatever is playing.
Jog wheels that feel right
Pitch bend and scrubbing are integrated once per frame, so a gaming mouse and a trackpad feel the same.
Accessible underneath
The transport, the record library, the master filter and mute have semantic HTML twins, plus a calm mode for reduced motion.
Show all 6Show fewer
Let's buildyours.
Tell me what your business does and what you need. For a website, I'll reply within a day with a tier, a timeline and a price. If you don't write back, I won't chase you.