Beat Pulse Grid
Grid cells pulsing with the track. Install with npx remotion-ui@latest add beat-pulse-grid.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add beat-pulse-gridA grid of cells pulsing with the audio.
import { BeatPulseGrid } from "@/remotion/primitives/beat-pulse-grid";
<BeatPulseGrid src={audioSrc} columns={14} rows={7} mapping="radial" />Every cell has its own band
A grid where each cell follows the overall level is one big flashing rectangle;
the point of a grid is that its parts can disagree. mapping decides how the
spectrum is laid over the geometry — column runs it left to right, row top
to bottom, and radial maps it outward from the centre, which reads as a pulse
travelling through the grid on the kick.
The decaying trace
Cells carry their band's peak, dimmed, under the live level — the same trick as a peak-hold meter. At 30fps a one-frame transient is invisible, and the trace is what makes the beat legible instead of a flicker.
floor cuts the noise floor so quiet passages stay dark rather than shimmering,
and the kick lifts every cell slightly, which is what makes the pattern read as
one instrument rather than many.
Scheduled beats instead
When the beats are already known from the edit, caption-emoji-beat takes
explicit frames. This component is for reacting to a track you are actually
playing.
Each cell is bound to a band rather than the overall level — a grid where every cell agrees is one flashing rectangle. Cells carry their band's decaying peak under the live level, the same trick as a peak-hold meter, because a one-frame transient is invisible at 30fps.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/beat-pulse-grid- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: src, columns, rows, cellSize, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { BeatPulseGrid } from "@/remotion/primitives/beat-pulse-grid";
<BeatPulseGrid src={audioSrc} columns={14} rows={7} mapping="radial" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Audio source. `.wav` only. |
| columns | number | 12 | Cells across. |
| rows | number | 6 | Cells down. |
| cellSize | number | 34 | Cell edge length in px. |
| mapping | "column" | "radial" | "row" | "radial" | How the spectrum is laid over the geometry. |
| idleColor | string | rgba(250,250,250,0.07) | Cell colour at rest. |
| color | string | "#e8b86d" | Cell colour at level. |
| peakColor | string | "#f472b6" | Colour of the loudest cells. |
| pulseScale | number | 0.28 | Extra scale a cell takes at full level. |
| floor | number | 0.06 | Level below which a cell stays dark. Cuts the noise floor. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |