Audio Sources

Load Audio — open any audio file (MP3, WAV, FLAC, etc.). The waveform appears in the timeline. Click Play to start.

Mic — capture live audio from your microphone. Click again to stop (toggle).

System — capture audio from another tab or app (Spotify, YouTube, etc.). A browser share dialog appears — select the tab with your audio and ensure "Share audio" is checked. Click again to stop (toggle).

Stop — appears when any source is active. Stops playback and returns to idle.

Timeline — click to seek, drag to select a range, use crop handles to loop a section.

Layers

Everything is a layer. Each layer has its own layout, style, colors, effects, particles, and playback mode — fully independent. Click a layer name to select it. Use + Add Layer to stack visualizations. Each layer has an opacity slider and remove button (✕).

Appearance

The Appearance panel holds the choices that define the look: Layout (arrangement), Style (how each line is rendered), and Outline. Layout buttons are amber, Style buttons are violet.

Layouts (19), grouped: General — Linear, Sine, Ridge, Circle, Concentric, Spiral, Phyllotaxis, Kaleidoscope, Scatter, Fractal. 3D — Terrain, Sphere, Tetrahedron, DNA, Object. Input — Image, Video, Text, Math.

🎲 — randomizes both layout and style.

Geometry & Motion

Core line and framing parameters, separated from the look pickers. Density / Contrast / Sensitivity / Height / Thickness — core line parameters. Vary Height / Vary Thick — organic variation. Scale / Offset / Rotation / Fade Edges — framing. Flip / Mirror / Symmetry / Sym Gap — reflection and radial symmetry. Spin / Speed — continuous rotation and animation rate. 🎲 randomizes these settings.

3D Layouts

Terrain — a 3D perspective grid where audio lifts the terrain surface. Controls: Grid density, Perspective, Camera angle, Elevation, Noise, Bend, Twist.

Sphere — audio displaces the surface of a rotating sphere. The sphere breathes with energy; back hemisphere shows as a faint ghost. Controls: Grid, Perspective, Tilt, Elevation, Noise, Rotate speed.

Tetrahedron — subdivided tetrahedron with audio-displaced vertices. Line width and opacity pulse with audio energy. Controls: Detail, Perspective, Tilt, Elevation, Noise, Rotate speed.

DNA — double helix with audio-reactive rungs and displacement.

Object — load a custom .OBJ 3D model and drive it with audio.

All 3D layouts support mouse drag to orbit and the 3D Tilt / Rotate sliders.

Ridge Layout

A Joy Division "Unknown Pleasures"-style stacked ridge plot. Each horizontal line represents one frequency band — bass at the bottom, treble at the top. The waveform shape of each line is drawn from the spectrum content within that band spread left to right, so each row shows the real harmonic texture of its frequency range. Each row fills with the background color below its line, causing rows to occlude each other for the classic layered mountain look.

Controls — Rows (number of bands), Amplitude, Smoothing, Fill on/off.

Fractal Layout

A recursive branching tree, driven entirely by audio. The trunk grows from the bottom (or from center in all 4 directions). Bass widens the branch spread angle, mids control branch length decay, treble adds left/right asymmetry, and overall energy scales the tree size. The color ramp spreads from the root (ramp start) to the leaves (ramp end). Line weight and opacity fade with branch depth. Works with line styles and outlines.

Controls — Depth (recursion levels), Angle (base spread), Decay (branch length ratio), Branches (2 or 3 per split), Root (Bottom / Center). Mouse drag tilts the tree.

Image & Video Layouts

Image — upload any image as a brightness map. Lines appear where the image is bright. Controls: Direction, Threshold, Resolution, Invert.

Video — load a video file or enable the camera for a live feed. The video becomes a moving brightness map that updates every frame. Controls: Source (File/Camera), Style (Grid/Edge), Direction, Threshold, Resolution, Playback speed, Invert.

Edge style — draws contour lines along brightness boundaries in the image/video. Creates an outline/wireframe effect. Line styles (Dotted, Braille, etc.) apply to edge lines when selected.

When Webcam Colors are On (in the Webcam panel), edge lines use the actual RGB colors from the video source.

Styles (19 + Off)

Chosen from the Style row in the Appearance panel (violet buttons): Off, Straight, Rounded, Dotted, Dashed, Pins, Tapered, Caps, Cross, Numbers, Symbols, Words, Cascade, Feather, Circles, Braille, Arrows, Slash, Needles, Diamonds. Each renders lines differently. Off draws no base shape — combine it with an Outline to show only the outline.

Style settings — like layouts, each style exposes a few relevant controls right under the Style row (only the ones that apply to the selected style appear):

Size — scales the marker or glyph (rings, diamonds, numbers, symbols, words, arrows, etc.). Density — repetition count / spacing for repeating styles (dots, dashes, braille rows, rings, cascade tiers, feather barbs). Angle — rotation for glyphs, slashes, and feather barbs.

Outline Styles (5)

Now in the Appearance panel under Style. Solid, Dotted, Dashed, Connected, Fill. Outlines draw around each line; Connected draws network-graph lines between random endpoints; Fill fills the area/ring the lines span with a gradient (works for both linear and radial layouts). Pair any outline with Style → Off to render the outline alone.

