Dashboard Populate

A composition primitive that stages a full dashboard reveal in two acts. First the structure fades in — tiles, axes, gridlines, legends. Then, with a deliberate beat of silence, the data crashes in: KPIs spin up from zero, bars launch from the baseline on staggered springs, the line chart traces itself left to right, and the donut sweeps to its final value.

Installation

$ pnpm dlx shadcn@latest add @remocn/dashboard-populate

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { DashboardPopulate } from "@/components/remocn/dashboard-populate";

const DashboardPopulateScene = () => (
  <DashboardPopulate accentColor="#22c55e" kpiTarget={128400} />
);

export const RemotionRoot = () => (
  <Composition
    id="DashboardPopulate"
    component={DashboardPopulateScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`accentColor`	`string`	`"#22c55e"`	Color used for bars, line, donut and KPI delta.
`kpiTarget`	`number`	`128400`	Target value the revenue counter animates up to.
`speed`	`number`	`1`	Multiplier applied to the current frame.
`className`	`string`	—	Optional className for the outer container.

Notes

Structure first, then data

The first 15 frames are reserved for the empty scaffolding — gridlines, axes, tile chrome — so the eye has something to anchor to before the springs hit. Without this beat the populate cascade reads as chaotic; with it, the dashboard feels like it's coming alive in a deliberate, choreographed way.