Chart Morph

A segmented ring unrolls into bars, tips into columns, then collapses into an area line chart ending on 46k.

Installation

$ pnpm dlx shadcn@latest add @remocn/chart-morph

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ChartMorph } from "@/components/remocn/chart-morph";
 
const ChartMorphScene = () => (
  <ChartMorph
    suffix="k"
    caption="renders in May"
    data={[
      { label: "Jan", value: 12 },
      { label: "Feb", value: 18 },
      { label: "Mar", value: 23 },
      { label: "Apr", value: 31 },
      { label: "May", value: 46 },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ChartMorph"
    component={ChartMorphScene}
    durationInFrames={182}
    fps={30}
    width={1280}
    height={720}
  />
);

A segmented ring unrolls into a stacked bar, the segments tip upright into columns, and the columns collapse into a line chart with an area fill that ends on the last value. Pass data (label and value per point), suffix for the unit, and caption for the line under the value. Ships dark and light via theme.

Props6

Prop	Type	Default
data	ChartMorphDatum[]DEFAULT_DATA Points to plot, in order; the last one is the hero value.
suffix	string"k" Unit appended to the final value.
caption	string— Line under the value; defaults to renders in the last label.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

dataChartMorphDatum[]
Points to plot, in order; the last one is the hero value.
DefaultDEFAULT_DATA
suffixstring
Unit appended to the final value.
Default"k"
captionstring
Line under the value; defaults to renders in the last label.
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1