Welcome to the Live Cymatics Visualizer
This app turns sound into cymatics — the real physics of how vibration organizes matter into geometric patterns. Instead of a generic music-reactive animation, every shape on screen is computed live from your audio using actual plate-vibration mathematics. You're not just hearing music here — you're watching its structure.
Getting started in 3 steps
- Tap the glowing Alpha (α) on the black landing page to enter the stage.
- Pick an audio source in the left panel — Live Mic, an uploaded File, or a Stream URL.
- Choose a Rendering Style (Chladni / Liquid / Laser) on the right panel and watch it react to the music in real time.
Tip: come back to this guide anytime with the ? button at the bottom-right of the stage.
How It Works — The Math Engine
Real Chladni plates are flat sheets sprinkled with sand and vibrated by a tone — the sand bounces away from loud "antinode" zones and settles along silent "nodal lines," tracing the plate's vibration mode as a visible pattern. This app simulates that same physics digitally:
- Chladni / Liquid styles run a stochastic particle simulation: thousands of points random-walk with a step size scaled by the local vibration amplitude. Loud zones jitter and scatter; quiet zones settle and freeze — exactly like real sand.
- Plate Geometry swaps the underlying equation: Square and Triangle/Hexagon use summed standing waves, Circular uses Bessel functions (the real solution for a vibrating disc), and Star/Spiral/Cross/Sun Ray use polar formulas for extra visual variety.
- Vibrational Engine maps live FFT (frequency analysis) bands to the simulation: Bass (20–100Hz) drives overall amplitude/energy, Lead (400–4kHz) drives the plate's mode numbers (n, m) — so bassier, brighter music visibly changes the pattern's complexity.
- BPM is detected by watching for bass-energy spikes above their own rolling average and measuring the spacing between them. Chord and Key are detected by building a 12-note "chroma" vector from the live spectrum and matching it against chord templates and the classic Krumhansl–Schmuckler key profiles — real music-theory DSP, run entirely in your browser.
- Mood-Reactive color and Auto Style use the same bass/brightness/energy reading to pick colors and switch Rendering Style/Laser Pattern in time with the music's character — calmer passages lean cool and fluid, energetic drops lean bright and aggressive.
All of this — FFT analysis, particle physics, chord/key detection — runs client-side in raw JavaScript. No servers, no plugins.
Reading the Patterns — What the Shapes Mean
This isn't just decoration — the shapes are grounded in real acoustics history. In 1787, physicist Ernst Chladni bowed metal plates covered in sand and showed it collects along the plate's silent "nodal" lines, forming symmetric patterns — he demonstrated this to Napoleon in 1809. In the 1960s, Hans Jenny expanded this into "cymatics," documenting that clean, harmonically-related frequencies form clear, stable patterns, while dissonant or noisy frequencies never settle, staying fragmented and chaotic.
- Symmetric concentric rings — pure, harmonically simple tones. Reads as settled and balanced.
- Radial petal/star patterns — richer but still consonant harmonic content. Reads as layered but harmonious.
- Grid/cross patterns — two cleanly-related frequencies (like a musical octave or fifth). Reads as structured.
- Spiral patterns — a phase relationship winding outward, often from rhythmic or filter-swept sound. Reads as flowing motion.
- Fragmented, never-settling patterns — the real, documented signature of dissonance or clashing frequencies — not a bug or a bad setting.
- Liquid style — same math as Chladni with an added flowing current: smooth swirl reads consonant/gentle, sharp jittery motion reads tense/aggressive.
Read these as an honest, physics-based translation of the audio, not mystical claims — and it's genuinely fun to watch.
Who This Is For
- DJs and live performers who want their set to be seen, not just heard.
- Dance, fitness, and workout instructors who want motivating visuals for training sessions.
- Content creators and music producers who want reactive visuals for releases, reels, and livestreams.
- Anyone who has ever wanted to actually see the beauty hidden inside a piece of music.
Who Made This — and Why
This app was built for Jennifer Codilan Torres, known as DJ Jenco — a Filipina DJ, Multimedia Producer, and Techpreneur.
DJ Jenco's advocacy is creating inspirational, motivational, and positivity-driven EDM for work, sports, and workouts — music meant to lift people up, not just fill a room. This visualizer is an extension of that mission: a way to let people "see" the beauty and energy of music, turning sound into a living, glowing geometry that mirrors the emotion behind the track.
Full Feature Guide — Left to Right
Left Sidebar
- Audio Input — switch between Live Mic (captures your microphone/desktop audio — needs a secure context, see Tips), File (drag-and-drop or browse MP3/WAV, with a playlist and prev/play/next transport), and Stream (embed a YouTube/Spotify URL for visual reference; note browsers block raw audio capture from those embeds — route their sound through Live Mic via screen-share audio if you want them reactive).
- Vibrational Engine — Bass Gain and Lead Sensitivity control how strongly those bands drive the visuals; FFT Sensitivity (smoothing) controls how jittery vs. smooth the response is; Beat Sensitivity controls how easily quiet beats trigger and how hard the visuals punch on each hit; Mode n/m sliders set the plate's vibration mode manually when Auto-map is off.
- Good Energy / Sacred Geometry — Consonance Filter smooths chaotic jitter into cleaner motion; Divine Glow lights up a golden badge when the dominant frequency hits 432Hz or 528Hz ("energy anchor" tones); Alpha Symmetry blends the pattern toward centered concentric rings on strong peaks; Symmetry Order sets how many-fold that symmetry is.
Center Stage
- Canvas — the live visualizer itself.
- Topbar — track title, Record (captures canvas + audio to video), Capture PNG (snapshot), ♪ Player (show/hide the player bar), ⛶ Stage Mode (distraction-free fullscreen).
- Meters (bottom-left) — live Bass/Mid/Lead levels, dominant frequency, detected BPM, Chord, and Key.
- Center Avatar — your logo or profile image, glowing with a soft blurred shadow so it stands out from the visuals.
- Caption overlay — shows manual text, LRC-synced lyrics, or live speech captions depending on the Player's CC settings.
- Player Bar (bottom-center, draggable) — cover art, title, transport controls, a CC button for captions, and a ⚙ for orientation (horizontal/vertical) and skin (Default/Spotify/Minimal/Neon).
- ? Quick Help (bottom-right) — this guide.
Right Sidebar
- Rendering Style — Chladni (crisp sand-settling), Liquid (flowing, looser), or Laser (geometric line-art visualizer with 23+ patterns: Lissajous, Mandala variants, Saber Beams, Strobe, Searchlights, Reflected EQ Bars, Kaleidoscope Bloom, and more). Auto Style randomly switches Style + Laser Pattern in time with detected beats, weighted by the music's mood. Plate Geometry and Particle Density only apply to Chladni/Liquid (the panel hides itself on Laser, since plate geometry doesn't affect line-art patterns). GPU Acceleration (particles) uses WebGL for smoother, higher-density Chladni/Liquid visuals — turn it off if a specific device shows lag or a blank stage.
- Center Avatar — upload an image, set opacity and size (S/M/L or a custom pixel size), toggle Static to disable its pulse/bob animation, and reposition it via the Quick Position grid or by dragging it directly on the stage.
- Palette — Manual (pick nodal/background/glow colors or presets), Gradient (a live color sweep across particles/strokes), or Mood-Reactive (colors auto-crossfade based on the music's energy and brightness). Mirror H/V mirror the canvas for perfect symmetry.
- Background — Solid, Pattern, an uploaded Image, an uploaded Video (with loop or freeze-last-frame), a Live Camera feed (needs an HTTPS or localhost connection), a YouTube embed, or a Media Slider that cycles up to 20 photos/videos from a chosen folder with autoplay, prev/next, pause, and loop controls. Fit (Cover/Contain/Stretch/Tile) and Opacity apply to all non-solid types.
- Projects — one project = one song's full settings snapshot. New/Save/Load/Update/Delete, plus Export/Import as a real
projects.json file for backup or moving between machines.
- Playlists — named, reusable track collections. Unlike the quick File-tab queue, saved playlists store the actual audio in this browser's local database (IndexedDB), so they come back with playable tracks in a later session. Add/remove tracks, rename, and delete anytime.
- Export / Mastering — Video/Audio Quality presets, Frame → PNG/SVG for stills, Record for manual video capture, and Record Full Track to automatically record the active File-source track start-to-finish.
Mission & Mood Tools
- Divine Resonance (badge, top-center) — lights up when the dominant detected frequency holds near 432Hz or 528Hz with the music actually playing, and Divine Glow is enabled.
- Insight Box (top-right, appears automatically) — a small dismissible tooltip that reads the track's key, tempo, and sustained energy and gives a gentle read on whether it aligns with Good Vibes, Always — positive for bright/major-key tracks, a soft check-in nudge for sustained intense minor-key tracks. Never blocks playback; fades on its own or dismiss it with the ×.
- ✦ Evaluate Vibe (topbar pill) — an on-demand wizard that listens for ~12 seconds and produces a fuller mood report: a mood quadrant (Uplifting & Energetic / Calm & Peaceful / Intense & Dark / Melancholic & Mellow / Balanced), a plain-language summary, and key/tempo/intensity/brightness stats — all computed locally, nothing sent anywhere.
Keyboard Shortcuts
- Esc — exit Stage Mode.
- Ctrl/Cmd + S — capture a PNG frame.
- Space — play/pause (when File source is active and no input field is focused).
Tips, FAQ & Troubleshooting
Mic / audio capture isn't working
Browsers only allow microphone access in a "secure context" — https:// or http://localhost. Opening this file directly (file://) or over a plain LAN IP disables it. Serve the folder locally (e.g. npx serve .) and open the printed localhost URL.
My saved Project/Playlist disappeared after closing the tab
Some sandboxed preview environments block localStorage/IndexedDB entirely, which falls back to in-memory-only storage for that session. Open the app in a normal browser tab for persistent saving, and use Export JSON on Projects as a durable backup either way.
YouTube/Spotify embeds don't react to the visuals
Browser DRM/CORS rules block raw audio extraction from those embeds. The embed plays for visual reference, but for reactive visuals, route its sound through Live Mic using your OS's screen/tab audio sharing.
Best browser?
Chrome or Edge (desktop) give the most complete experience — full IndexedDB support for Playlists, MediaRecorder for video export, and the Web Speech API for the experimental Live Speech captions.
Chord/Key/BPM readings look off
These are real signal-processing heuristics, not a lyrics-database lookup — accuracy depends on the source material. Clean, tonal mixes (vocals, synths, guitar/piano) read best; dense, heavily percussive or distorted mixes will be noisier.
Credits
DJ Jenco — Live Cymatics Visualizer
Created for Jennifer Codilan Torres (DJ Jenco) — Filipina DJ, Multimedia Producer & Techpreneur — in service of her advocacy for inspirational, motivational, and positivity-driven EDM for work, sports, and workouts.
Built with raw HTML5, CSS3, and JavaScript — no frameworks, no external libraries. Every visual is computed live from real cymatics, FFT, and music-theory math running in your browser.
