We Call It

Short descriptive lines build up to a large product name introduced by a lead-in phrase.

Installation

$ pnpm dlx shadcn@latest add @remocn/we-call-it

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WeCallIt } from "@/components/remocn/we-call-it";
 
const WeCallItScene = () => (
  <WeCallIt descriptions={["Scenes you install like components.", "Edits that land as commits."]} lead="We call it a" name="video registry." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WeCallIt"
    component={WeCallItScene}
    durationInFrames={210}
    fps={30}
    width={1280}
    height={720}
  />
);

Description lines stack up one at a time, then a lead-in phrase lands and the big name appears word by word. Pass descriptions, lead and name to name your own thing. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
descriptions	string[]— Lines that build up before the name.
lead	string"We call it a" Lead-in phrase shown before the name.
name	string"video registry." Large name revealed at the end.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

descriptionsstring[]
Lines that build up before the name.
leadstring
Lead-in phrase shown before the name.
Default"We call it a"
namestring
Large name revealed at the end.
Default"video registry."
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"