Time Breakdown

A segmented time bar shrinks while 56% less time per video counts up

Installation

$ pnpm dlx shadcn@latest add @remocn/time-breakdown

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TimeBreakdown } from "@/components/remocn/time-breakdown";
 
const TimeBreakdownScene = () => (
  <TimeBreakdown
    title="Where the time goes"
    caption="less time per video"
    before={[
      { label: "Editing", value: 62 },
      { label: "Rendering", value: 24 },
      { label: "Export", value: 14 },
    ]}
    after={[
      { label: "Editing", value: 6 },
      { label: "Rendering", value: 24 },
      { label: "Export", value: 14 },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TimeBreakdown"
    component={TimeBreakdownScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A segmented bar splits into time blocks, then the slow segment collapses and the bar shrinks while the saved percentage counts up with its caption. Pass before and after as lists of segments (label and value), and set title, beforeLabel, afterLabel and caption. Ships dark and light via theme.

Props9

Prop	Type	Default
before	TimeSegment[]DEFAULT_BEFORE Segments of the original timeline, each with a label and value.
after	TimeSegment[]DEFAULT_AFTER Segments after the change; same labels, smaller values.
title	string"Where the time goes" Small heading over the bar.
beforeLabel	string"Before" Label on the original bar.
afterLabel	string"With remocn" Label on the shortened bar.
caption	string"less time per video" Line under the saved percentage.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

beforeTimeSegment[]
Segments of the original timeline, each with a label and value.
DefaultDEFAULT_BEFORE
afterTimeSegment[]
Segments after the change; same labels, smaller values.
DefaultDEFAULT_AFTER
titlestring
Small heading over the bar.
Default"Where the time goes"
beforeLabelstring
Label on the original bar.
Default"Before"
afterLabelstring
Label on the shortened bar.
Default"With remocn"
captionstring
Line under the saved percentage.
Default"less time per video"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1