Thin Slab

A big '1 day' contrasted with a thin progress slab labeled 14x faster than by hand

Installation

$ pnpm dlx shadcn@latest add @remocn/thin-slab

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ThinSlab } from "@/components/remocn/thin-slab";
 
const ThinSlabScene = () => (
  <ThinSlab
    title="Time to your first launch video"
    before={{ value: 14, label: "By hand", unit: "days" }}
    after={{ value: 1, label: "With remocn", unit: "day" }}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ThinSlab"
    component={ThinSlabScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

A title and the old value appear above a thick slab, then a dashed ghost of that slab holds its place while the slab squeezes to the new thickness and the number counts across. A callout such as '14x faster' fades in last, followed by a light sheen. Pass before and after as value, label and unit, and title; callout is computed unless you set it. It ships light and dark through the theme prop.

Props8

Prop	Type	Default
title	string"Time to your first launch video" Small heading above the numbers.
before	ThinSlabSideDEFAULT_BEFORE The starting side: value, label and optional unit. Drawn as the thick slab.
after	ThinSlabSideDEFAULT_AFTER The ending side: value, label and optional unit. The slab squeezes to this.
callout	string— Text shown after the squeeze. Auto-computed from the two values if omitted.
accent	string"#3B5BFD" Highlight colour used in the slab and callout.
background	string— Stage colour; pass 'transparent' to layer over other footage.
speed	number1 Playback speed multiplier; 1 is the designed pace.
theme	"dark" \| "light""dark" Ships light and dark.

titlestring
Small heading above the numbers.
Default"Time to your first launch video"
beforeThinSlabSide
The starting side: value, label and optional unit. Drawn as the thick slab.
DefaultDEFAULT_BEFORE
afterThinSlabSide
The ending side: value, label and optional unit. The slab squeezes to this.
DefaultDEFAULT_AFTER
calloutstring
Text shown after the squeeze. Auto-computed from the two values if omitted.
accentstring
Highlight colour used in the slab and callout.
Default"#3B5BFD"
backgroundstring
Stage colour; pass 'transparent' to layer over other footage.
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1
theme"dark" | "light"
Ships light and dark.
Default"dark"