Have a project in mind?Have a project in mind? We design and build for the web.Start a project

Added on Aug 4, 2026

WebGL Xylophone | Codrops

WebGL Xylophone | Codrops

WebGL Xylophone | Codrops

Share this project

About

WebGL Xylophone is a Codrops tutorial demo by Sujen Phea. A long helix of frosted glass bars spirals down through a soft lavender background, and sweeping the cursor across it rings the bars like the keys of a xylophone. Each bar you touch flashes with colour, pink, blue and teal, before fading back to white. The helix scrolls along so new bars keep passing under the pointer. It's made with Three.js, using custom shaders, a small simulation and post-processing, and the whole page weighs only about 0.1 MB.

What it is

Experiment Geometric

Look

Glass/chrome Purple Pastel

How it works

Single scene Cursor-reactive

How it's built

WebGL2 Custom shaders 3D models Post-processing Simulation 0.1 MB

Keywords

xylophone helix glass bars music sound tutorial frosted glass

Submitted by

mesh3d

Share this project

© All content, screenshots, and screen recordings are the property of their respective owners.

Similar Three.js experiments

Obsidian

made by Robert Leitl

Liquid Geo

made by Robert Leitl

WebGPU Blob

made by aengel

Disco

made by Sujen Phea

Ecctrl

made by Andrew Chen

SPATIAL METALLIC SYSTEM

made by Mark Richert

Sit your work next to ijkl, Abeto, and the rest.

We're always looking to feature fresh, creative work that pushes what's possible on the web.