Dashboard Populate

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}
  />
);

With Backdrop

Renders its scene transparent — supply the background via Backdrop:

import { Backdrop } from "@/components/remocn/backdrop";
import { DashboardPopulate } from "@/components/remocn/dashboard-populate";

<Backdrop fill={{ type: "color", value: "#09090b" }}>
  <DashboardPopulate accentColor="#22c55e" kpiTarget={128400} />
</Backdrop>

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