Skip to content
Recycled Records: A WebGL Beat Machine Built on Bottle Plant Samples

Recycled Records: A WebGL Beat Machine Built on Bottle Plant Samples

Coca-Cola's Recycled Records turns factory noise into rhythm. Sequence 16 bars using sounds from an actual recycling plant, watch WebGL particles pulse to your beat, and export video straight from the browser. Built with Tone.js and shipped in five weeks.

Details

Published

What it is

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.

How it’s made

Technology
WebGL
Framework & Tool
Tone.js
Interaction
Audio
Subject
Music