Turn any projector into a live VJ setup. BeatDrop listens to the music in your room, analyzes beat, frequency and energy, then drives full-screen reactive visuals in real time. No cables, no DJ software, no setup — just music and light.
BeatDrop runs entirely in your browser. It uses the Web Audio API to capture audio from your microphone, then runs a real-time FFT (Fast Fourier Transform) to break the sound into four frequency bands — sub-bass, bass, mids, and highs. Each band drives different aspects of the visuals: bass hits trigger shape expansions, hi-hats create sparkle bursts, sustained synths generate flowing effects.
On top of the frequency analysis, a BPM detector auto-locks the visuals to the tempo of whatever is playing. Beat phase tracking means animations snap to the rhythm, not just react to volume. The result: visuals that feel like they were programmed for the specific track.
Captures room audio via your device microphone. Works with any audio source — speakers, Bluetooth, vinyl.
4096-point FFT splits audio into sub (<60Hz), bass (60–250Hz), mids (250Hz–4kHz), and highs (4–16kHz).
Auto-detects tempo from kick drum intervals (60–200 BPM range) with tap-tempo manual override.
Scene switcher, strobe hold, blackout, auto-advance, sensitivity dial — everything you need mid-set.
Six rave-themed palettes from acid green to UV purple. Switch on the fly or let auto-advance pick.
Full-screen 16:9 output. Mirror or extend your display to a projector for room-filling visuals.
You can be up and running in under a minute.
Navigate to the app in your browser, or open index.html locally. Chrome, Firefox, or Safari all work.
Click Start Listening. Your browser will ask for mic permission — allow it. BeatDrop disables echo cancellation, noise suppression, and auto gain to get a clean, unfiltered signal.
Start playing music through your speakers. BeatDrop picks it up through the mic and the visuals begin reacting immediately. The louder and cleaner the audio source, the better the response.
Press F or click the fullscreen button in the control bar. If you're outputting to a projector, extend your display and drag the browser window to the projector screen before going fullscreen.
Use the control bar at the bottom to switch scenes, adjust sensitivity, change palettes, and tune the advanced visual controls. Collapse the bar with the small handle when you want a clean projector view.
BeatDrop ships with nine visual scenes. Each reacts differently to the audio — some are driven primarily by bass, others by mids or highs. Switch between them with the scene buttons or keys 1–9.
Recursive neon geometry travels toward the camera over a reflective floor, with horizon glow, side beams, and a central light column. Bloom, depth, trails, and geometry all change the structure of the portal.
bass-driven reflective neonA glossy radial tunnel built from lit panels and streaks, tuned toward the blue, magenta, and orange fly-through visuals in the references. Bass drives the forward shove, mids bend the vanishing point, and highs light extra panels.
bass-driven fly-through depthA procedural cosmic landscape with planets, black-hole rings, nebula ribbons, stars, mountain silhouettes, and glowing ground ellipses. It is slower and more scenic than the tunnel modes, but still pulses on kicks.
ambient surreal spaceHigh-contrast geometric tiling that flips between hexes, octagons, triangles, and dots. It uses beat phase and high-frequency transients for hard black/white reversals.
beat-locked geometric high-contrastConcentric rings zoom outward from the center, creating an infinite tunnel effect. Bass accelerates the tunnel speed and thickens the rings. The Geometry control switches between circles, triangles, squares, and hexagons.
hypnotic shapeable depthA warped perspective grid with horizontal and vertical scan structures that jump on kick transients. It adds a fast, electric floor-map feel between the deeper portal and tunnel scenes.
all-band scanline warpMirrored wedge geometry with beat-synced segment changes and transient color washes. Use Prism or Mirror for a denser psychedelic look.
symmetry psychedelic beat-lockedHard black/white stripes, checkerboards, and ring cuts with palette overlays on bar boundaries. Designed for short peak-time bursts.
aggressive peak-time contrastRotating line fields combine through difference blending to create optical interference patterns. Bass shifts density and kicks jump the phase.
optical minimal phaseEnable Auto mode to have BeatDrop automatically switch scenes every 8 bars. The switch happens bar-locked — it waits for a bar boundary, then picks a random scene and palette. This keeps the room evolving without you touching anything.
The control bar lives at the bottom of the screen. Click the small handle to collapse or expand it during performance.
Nine buttons across the top of the control bar, one per scene. Click to switch immediately. The active scene is highlighted in cyan. You can also press keys 1 through 9.
Controls how aggressively the visuals react to audio. Range: 0.2 (barely reacting) to 4.0 (very reactive). Default is 1.0. If you're in a quiet room and the visuals aren't responding enough, push this up. If you're next to a speaker and everything is going haywire, pull it down.
Base animation speed independent of audio. Range: 0.2 (slow motion) to 3.0 (fast). This controls the underlying animation tempo — portals advance faster, tunnel panels fly quicker, and geometric patterns rotate more rapidly. Audio modulation is added on top.
Bloom increases glow radius and brightness. Depth adds more portal layers, tunnel rings, and scene complexity. Trails lowers the frame clear rate for longer motion persistence. Geometry forces portal and tunnel shapes to triangles, squares, hexagons, or circles. Mirror overlays a symmetrical copy of the frame. Prism adds chromatic offsets that respond to highs and kicks.
Click ⚡ Strobe to toggle a BPM-synced white/black strobe flash. Hold Space for a momentary strobe burst. The flash rate is 2× the detected BPM when a tempo is available.
Click ■ Blackout to toggle pure black. Hold B for a momentary blackout that also hides the controls and badges until released.
The BPM display shows the auto-detected tempo. If the auto-detection is wrong (it can struggle with complex rhythms), tap the TAP button (or press T) in time with the beat — 3+ taps locks in your manual BPM, shown with an asterisk (e.g., "128*"). The manual override persists until you reload.
BeatDrop requests mic access with all browser audio processing disabled:
echoCancellation: false noiseSuppression: false autoGainControl: false
This gives the rawest possible signal. Browser defaults for echo cancellation and noise suppression are designed for voice calls — they actively filter out music, especially bass frequencies. Disabling them is essential for proper audio reactivity.
A 4096-point FFT runs every frame (~60Hz), producing 2048 frequency bins. These are grouped into four bands:
SUB < 60 Hz Kick drums, sub-bass rumble BASS 60–250 Hz Bass lines, low toms MID 250–4000 Hz Vocals, synths, snares HI 4–16 kHz Hi-hats, cymbals, presence
Each band value is normalized (0.0–1.0+, after sensitivity scaling), then smoothed with a low-pass filter (factor k=0.15) to prevent jittery visuals. The raw signal is still used for transient detection (kicks).
Kicks are detected when the sub-bass band exceeds a threshold (0.6) AND the delta from the previous frame exceeds 0.08. Each kick timestamp is stored, and BPM is calculated by clustering the intervals between kicks and taking the median. The algorithm filters for the 60–200 BPM range and requires consistent intervals to lock on.
Once BPM is locked, a beat phase counter (0.0→1.0 per beat) runs continuously. This drives BPM-locked animation — patterns can snap to beat boundaries rather than just reacting to volume. A bar counter increments every 4 beats, used for auto-advance timing.
Eight palettes, each with three accent colors and a background tint. Visuals use the palette colors as accents over the black background. Switch palettes from the control bar or let auto-advance randomize them.
| Key | Action |
|---|---|
| 1 – 9 | Switch to scene 1–9 |
| F | Toggle fullscreen |
| R | Randomize scene and palette |
| Space (hold) | Momentary strobe flash |
| B (hold) | Momentary blackout |
| T | Tap tempo |
BeatDrop is a single HTML file with no build step and no external dependencies (aside from Google Fonts). You can deploy it anywhere that serves static files.
Create a repo with index.html (the app) and docs.html (this manual) at the root, or inside a public/ directory.
Cloudflare dashboard → Pages → Create → Connect to Git → pick your repo. Set build output directory to / (root) or public depending on your structure. No build command needed.
Every push to main triggers a new deployment. Changes go live in under 30 seconds.
Vercel, Netlify, GitHub Pages, or any static host. No config needed — just point it at the directory containing index.html.
For local testing, open index.html directly as a file:// URL. Mic access requires HTTPS in production, but most browsers allow it for localhost and file://.
Position your device's mic close to a speaker for the strongest signal. A laptop next to a speaker works perfectly. Bluetooth speakers have slight latency — wired is better for tight sync.
Start at 1.0 and adjust. Quiet room with a phone speaker? Push to 2.5–3.0. Standing next to a PA system? Drop to 0.5. The sweet spot is where visuals clearly react to beats without constantly maxing out.
Auto-detect works best with four-on-the-floor kicks (house, techno). For breakbeat, DnB, or irregular rhythms, use tap tempo instead — press T four times in rhythm.
Match scenes to energy. Cosmic for warm-up, Portal for driving sections, Chrome Tunnel for momentum, Kaleidoscope or Moire for psychedelic sections, Strobe Cut for the peak. Use Blackout for drops.
Set your projector to its highest contrast mode. Turn off any eco/lamp-saver modes — you want maximum brightness for the strobes to hit. A white wall works better than a screen for side-angle viewing.
Extend your display (not mirror). Put BeatDrop fullscreen on the projector. Open a second browser tab on your laptop for DJ controls — both tabs share the same mic input if you reload.