Sparkline Row
Compact trend lines that read at small sizes. Install with npx remotion-ui@latest add sparkline-row.
PrimitiveData & media
$ npx remotion-ui@latest add sparkline-rowA metrics stack: label, a small trend line that draws itself on, the current figure, and a signed delta.
import { SparklineRow } from "@/remotion/primitives/sparkline-row";
<SparklineRow
rows={[
{ label: "Renders / day", values: [180, 240, 210, 320, 480, 610], delta: "+24%" },
{ label: "Median render", values: [92, 84, 86, 74, 66, 61], delta: "-18%" },
]}
staggerInFrames={20}
/>Every row scales to itself
A sparkline is read for shape, not level. Rows are normalised individually, so a metric that moves between 4 and 6 keeps its shape next to one in the thousands — a shared axis would flatten it into a straight line.
Layout
Only the spark is SVG. Label, value and delta are CSS, so the row can carry
tabular figures and a coloured delta without fighting SVG text metrics. width
divides between the label (flexible), sparkWidth (fixed) and the value column.
delta colours itself from its sign: + reads as up, - or − as down,
anything else stays neutral. The delta waits for the line to finish drawing —
it is the conclusion of the row, not its opening.
Timing
Rows draw in order, staggerInFrames apart, and leave in the same order when
exitAtInFrames is set, so the stack empties top-down instead of blinking out
as one block.
Every row scales to its own domain: a sparkline is read for shape, and a shared axis would flatten a metric that moves between 4 and 6 next to one in the thousands. Only the spark is SVG — label, value and delta are CSS, so the row keeps tabular figures without fighting SVG text metrics.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/sparkline-row- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: rows, width, rowHeight, sparkWidth, 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 { SparklineRow } from "@/remotion/primitives/sparkline-row";
<SparklineRow
rows={[
{ label: "Renders / day", values: [180, 240, 320, 480, 610], delta: "+24%" },
{ label: "Median render", values: [92, 86, 74, 66, 61], delta: "-18%" },
]}
staggerInFrames={20}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | SparklineSeries[] | required | `{ label, values, value?, delta?, color? }`, oldest value first. |
| width | number | 720 | Overall width of the stack. |
| rowHeight | number | 96 | Height of one row. Type scales off it. |
| sparkWidth | number | 260 | Width of the spark itself. |
| upColor | string | "#2dd4bf" | Colour for a `+` delta. |
| downColor | string | "#f472b6" | Colour for a `-` delta. |
| showArea | boolean | true | Gradient wash under each line. |
| durationInFrames | number | 34 | Length of one row's draw. |
| staggerInFrames | number | 12 | Frames between one row and the next. |
| exitAtInFrames | number | undefined | Frame the stack starts emptying on, top-down. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |