Bubble Chart Pack
Circle-packed values settling into place. Install with npx remotion-ui@latest add bubble-chart-pack.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add bubble-chart-packValue bubbles packing themselves into a cluster, largest first.
import { BubbleChartPack } from "@/remotion/primitives/bubble-chart-pack";
<BubbleChartPack
bubbles={[
{ label: "Atoms", value: 42 },
{ label: "Blocks", value: 31 },
{ label: "Signals", value: 26 },
]}
staggerInFrames={12}
/>Area, not radius
Radius scales with the square root of the value, so the area — which is what the eye actually compares — stays proportional to the number. Scaling radius directly makes a bubble worth twice another look four times as big.
The pack is deterministic
Circles are placed largest first, each walking out along a spiral from the origin until it clears everything already placed. It is not the densest possible pack, but the same data always produces the same arrangement — a layout that reshuffled between renders would make the chart untrustworthy, and density is worth less than that.
The cluster is laid out in its own units and scaled once to fit width ×
height, so the same data fills the frame at any size.
Motion
Bubbles travel outward from the centre as they grow, so the cluster expands
rather than assembling out of unrelated dots. With exitAtInFrames the smallest
leave first and the cluster contracts back onto its heaviest value.
Labels and values are hidden on bubbles too small to hold them, so a long tail of minor values stays clean.
Radius scales with the square root of the value, so area — what the eye compares — stays proportional. The pack is a deterministic spiral placement followed by a compaction pass toward the centre: the same data always produces the same arrangement, which is worth more here than density.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/bubble-chart-pack- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: bubbles, width, height, colors, 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 { BubbleChartPack } from "@/remotion/primitives/bubble-chart-pack";
<BubbleChartPack
bubbles={[
{ label: "Atoms", value: 42 },
{ label: "Blocks", value: 31 },
{ label: "Signals", value: 26 },
]}
staggerInFrames={12}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| bubbles | ChartDatum[] | required | `{ label, value, color? }`. Area is proportional to value. |
| width | number | 860 | Box the cluster is scaled to fit. |
| height | number | 520 | Box height. |
| colors | string[] | gold / teal / pink / indigo / amber | Fallback colours, cycled. |
| showLabels | boolean | true | Labels inside bubbles large enough to hold them. |
| showValues | boolean | true | Value line under the label, hidden on small bubbles. |
| padding | number | 6 | Gap held between neighbours, in layout units. |
| durationInFrames | number | 26 | Length of one bubble's settle. |
| staggerInFrames | number | 7 | Frames between bubbles, largest first. |
| exitAtInFrames | number | undefined | Frame the cluster contracts on. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |