Drumdock

Play anywhere. Anytime.

Drumdock is a modular drum kit made of birch plywood: one base, eight modules and under six kilos. You take it anywhere and decide which sounds go in. The brief: make Drumdock so tangible online that you can almost touch it, and hear it.

From Blender to browser

I rebuilt the entire product in Blender: every wood grain, every drum head, every module. From that model I rendered the product images for the site, plus image sequences that move with your scroll. The hero rotates as you scroll down. Further on, the kit falls apart and the modules click back into place. At the specifications the product slowly rotates along while you read.

A website you can play

The heart of the site is the soundboard. Hover over a module and tap to listen, start a rhythm (rock, funk, latin or drum 'n' bass) or play yourself with your keyboard. The sound plays live in the browser using the Web Audio API, no plug-ins needed.

Light, despite all those visuals

Well over a hundred frames of renders call for a smart setup: image sequences in WebP, loading only what comes into view, and a fully bilingual site (NL/EN), so international visitors can start playing right away.

Result

Within a month of launch the site had 16,000 views, with interest from all over the world.