Sainted Word Records — Audio-reactive video engine

Pick your path

Three kinds of creators. One engine.

Drop in whatever you have. The engine picks the right tools for what you're making.

♪

I'm a musician

Drop a track. Get a music video. Pure-audio visualizers, neon engines, beat-synced cuts. No footage required.

Spectrum →

◼

I'm a designer

Drop your brand kit, type, and audio. Get motion graphics and animated typography that breathes with the beat.

Typography →

✦

I'm a mixed-media creator

Drop video + audio + type. Get layered compositions with magazine-grid layouts and beat-synced cuts.

Collage →

The engine

A music visualizer with a composer's taste.

Most visualizers just react to the spectrum. The Sainted Word engine classifies every asset you give it — motion, brightness, hue — and routes each one to the band of the song that suits it. The composition is algorithmic. The score is the audio.

Adaptive beat detection

Bass-energy tracker with an adaptive threshold. Locks the BPM, fires an envelope on every kick, decays gracefully. Works on techno, jazz, and an ill-advised spoken-word record.

Layered composition

Six layers, each with its own blend mode and a stack of reactors. Scale to bass. Hue to mids. Position to the spectrum's edge. Every parameter is a feature binding, not a keyframe.

Library as palette

Drop a folder of videos, GIFs, or images. Each one is auto-classified by motion, luma, and mean hue, then routed to the role that suits it. Different song, different look — same library.

MP4 export, native

The canvas is captured via MediaRecorder at 30 fps with H.264 + AAC, 8 Mbps. No ffmpeg.wasm, no server, no transcode. The file you download plays in any editor.

Fresh look every remap

The auto-mapper picks from the top candidates weighted by score, and shuffles the blend order. Each RE-MAP click yields a new composition. Hit it until something sticks, then record.

Single-file, zero install

The whole engine is one HTML file. Drop it in a folder, open it in Chrome or Safari, it runs. No node_modules needed for the user. The Vite project is just for development.

5 visual languages

Same engine. Five completely different looks.

Five single-file variants of the same engine, each with a distinct aesthetic. Click one to open it in a new tab. Same controls, same library, same MP4 export.

01 · NEON

Neon

Electric magenta / cyan

Hot club, screen-blend stacks, sharpened easings, scanlines. Cuts on the beat, not after it.

screen blend 3 reactors sharp

02 · FILM

Film

Sepia / 16mm grain

Handheld warm tone, per-pixel grain, soft vignette, slow drift. Smooth easings throughout.

sepia grain smooth

03 · GRID

Grid

Monochrome / hard cells

2×2 + half-cell composition, snap to the beat. Binary easings — no in-between, only on or off.

grayscale hard cells snap-beat

04 · SMOKE

Smoke

Cream warm / heavy blur

Everything at 0.5 opacity, slow drift, blurry and slow. The song moves through fog.

cream heavy blur 0.5 opacity

05 · HALLUCINATION

Hallucination

RGB shift / scanline body

Every reactor maxed. RGB channel shift, lighter and difference blends, noise canvas overlay.

rgb shift difference noise

ALL FIVE →

See them all

Directory · side by side

All five versions on a single page with thumbnails, descriptions, and direct links.

5 versions side by side

Made for these people

Who actually uses this.

The engine and its 5 versions were built for people who have audio and a release date, and zero budget for a video editor. The profiles below are the ones who reach for it first.

Best fit

♪

Indie musician

Releasing a single with no video budget. Loads the mastered WAV, picks a style, gets a 30s MP4 for the post.

→ versions/neon.html

▰

Beatmaker

Selling beats on BeatStars / Airbit. Renders a 15s preview per track so the listing beats a static waveform.

→ versions/grid.html

◐

DJ

Promoting a mix or a set. 60s vertical teaser with BPM burned in frame 1, cuts on the downbeat, ready for Reels.

→ versions/smoke.html

✦

Small label

3–10 artists a year, one brand voice. Uses the same version across the roster so every release reads as the label.

→ versions/film.html

Best fit

◎

Belgrade / Serbian artist

Local pricing (€25 vs €40+ in the EU), in-person demo at KC Grad, Drugstore, or Dot. Same engine, different margin.

→ campaign.html

≋

Podcaster

One long episode, ten short clips. Renders each pull-quote moment as a 15s visual to drive follows from the audio feed.

→ versions/film.html

⌗

Sound designer

Sample pack creator showcasing the patches. The visualizer becomes the cover art — engine output doubles as marketing.

→ versions/hallucination.html

◇

Music manager / agency

Visual content for the whole roster. One tool, one workflow, ten artists' worth of social posts per month.

→ profit-plan.html

Quick start

Three commands, then open the URL.

Or skip the install entirely — the engine is a single HTML file and runs from a static server.

Run it locally

The dev server uses Vite for hot reload during development. The production build outputs to dist/ with the engine, the 5 versions, and the library.

Requires Node 18+
No API keys, no external services
The 12 videos in library/ are 75 MB total

~/sainted-word-records — zsh

# clone and install $ git clone git@github.com:kai-djuric/sainted-word-records.git $ cd sainted-word-records $ npm install # dev server (port 5174) $ npm run dev # production build → dist/ $ npm run build

Stack

Built on the web platform.

No native dependencies, no build step required to use the engine. Just a browser and your library.

Web Audio API · FFT Canvas 2D MediaRecorder · H.264 + AAC Web Components Vite Fraunces + Geist + Geist Mono ES2022 modules Zero backend MIT license