WebGL2 Visual Instrument

Synaptic
Mirror

A real-time audiovisual engine that turns sound, touch, camera and MIDI into living visuals. 10 GPU shaders. 72KB. 60fps. One HTML file.

Launch App → ↓ Explore the guide ☕ Support
10
GPU Shaders
72KB
Single File
60fps
Real-Time
6
Input Sources
Quick Start

Up and running in 30 seconds

Synaptic Mirror is a live audiovisual instrument. It generates real-time visuals via GPU shaders, reactive to sound, touch, camera, MIDI controllers, and gyroscope. Everything fits in a single ~100KB HTML file, runs at 60fps on a tablet, and works as an installable PWA.

1
🌐
Open the app
Navigate to nh.thomasmaury.fr on your tablet or desktop browser.
2
🎤
Enable audio
Tap MIC — visuals now react to your music in real-time.
3
✋
Touch & drag
Touch the canvas — each point injects force and color into the fluid simulation.
4
🎨
Switch modes
2-finger swipe to switch between 8 GPU effects with smooth crossfade. Tap the drawer handle for advanced controls.
5
📷
Activate camera
Toggle CAM — your face becomes the source material for the visuals.
6
🖥
Go fullscreen
Press F or use the drawer — fullscreen mode with wake lock for live performance.
7
📸
Capture & share
Tap the 📷 button to screenshot. Long-press to record a video clip (up to 30s). Files download automatically.
Performance tip

Best live workflow: MIC ON + music playing + switch modes by feel. Bass frequencies inject turbulence into the fluid, mids modulate parameters. Play with Force and Flow sliders to control the energy.

Interface

Progressive Disclosure

The interface reveals itself gradually. Start zen, end in full control. Four tiers from zero UI to complete performance dashboard.

Tier 0 · ZenZero UI. Pure canvas.
Tier 1 · DiscoverHUD + floating pill.
Tier 2 · ExploreBottom drawer + sliders.
Tier 3 · PerformFull controls.
Navigation

Touch: tap → tier 1, double-tap → toggle drawer, 2-finger swipe H → change mode, long press → zen mode, tap handle → tier 2↔3, 3 fingers → beat. Keyboard: Tab cycles tiers, H toggles HUD, 1-8 modes, Space beat, C/M/R/F/G/P/L shortcuts.

8 GPU Effects

Every pixel, every frame, on the GPU

Eight distinct visual modes — each a real-time GLSL shader running at 60fps. Hover the previews to see them in action.

Recommended combos

Fluid + Cam + Mic = reactive visuals. Feedback + Cam = psychedelic trip. Kaleid + Cam + Mic = living mandala. Edge + Cam = neon cyberpunk. R-Diff + Touch = organic growth.

Input Sources

Six ways to feed the mirror

Parameters

Five sliders, infinite expression

Each parameter modulates the active effect differently. Try them here — the preview responds in real-time.

⚡
Force
0 → 1 · DEFAULT 0.5
Controls injection intensity. How hard you hit the simulation.
Per mode
Fluid: splat radius + velocity. R-Diff: seed patch size. Displace: warp amplitude. Chromatic: RGB spread. Feedback: zoom intensity. Kaleid: rotation speed. Edge: glow strength.
🌊
Flow
0 → 1 · DEFAULT 0.5
Animation speed. How fast the visuals evolve and breathe.
Per mode
Fluid: advection speed + curl frequency. R-Diff: steps/frame (8–20). Fractal: C-constant drift. All: higher = chaotic, lower = meditative.
💨
Trail
0 → 1 · DEFAULT 0.7
Universal persistence (v4.5). Blends each frame with the previous across ALL 8 modes.
Per mode
0–0.3: sharp, responsive, no trails. 0.4–0.7: smooth motion blur. 0.8–1.0: ghostly persistence. Feedback: this IS the mode’s soul — Trail=1 = infinite loop.
🎨
Color
0 → 1 (=0°→360°) · DEFAULT 0
Hue rotation. Shifts the entire color palette around the wheel.
Per mode
GEN: tints the procedural flow field. CAM: hue-shifts camera feed. Fractal: changes escape coloring. Edge: tints neon lines. 0.5 = complementary shift.
🎵
Audio
0 → 1 · DEFAULT 0.8
Audio reactivity mix. How much the microphone drives the visuals.
Per mode
5 bands: SUB(<80Hz) → splats, LOW(80–300) → force, MID(300–2k) → flow, HI(2–8k) → shimmer, PRESENCE(8k+) → beat detection. 0 = fully manual. 1 = maximum reactivity.
↔ Interactions

Force × Audio: high values on both = bass-triggered explosions. Reduce Force to tame chaos. Trail × Flow: high trail + low flow = frozen moments. Low trail + high flow = twitchy, responsive. Color × Mode: same hue shift produces wildly different results across effects.

Controls

Every input method covered

Keyboard
Touch
MIDI
KeyAction
GestureAction
InputDefaultAction
MIDI Learn

