npm install @caustics/sonogram <script> import { Sonogram } from '@caustics/sonogram'; </script> <Sonogram preset="reactive" />
npm install @caustics/sonogram import { Sonogram } from '@caustics/sonogram/react'; return <Sonogram preset="reactive" />;
npm install @caustics/sonogram import { mount } from '@caustics/sonogram'; mount(document.querySelector('#hero'), { preset: 'reactive' });
| 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. |
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().
Caustics Commercial License · lifetime updates within v1