Graphics@knitui/graphics
AudioMesh
A flowing gradient-MESH audio visualizer: a full-bleed Skia RuntimeEffect (SkSL) whose soft colour blobs swell with the spectrum and drift on a slow orbit (so the field stays alive even at silence). It shares the data head with AudioVisualizer — push TARGET states via the ref handle (ref.push(levels)) or a target SharedValue and the easing transition lives inside, paced on the display clock. Each control point tracks one band of the spectrum (low bands → one blob, highs → another) and its colour is spread across the colors palette. Identical on native and web (web needs <GraphicsProvider> + CanvasKit). Reduced motion freezes the idle drift but keeps the audio pulse. The stories below drive it with a synthetic ticker.
import { AudioMesh } from "@knitui/graphics";Playground
Loading playground…
<AudioMesh
pattern="sine"
/>Examples
Default
The default mesh: a cyan→indigo→pink field flowing to a travelling sine.
Loading example…
Beat
A kick beat — watch the low-band blob bloom on every hit.
Loading example…
Calm
A warmer palette with more, softer points — a slow lava-lamp drift.
Loading example…
Custom Palette
A custom two-stop palette over a dark background.
Loading example…
Fft Driven
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
attack | number | undefined | — | Rise smoothing `0..1` override — lower = snappier. Defaults to `smoothing`. |
backgroundColor | string | undefined | — | Canvas background (shows through where the field is dark/translucent). |
colors | string[] | undefined | — | Palette spread across the control points — an array of hex colours (`#rgb`/`#rrggbb`). Interpolated so each blob gets a distinct colour even when the palette is short. Default cyan→indigo→pink. |
count | number | undefined | — | Number of spectrum bands tracked. Default 48. |
fftScale | SpectrumInput | undefined | — | How `input="fft"` magnitudes are scaled. Default `"byte"`. |
height | number | undefined | — | Canvas height in px. Default 160. |
input | "levels" | "fft" | undefined | — | What pushed data carries: final `"levels"` (default) or raw `"fft"` magnitudes. |
label | string | undefined | — | Accessible label. |
levels | number[] | undefined | — | Declarative fallback: pushed whenever the value changes (re-renders per tick). |
maxBin | number | undefined | — | `input="fft"`: last magnitude bin to include. Default = pushed length. |
maxDb | number | undefined | — | `input="fft"`: dB mapped to `1` (ceiling). Default `-10`. |
minBin | number | undefined | — | `input="fft"`: first magnitude bin to include (skip DC). Default `1`. |
minDb | number | undefined | — | `input="fft"`: dB mapped to `0` (floor). Default `-90`. |
opacity | number | undefined | — | Overall opacity `0..1`. Default 1. |
points | number | undefined | — | Colour control points (blobs), `1..6`. Default 5. |
release | number | undefined | — | Fall smoothing `0..1` override — higher = a slower tail. Defaults to `smoothing`. |
responseTime | number | undefined | — | Rise time constant (ms) override; makes a sparse/low-rate FFT feed smooth at 60fps. |
smoothing | number | undefined | — | Attack/release smoothing, `0..1`. `0` snaps to each target; higher values let the field glide and decay. Default 0.3. Forced to 0 under reduced motion. |
softness | number | undefined | — | Base blob radius in normalized canvas units before audio swell. Default 0.45. |
speed | number | undefined | — | Idle-drift rate multiplier. `0` freezes the orbit (blobs still pulse). Default 1. |
target | SharedValue<number[]> | undefined | — | Optional external target SharedValue (continuous loop while mounted). |
width | number | undefined | — | Fixed width in px. Omit for a responsive `width: "100%"` canvas. |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<AudioVisualizerHandle> | undefined |