1. Button ♪ (or L) → Learn mode active (gold border). 2. Long-press a slider → target (gold pulse). 3. Move a knob → CC mapped. Mappings don't persist between sessions.

MIDI Pre-Show Workflow

1. Connect USB controller → open app. 2. Drawer → ♪ button (or L). 3. Gold border = Learn mode. 4. Long-press each slider → gold pulse → move matching knob. 5. Repeat for all 5 sliders. 6. Optional: map notes 36–43 for mode switching. 7. ♪ again to exit. 8. Test with your set. Mappings reset on reload — re-map each session.

MIDI Pro Tips

Map CC1 to Force on your most accessible knob — it’s the most expressive parameter. Keep one fader unmapped as a “safety” to reduce chaos. Use MIDI notes for mode switches during drops — faster than 2-finger swipe. Tab cycles tiers while your hands stay on the controller.

Mental models

Thinking in metaphors makes the instrument intuitive faster than memorizing controls.

🧬
The canvas is alive
Touch = direct contact, like painting on water. Audio = the weather — the environment that shapes the creature. Camera = a mirror — it reflects you back. MIDI = surgical control — adjusting DNA parameters. Gyro = gravity — tilting the world itself.
🔬
Tiers = a microscope
Tier 0 = naked eye, just the specimen. Tier 1 = low magnification, some context. Tier 2 = working magnification, tools visible. Tier 3 = full lab bench, everything exposed. Zoom in when you need control, zoom out when you want to watch.
✋
Fingers = intent
1 finger = personal, direct (draw, interact). 2 fingers = navigate (swipe between modes). 3 fingers = rhythm (beat tap). Long press = toggle state (zen). Double tap = toggle interface. The number of fingers signals your intention.
⚠️
Limits to know
10 touch points max (hardware). MIDI mappings don’t persist (re-map each session). Gyro = Fluid mode only for now. iOS Safari may require manual camera permission. Cam switch (V key) cycles front/rear on mobile.
Scenarios

Four ways to use the Mirror

Whether you're performing live, exploring alone, or preparing a set — here's how to get the most out of each context.

01 · LIVE PERFORMANCE
On stage with music
MIC ON + fullscreen + rear camera pointed at the audience or yourself. Start in Fluid, switch modes by feel with 2-finger swipe. Use Force & Flow sliders to ride the energy of the track. Bass drives the visuals, you drive the story.
02 · CREATIVE EXPLORATION
Alone in the studio
Tier 3 open, all sliders visible. Try each mode with CAM + touch combined. R-Diff with your silhouette shaping patterns. Fractal with recursive self-portraits. Push sliders to extremes — the best visuals come from unexpected parameter combos.
03 · SET PREPARATION
Before the show
Cycle through all 8 modes with your setlist playing. Note which modes match each track's energy. Map your MIDI controller (CC1-5 to sliders). Practice 2-finger swipes until mode switching is muscle memory. Test camera position and lighting.
04 · AMBIENT INSTALLATION
Unattended display
Fullscreen + MIC ON + GEN source. The procedural flow field reacts to ambient sound. Feedback or Kaleid modes create mesmerizing loops. Set Trail to 80%+ for persistent trails. The visuals evolve endlessly without intervention.
Post-Processing

The finishing chain

Every frame passes through a cinematic pipeline before reaching your screen.

Architecture

Under the hood

Glossary

Terms & concepts

Advection
Transporting quantities (dye, velocity) through the fluid velocity field. The core of realistic fluid motion.
Bloom
Post-processing glow effect. Bright areas are extracted, blurred, then composited back for a cinematic glow.
Crossfade
0.5-second blend between two effect modes using snapshot Frame Buffer Objects. Smooth visual transition.
Dye
Color information carried by the fluid simulation. Injected by touch, camera, or the procedural GEN source.
FBO
Frame Buffer Object — an off-screen GPU texture used for multi-pass rendering. The engine uses ~12 FBOs.
Feed / Kill
Gray-Scott reaction-diffusion parameters. Feed adds chemical, kill removes it. Their ratio creates dots, stripes, or mazes.
GLSL
OpenGL Shading Language. The C-like language used to write GPU shaders. All 10 effects are GLSL programs.
Julia set
A fractal defined by iterating z² + c in the complex plane. The constant c is driven by audio in Fractal mode.
MIDI Learn
A mode where the app listens for incoming MIDI CC messages and maps them to UI sliders. Activated via ♪ button or L key.
Navier-Stokes
The physics equations governing fluid motion. Synaptic Mirror solves a simplified 2D incompressible version on the GPU.
PWA
Progressive Web App. Installable on your home screen, works offline via Service Worker, no app store needed.
Splat
An injection of force + dye at a specific point in the fluid simulation. Created by touch, audio beats, or MIDI input.
Vorticity
A measure of local rotation in the fluid. The vorticity confinement step amplifies swirling, organic-looking patterns.
Wake lock
Prevents the screen from sleeping during fullscreen performance mode. Essential for live shows and installations.