sonogram · audio → visual
@caustics/sonogram · v1.0.0
svelte · react · vanilla
60fps · 10KB gzipped
$69 →
component · 003
Sonogram
Turn sound into motion — musically-correct DSP that drives any Caustics engine.
Checkout coming soon Open the playground → The Everything Bundle →
Quick Start

That's it. Your site now has sonogram.

npm install @caustics/sonogram

<script>
  import { Sonogram } from '@caustics/sonogram';
</script>

<Sonogram preset="reactive" />
Configuration API

Sensible defaults. Documented types.

Prop Type Default Description
preset string "reactive" Named preset. Overrides individual props when set.
colors string[] undefined Override palette. Accepts hex, hsl, or CSS custom properties.
reducedMotion 'pause' | 'static' 'pause' Behavior when prefers-reduced-motion is active.
class string undefined Additional CSS classes applied to the root element.
What's Included

A zip. Everything else lives at caustics.dev.

caustics-sonogram/
├── svelte/     Sonogram.svelte · index.ts · types.ts
├── react/      Sonogram.tsx · index.ts · types.ts
├── vanilla/    sonogram.ts · compiled .js
├── docs/       README.md · API.md · CHANGELOG.md
├── LICENSE.md  Caustics Commercial License
└── package.json

Sonogram is the audio line’s flagship and the catalog’s multiplier: a sound source that drives your whole shelf. It analyses audio with musically-correct DSP and routes the result through a mapping graph that can set CSS custom properties, paint a built-in canvas visualizer, and — the headline — call update() on any other Caustics engine. Buy it once and your shader-gradient hero pulses to the bass, your flowfield swirls on the beat, your fluid-canvas reacts to the room. A SonogramAPI is an AudioSignalSource, so wiring it to another instrument is a single prop.

The DSP is honest, not a bar-meter dressed up. Bands are A-weighted on a log frequency layout (IEC 61672); envelope followers compute their attack/release coefficients from the real frame dt; onsets use spectral flux against an adaptive median threshold with a refractory gate, so you get one hit per drum, not a splat per frame — and onset strength is measured against a decaying flux peak, so a soft hit reads soft. Tempo is an onset-novelty autocorrelation with a confidence score; loudness is perceptual, not raw RMS. Every channel — bands, loudness, RMS, BPM, BPM confidence, beat phase, onset — is exposed in the domain you want to render in, bindable directly through the mapping graph.

It is built on the shared @caustics/audio-core contract, the one typed SignalFrame every audio-aware engine in the catalog produces and consumes — so the hook is frozen and future-proof, and flowfield’s field: 'audio' already speaks it. Audio is gesture-gated for the browser autoplay policy; mic, <audio>/<video> element, and MediaStream sources are all supported, with the AudioContext resume handled for you. Denied-mic and unsupported states are genuinely inert (no spinning loop). Full lifecycle, SSR-safe, idempotent destroy() that releases the AudioContext and tracks. Ships for Svelte 5, React 18+, and vanilla JS through one mount().

Ready to ship?

Checkout coming soon The Everything Bundle

Caustics Commercial License · lifetime updates within v1