Audio-Reactive
Experiences
Seventeen unique explorations of real-time audio frequency analysis. Each example demonstrates different ways to visualize, animate, and interact with music.
Frequency Animation Demo
The foundational example demonstrating real-time frequency bin analysis with GSAP animations. Watch as four frequency bands trigger visual animations when crossing their thresholds, with lightning bolt icons that move and pulse to the beat.
Reactive Typography
Text that breathes, pulses, and transforms with the music. Giant letterforms scale and glow with bass frequencies while letter-spacing expands on rhythmic hits. Features continuous waveform visualization and dynamic text shadows.
Elements Shifting
A 3D field of geometric shapes that shift, rotate, and transform based on audio frequencies. An 8x8 grid of prismatic forms creates an organic, breathing landscape with ripple effects and rotation waves triggered by the music.
Particle System
Canvas-based particle explosions that burst, flow, and create trails based on audio frequencies. Features 800 particles with physics, screen shake on bass drops, and ring-shaped emissions that respond to the music.
Micro Animations
Subtle, elegant UI micro-interactions that respond to audio frequencies. Cards pulse, buttons ripple, progress bars dance, and circular indicators animate when thresholds are crossed. Demonstrates audio-enhanced user interfaces.
Typography Heartbeat
Variable font typography that pulses with the music's heartbeat. Bass frequencies drive font-weight from 300 to 900, creating text that physically thickens with the kick drum. Features an EKG visualization and BPM counter.
Liquid Grid
A complex nested CSS grid layout that breathes and shifts with the music. Columns, rows, and gaps dynamically resize based on audio—expanding during intense passages and contracting during quiet sections. Hidden panels reveal during high energy.
Color Schemes
A synesthetic experience where audio frequencies dictate the entire site's color palette. Bass maps to warm reds, mids to neon cyans, and overall energy controls saturation. The entire UI becomes a living, breathing color field.
Reactive Physics
Matter.js physics simulation where UI elements react to audio with realistic forces. Buttons and cards experience explosive scatter on snare hits, heavy gravity on bass drops, inverse gravity on melodies, and slippery friction on sub-bass.
The Spotlight
Editorial content revealed through an audio-driven circular spotlight mask. Heavy use of threshold exit events for a breathing aperture that expands on bass and contracts on release.
Fluid Blob Borders
Dashboard panels with blob-shaped clip-path borders. Polygon points mapped to bands via index mod 4; simplex noise adds organic drift modulated by audio energy.
Three.js One
Kinetic monolith field with instanced 3D geometry that ripples to sub-bass and bass. Low-mid adds lattice twist while mid frequencies push emissive shimmer and kick pulses.
Three.js Two
Prism swarm orbit with additive glitter, bloom, and afterimage trails. Bass breathes orbital shells, low-mid modulates precession, and mid bursts create high-energy flare cones.
Three.js / Three
A tunnel cathedral with forward camera travel, filament strobes, and pulse walls. Sub-bass and bass reshape tunnel radius while low-mid bends curvature and mid sharpens strobing detail.
Three.js Four
Resonant Core Bloom: a deforming geodesic membrane with torus petals and shell-wave bursts on kick hits. Mid frequencies inject shimmer while low-mid drives rotational topology turbulence.
Three.js Five
Caustic Tide Stage: an audio-driven water plane with crystal buoys, foam drift, and radial surface ripples. Bass shapes swell amplitude, low-mid adds chop, and mid frequencies color-shift caustic highlights.
Three.js Six
Pendulum Atrium: a kinetic hall of suspended bobs and tension lines driven by rhythmic swing physics. Bass expands arc amplitude, low-mid modulates wave phase, and mid impacts trigger spark cascades.