Gauge Dial
Needle sweeps to target. Install with npx remotion-ui@latest add gauge-dial.
PrimitiveData & media
$ npx remotion-ui@latest add gauge-dialAn instrument dial: arc fill, tick marks, and a needle that sweeps to its target.
import { GaugeDial } from "@/remotion/primitives/gauge-dial";
<GaugeDial value={78} label="Render budget" unit="%" durationInFrames={70} />Two curves on purpose
The needle rides the overshoot curve and the arc does not. A needle that swings past and settles back is what a real instrument does; a coloured arc that retreats reads as the value itself changing its mind. The readout counts from the arc's progress, so the number never disagrees with the fill.
Shape
sweepInDegrees is the total travel, centred on twelve o'clock — 250° is the
default car-dashboard look, 180° gives a half-moon meter. thickness covers
both the track and the fill; ticks are inset from it so the needle can cross
them without colliding.
Ticks the needle has passed sit brighter than the ones ahead, which keeps the reading legible where the needle covers the arc.
Exit
exitAtInFrames unwinds the dial back to rest as it fades — an instrument
powering down rather than a panel dissolving in place.
The needle rides the overshoot curve and the arc does not — a needle that settles back is instrument-like, while a coloured arc that retreats reads as the value changing its mind. The readout counts from the arc's progress, so number and fill never disagree.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/gauge-dial- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: value, min, max, size, 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 { GaugeDial } from "@/remotion/primitives/gauge-dial";
<GaugeDial value={78} label="Render budget" unit="%" durationInFrames={70} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | Target the needle sweeps to. |
| min | number | 0 | Value at the start of the arc. |
| max | number | 100 | Value at the end of the arc. |
| size | number | 360 | Outer diameter in px. Type scales off it. |
| thickness | number | 26 | Track and fill thickness. |
| sweepInDegrees | number | 250 | Total travel, centred on twelve o'clock. 180 gives a half-moon meter. |
| label | string | undefined | Caption under the readout. |
| unit | string | "" | Suffix on the readout, e.g. `"%"`. |
| tickCount | number | 9 | Tick marks around the arc. 0 hides them. |
| valueFormatter | (value: number) => string | rounded | Formats the readout. |
| durationInFrames | number | 44 | Length of the sweep. |
| delayInFrames | number | 0 | Frames to wait before the sweep starts. |
| exitAtInFrames | number | undefined | Frame the dial unwinds on. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |