Pie Slice Reveal
Slices sweep in sequentially. Install with npx remotion-ui@latest add pie-slice-reveal.
PrimitiveData & media
$ npx remotion-ui@latest add pie-slice-revealA filled pie whose wedges open clockwise from twelve o'clock, one at a time.
import { PieSliceReveal } from "@/remotion/primitives/pie-slice-reveal";
<PieSliceReveal
slices={[
{ label: "Pro", value: 44 },
{ label: "Team", value: 26 },
{ label: "Free", value: 18 },
]}
staggerInFrames={18}
/>Where it sits
Solid wedges, so the whole is the point. When the comparison matters more than
the total, donut-chart frees the centre for a headline number.
Slice separation
gapInDegrees is taken off the end of each wedge rather than drawn as a stroke
between them. A stroked divider sits on top of whichever slice was painted last
and nicks the outer edge of the circle.
explode pushes every wedge out along its own bisector. Because the bisector is
still moving while a slice opens, the wedge slides outward as it sweeps. The pie
is drawn slightly smaller than its box to leave room for that offset.
Labels
Percentages appear at 70% of a slice's sweep, so a label never sits on a wedge
too narrow to hold it. labelColor defaults to near-black — the slice colours
are light enough that dark type is the readable choice on all of them.
The gap is cut out of the wedge rather than stroked between wedges: a stroked divider sits on top of whichever slice was painted last and nicks the outer edge of the circle. Solid wedges, so the whole is the point — use `donut-chart` when the centre should carry a number.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/pie-slice-reveal- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: slices, size, colors, showLabels, 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 { PieSliceReveal } from "@/remotion/primitives/pie-slice-reveal";
<PieSliceReveal
slices={[
{ label: "Pro", value: 44 },
{ label: "Team", value: 26 },
{ label: "Free", value: 18 },
]}
staggerInFrames={18}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| slices | ChartDatum[] | required | `{ label, value, color? }`, swept clockwise from twelve o'clock. |
| size | number | 380 | Diameter in px, offset for the explode included. |
| colors | string[] | gold / teal / pink / indigo / amber | Fallback colours, cycled. |
| showLabels | boolean | true | Percentages inside each slice, from 70% of its sweep. |
| explode | number | 0.04 | How far each slice sits off centre, as a share of the radius. |
| gapInDegrees | number | 1.4 | Angular gap, taken off the end of each wedge. |
| durationInFrames | number | 24 | Length of one slice's sweep. |
| staggerInFrames | number | 14 | Frames between one slice and the next. |
| exitAtInFrames | number | undefined | Frame the slices fan out on. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |