Sequel Numeral

The wordmark opens beside a giant numeral that drops in and grows, with a part-two tagline.

Installation

$ pnpm dlx shadcn@latest add @remocn/sequel-numeral

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SequelNumeral } from "@/components/remocn/sequel-numeral";
 
const SequelNumeralScene = () => (
  <SequelNumeral
    name="remocn"
    numeral="2"
    tagline="Part two. Out now."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SequelNumeral"
    component={SequelNumeralScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

The name appears with a small superscript numeral, which drops and swells into a giant numeral beside it before the tagline fades in. Pass name, numeral and tagline; accent colours the numeral and is red by default. Ships light and dark.

Props7

Prop	Type	Default
name	string"remocn" Product name shown beside the numeral.
numeral	string"2" Numeral or short text that grows into the hero.
tagline	string"Part two. Out now." Line that fades in under the lockup.
accent	stringRED Colour of the giant numeral.
background	string— Stage fill colour; overrides the theme background.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

namestring
Product name shown beside the numeral.
Default"remocn"
numeralstring
Numeral or short text that grows into the hero.
Default"2"
taglinestring
Line that fades in under the lockup.
Default"Part two. Out now."
accentstring
Colour of the giant numeral.
DefaultRED
backgroundstring
Stage fill colour; overrides the theme background.
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"