Building an Endless Interactive Glass Xylophone with Three.js

A deep technical walkthrough of building an interactive glass xylophone in Three.js where cursor sweeps trigger notes, swing animations, and colour reveals. Covers: endless scroll via a single phase value recycling 64 instanced bars up a helix; a fluid simulation used as a reveal mask over a per-bar gradient; frosted glass faked entirely in shaders (blurred backdrop, screen-space refraction, Fresnel, iridescence, SSAO contact shadows) because MeshPhysicalMaterial can't depth-sort instances; GPU-side damped pendulum swing animation driven by a single strike timestamp per bar; pitch-shifted audio across a pentatonic scale; and performance tiers for mobile including idle-gating the fluid solver and halving resolution buffers.