How to record a 30-second video with SWR.

Start the dev server

Open a terminal and start the Vite dev server on port 5174. It serves the engine, the 5 versions, and the library.

# from the project root
$ cd /Users/kajicadjuric/Documents/autodashboard/products/sainted-word-records
$ nohup ./node_modules/.bin/vite --port 5174 --host 0.0.0.0 > /tmp/swr.log 2>&1 &
✓ Vite ready · http://localhost:5174/

Open the page in a browser

Chrome 126+ or Safari 14.5+ for native MP4 export. Width ≥ 1080px so the 3-column layout doesn't squeeze.

# URL
→ http://localhost:5174/

Load a song

Click LOAD SONG in the top bar. Pick any audio file — .mp3, .wav, .m4a, .flac. The engine unlocks the Web Audio context the moment you pick a file (browsers require a user gesture).

The 27-item library (12 videos + 15 images) auto-loads from the library/ folder in the background. You don't need to do anything for it.

Wait for the status pill to say READY

The pill in the top bar goes from IDLE (gray) to READY (green) once the engine has analyzed your library. Each video gets a motion score by sampling frames over a few seconds. If you've never used the engine before, this takes 5–10 seconds.

Hit ▶ PLAY

Audio starts, the meter in the top bar jumps, the canvas begins rendering. The engine reads the FFT 60 times per second, extracts 5 bands (sub / bass / mid / treble / air), and pushes them to the layer reactors. Each clip in the canvas scales, shifts hue, slides position — all driven by the spectrum.

Pick a duration from the dropdown

Next to the REC button. Default is 30s — what this how-to is for. Other options:

Hit ● REC

The button turns red and reads ■ STOP. The status pill in the top bar shows recording · MP4 · 30s and counts down. The engine captures the canvas at 30 fps and the audio at 48 kHz, muxes them into one MP4 stream, and streams it to a Blob.

Wait for auto-stop

At 30s, the engine fires its setTimeout, calls recorder.stop(), and the status flips to exported. The countdown in the status pill is your clock — when it hits 0s you're done.

// the auto-stop, line by line
this.autoStopAt = durMs > 0 ? Date.now() + durMs : 0;
// ... MediaRecorder.start(500) ...
this.autoStopTimer = setTimeout(() => {
  if (this.recording) this.stop();
}, this.autoStopAt - Date.now());

You can also click ■ STOP early to record less than 30s.

Grab the MP4 from your downloads

The browser auto-clicks an invisible <a download> element with a Blob URL. The file lands in your default downloads folder as sainted-word-{timestamp}.mp4. ~4 MB for a 30s recording at 8 Mbps.

// the save, line by line
_save() {
  const blob = new Blob(this.chunks, { type: this.mime });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = `sainted-word-${ts}.${ext}`; // .mp4 or .webm
  a.click();
}

Done. Open the MP4 in any editor.

Real H.264 + AAC, 48 kHz stereo, 30 fps. Plays in QuickTime, Premiere, DaVinci, Final Cut, VLC. Uploads to YouTube, TikTok, X, Instagram. The codec string is avc1.42E01E + mp4a.40.2 — universal compatibility.