Color

Solid — one color. Tone Ramp — multi-stop gradient mapped to loudness (quiet→loud). Simple Ramp — gradient mapped to position. Each stop has an opacity slider for alpha control. 14 tone ramp + 14 simple ramp presets. 🎲 randomizes the palette.

Effects

Playback — Off / Continuous / Equalizer (per-layer). Off hides base lines for particles-only mode.

Spin — continuous rotation. Speed / Amplify — animation and audio response scaling.

Deformers — Twist, Bulge, Wave (+ Wave spd), Shear, Depth, Ripple (concentric waves from centre), Jitter (animated positional noise). All audio-reactive. Wave spd also sets the Ripple frequency.

Symmetry — Off, X, Y, XY, 3/4/6/8-fold radial. Flip — H/V per-layer.

🎲 randomizes all effects settings.

Post FX (GPU Shader Effects)

Toggle On to enable real-time GPU post-processing over the entire visualization. All effects run in WebGL fragment shaders with near-zero performance cost.

Bloom — bright lines and particles get a soft glow halo. Uses brightness thresholding so dark areas stay clean.

Chromatic Aberration — RGB channel separation, radial from center. Creates a camera lens / analog video look.

Vignette — darkens edges, draws focus to center.

Grain — animated film grain noise.

Scanlines — CRT-style horizontal lines with subtle horizontal drift.

Pixelate — mosaic / pixel art effect.

Sharpen — unsharp mask, enhances thin lines and fine detail.

Invert — smoothly blend between normal and inverted colors.

Reactive Rules

Map audio features to visual parameters for automatic audio-reactive behavior. Click + Add Rule to create a mapping.

Audio sources — Bass (20-250Hz), Mid (250Hz-2kHz), Treble (2k-16kHz), Energy (full spectrum), Beat (transient spikes).

Targets — Height, Thickness, Zoom, Contrast, Twist, Bulge, Wave, Ripple, Shear, Depth, Fade Edges, Outline Glow, Hue Shift. Chosen to breathe with the music while keeping the composition harmonious.

The strength slider controls how much the audio feature modulates the target. Multiple rules can stack. Remove a rule or set strength to 0 to disable — the parameter returns to its base value.

Particles

Toggle On to overlay audio-reactive particles. They spawn from layout positions and react to audio energy.

11 shapes — Circle, Square, Star, Diamond, Ring, Triangle, Spark, Line, Numbers, Symbols, Words.

Controls — Density, Energy, Speed, Life, Size, Spread, Gravity, Damping, Trail (0-60 frames).

Noise mixer — 4 combinable noise types: Perlin (smooth flow), Curl (swirling), Brownian (chaotic jitter), Vortex (orbital). Each 0-100% with shared Scale and Speed controls.

Particles inherit Spin, Symmetry, and Flip from the layer. Set Playback to Off for particles-only mode. 🎲 randomizes all particle settings.

Presets

Built-in presets (★) — 15+ presets covering various styles. Loading applies to the active layer only.

Save — saves the active layer. Save All — saves all layers, background, and full state (marked with ◈). Load — loads a saved preset. Clear — removes all user presets.

Export preset — open browser console, run copy(JSON.stringify(getState())) to copy the full state as JSON.

✨ Surprise Me — composes a fresh, coherent random scene (a tasteful layout + harmonious analogous palette + matching style + subtle motion). Great starting point.

🔗 Copy Link — copies a URL that encodes the entire current look. Anyone who opens that link sees exactly your composition (they just load their own audio).

Preset Morph

Blends through a playlist of presets. Use + Add preset… to build the list (or All for every preset, Clear to empty it); each entry shows as a removable chip.

Play cycles the playlist in order, each transition taking the chosen Duration (10–60s), looping seamlessly. Random jumps between random presets (your list, or all of them if the list is empty). On Beat advances to the next preset on detected beats instead of the timer. Ping-pong bounces back and forth. Drag Morph to scrub the whole sequence by hand.

It blends every layer of both presets: matching layers (same position and layout type) interpolate their parameters and colors for a true geometric morph; layers that differ in type or only exist in one preset crossfade by opacity — so a 2-layer preset morphs cleanly into a 5-layer one. The background stays black during a morph. Apply bakes the current blend into normal editable layers.

Webcam

Start the camera to capture video. Colors On — line colors are sampled from the camera feed. Displace — brightness displaces line positions. Smoothing — temporal smoothing for the displacement.

Export

PNG — current frame with or without background. SVG — vector export. Record — capture video as MP4/WebM with audio.

Keyboard Shortcuts

⌘/Ctrl + Z Undo   ⌘/Ctrl + F Fullscreen   Space Play/Pause   Esc Exit fullscreen / close help

Tips

Stack multiple layers with different layouts for rich compositions. Use the 🎲 buttons to randomize individual panels without disrupting others. Try Reactive rules for hands-free audio-reactive behavior (Bass → Twist, Beat → Bulge). Enable Post FX for cinematic polish — Bloom + Vignette + slight Grain transforms the look. For the Video layout with camera, try Edge style with Braille or Dotted styles. For projection, use Fullscreen (⌘F) with a dark background.