A browser-based beat sequencer with a 16-step grid, track controls, and a WebGL particle visualization that animates in sync with the audio output.
Recycled Records takes the industrial clatter of a plastic bottle recycling plant and turns it into something unexpectedly groovy. This browser-based beat machine, built for Coca-Cola's shift to clear bottles, lets you sequence 16 bars of rhythm using samples pulled straight from conveyor belts, crushers, and sorting lines. The interface is slick but not fussy: stack tracks, adjust pitch, dial in effects, tweak the BPM. Behind the grid, a WebGL particle system pulses in sync with your creation, shards of virtual plastic bouncing to every snare hit like an equalizer made of debris. It's part music toy, part sustainability message, and entirely more fun than either of those things sounds.
The technical backbone is Tone.js handling the audio scheduling, React and Framer Motion for the UI, and a custom WebGL visualizer extracting values from the sound to drive the animation. The real party trick? On-device video export. No server round-trips, no waiting, no cost. You make a beat, you get a video. The whole thing shipped in five weeks, which is either impressive or terrifying depending on how you feel about deadlines.
This one comes from Merlin Studio, an Amsterdam-based creative dev shop with design from WØRKS. The case study has more context on the build. Go make something that slaps.
- Live Demo: https://recycledrecords-48lk9g036-worksworksworks.vercel.app
- Case Study: https://merlin.studio/work/recycled-records
- Author: Merlin Studio (X, GitHub, Instagram)