Roman Edition

A giant Roman numeral counts up on a colored band under an edition header, then a tagline lands.

Installation

$ pnpm dlx shadcn@latest add @remocn/roman-edition

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RomanEdition } from "@/components/remocn/roman-edition";
 
const RomanEditionScene = () => (
  <RomanEdition value={14} eyebrow="Launch Week" tagline="Five days of new scenes, one every morning." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RomanEdition"
    component={RomanEditionScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

The band wipes in and the numeral ticks through the sequence from from to value, slow at first, quick through the middle, then easing onto the final edition. The tagline rises in after it lands. Pass value, eyebrow and tagline; it ships light and dark through theme.

Props9

Prop	Type	Default
value	number14 Final edition number, drawn as a Roman numeral.
from	number1 Edition number the sequence starts from.
eyebrow	string"Launch Week" Header text above the numeral.
tagline	string"Five days of new scenes, one every morning." Line that rises in word by word under the band.
showNumber	booleantrue Show the plain edition number at the top right.
accent	string— Accent color for highlights and small marks.
background	string— Background color override.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

valuenumber
Final edition number, drawn as a Roman numeral.
Default14
fromnumber
Edition number the sequence starts from.
Default1
eyebrowstring
Header text above the numeral.
Default"Launch Week"
taglinestring
Line that rises in word by word under the band.
Default"Five days of new scenes, one every morning."
showNumberboolean
Show the plain edition number at the top right.
Defaulttrue
accentstring
Accent color for highlights and small marks.
backgroundstring
Background color override.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"