Comparison Table
A feature matrix that fills in the way you read it — row by row, label first, each column's verdict a fraction behind the last.
SceneScenes
$ npx remotion-ui@latest add comparison-tableRows wipe in one at a time. Inside a row the label lands first and the cells follow at 0.07s intervals, so the eye tracks left to right across the row instead of taking it as a block — the same order a viewer would read it in anyway.
Cells take three forms. true draws a tick, false draws a cross, and a string
prints as-is for the rows where the answer is a number or a word rather than a
yes. Ticks and crosses draw their own strokes rather than fading in: at the size
a matrix forces, a fading glyph spends most of its entrance as grey mush,
whereas a drawing one is sharp from its first frame.
highlightColumn lights the tier you want picked. It is one band sitting behind
the grid, not a background on each cell, so the rows can never disagree about
where its edges are — and highlightLabel pins the chip that explains it beside
the title.
Six rows and three columns is a comfortable ceiling at 1080p; past that, the
row height starts fighting the type size. For a single ticked list rather than a
matrix, use feature-list, and for one tier on its own use pricing-card.
Ticks and crosses draw their own strokes rather than fading — a fading glyph spends most of its entrance as grey mush at matrix sizes. The highlighted column is one lit band behind the grid, so rows can never disagree about where its edges are. For a single ticked list rather than a matrix, use feature-list.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/comparison-table- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: columns, rows, title, highlightColumn, 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 { ComparisonTable } from "@/remotion/scenes/comparison-table";
<ComparisonTable
title="What you get"
columns={["Free", "Studio", "Scale"]}
rows={[
{ label: "Render minutes", cells: ["60", "2,000", "Unlimited"] },
{ label: "4K exports", cells: [false, true, true] },
{ label: "Priority queue", cells: [false, false, true] },
]}
highlightColumn={1}
highlightLabel="Most picked"
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | string[] | ["Free", "Studio", "Scale"] | Column headings. The feature-label column is unnamed and sits ahead of these. |
| rows | MatrixRow[] | 6 sample rows | A label plus one cell per column: true ticks, false crosses, a string prints as-is. |
| title | string | "What you get" | Heading above the table. Omit to drop it. |
| highlightColumn | number | 1 | Column kept lit throughout. Pass -1 for a table with no favourite. |
| highlightLabel | string | "Most picked" | Chip pinned beside the title, above the highlighted column. |
| startAtSeconds | number | 0.5 | Second the first row wipes in. |
| rowStaggerSeconds | number | 0.26 | Seconds between rows. Cells inside a row trail their label by another 0.07s each. |
| holdSeconds | number | - | Seconds the finished table holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Highlight band, its header, and the ticks inside it. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |