Serif Rise

A large serif line rises into place, 'From rough cut to final cut.', end phrase in red

Installation

$ pnpm dlx shadcn@latest add @remocn/serif-rise

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SerifRise } from "@/components/remocn/serif-rise";
 
const SerifRiseScene = () => (
  <SerifRise lines={["From rough cut", "to final cut."]} highlight="final cut." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SerifRise"
    component={SerifRiseScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Large serif lines rise into place one after another under thin rules, then a sweep lights the highlight phrase in the accent colour. Pass lines and highlight; it ships light and dark.

Props6

Prop	Type	Default
lines	string[]["From rough cut", "to final cut."] Headline lines, each rising in turn.
highlight	string"final cut." Phrase set in the accent colour.
accent	string— Highlight colour (any CSS colour).
background	string— Overrides the theme background colour.
speed	number1 Playback multiplier; above 1 plays faster.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

linesstring[]
Headline lines, each rising in turn.
Default["From rough cut", "to final cut."]
highlightstring
Phrase set in the accent colour.
Default"final cut."
accentstring
Highlight colour (any CSS colour).
backgroundstring
Overrides the theme background colour.
speednumber
Playback multiplier; above 1 plays faster.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"