Scatter Plot Pop
Points pop in on stagger, optional trend line. Install with npx remotion-ui@latest add scatter-plot-pop.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add scatter-plot-popA correlation cloud that fills left to right, with a least-squares trend line that lands after the last point.
import { ScatterPlotPop } from "@/remotion/primitives/scatter-plot-pop";
<ScatterPlotPop
points={[{ x: 4, y: 24, weight: 0.8 }, { x: 11, y: 39 }]}
xLabel="Scenes per project"
staggerInFrames={3}
/>Order of arrival
The stagger follows ascending x, not array order, so the cloud fills the way
the axis is read no matter how the data arrived. Points leave in the same order.
The trend line waits for the last point. Drawn earlier it would assert a correlation over data the viewer has not been shown yet.
Fitting
The fit is least squares over the raw values and only then projected to the
screen. Fitting in screen space inverts the slope, since y grows downward there.
showTrend={false} drops it for data with no meaningful relationship.
Weight
weight scales a dot between minRadius and maxRadius and defaults to 1 —
omit it on every point and the cloud is uniform. Each dot carries a soft halo at
about twice its radius, which keeps overlapping points readable without an
explicit stroke.
The stagger follows ascending x, not array order, so the cloud fills the way the axis is read. The fit is least squares over the raw values and only then projected — fitting in screen space inverts the slope, since y grows downward there.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/scatter-plot-pop- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: points, width, height, minRadius, 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 { ScatterPlotPop } from "@/remotion/primitives/scatter-plot-pop";
<ScatterPlotPop
points={[{ x: 4, y: 24, weight: 0.8 }, { x: 11, y: 39 }]}
xLabel="Scenes per project"
staggerInFrames={3}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| points | ScatterPoint[] | required | `{ x, y, weight?, color? }` in data units. |
| width | number | 860 | Drawing width. Type scales off it. |
| height | number | 480 | Drawing height. |
| minRadius | number | 7 | Dot radius at weight 0. |
| maxRadius | number | 20 | Dot radius at the heaviest weight present. |
| showTrend | boolean | true | Least-squares trend line, drawn after the last dot lands. |
| showAxis | boolean | true | Gridlines and value labels on both axes. |
| xLabel | string | undefined | Caption under the x axis. |
| yLabel | string | undefined | Rotated caption beside the y axis. |
| durationInFrames | number | 16 | Length of one dot's pop. |
| staggerInFrames | number | 2.5 | Frames between dots, in ascending x order. |
| exitAtInFrames | number | undefined | Frame the cloud drains on. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |