Unit Grid
A grid of dots lights up a share of them beside a stat line and caption.
$ pnpm dlx shadcn@latest add @remocn/unit-gridUsage
// src/Root.tsx
import { Composition } from "remotion";
import { UnitGrid } from "@/components/remocn/unit-grid";
const UnitGridScene = () => (
<UnitGrid total={100} highlighted={33} caption="1 in 3 teams ship weekly" />
);
export const RemotionRoot = () => (
<Composition
id="UnitGrid"
component={UnitGridScene}
durationInFrames={130}
fps={30}
width={1280}
height={720}
/>
);Dots fade in across the grid, then the highlighted dots flip to the accent color in a sweeping order while the stat line and caption come in. Pass total, highlighted and caption; a total of 100 lays out as ten by ten, and it ships light and dark through theme.
Props6
| Prop | Type | Default |
|---|---|---|
| total | number100 Number of dots in the grid. | |
| highlighted | number33 How many dots light up. | |
| caption | string"1 in 3 teams ship weekly" Line shown under the stat. | |
| accent | string"#3B5BFD" Accent color for highlights and small marks. | |
| theme | "dark" | "light""dark" Color theme, "dark" or "light". | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
- totalnumber
Number of dots in the grid.
Default
100 - highlightednumber
How many dots light up.
Default
33 - captionstring
Line shown under the stat.
Default
"1 in 3 teams ship weekly" - accentstring
Accent color for highlights and small marks.
Default
"#3B5BFD" - theme"dark" | "light"
Color theme, "dark" or "light".
Default
"dark" - speednumber
Playback speed multiplier for the whole timeline.
Default
1