Idea Set

Two ruled lines rise in light italic, then change typeface letter by letter while one phrase turns accent-colored.

Installation

$ pnpm dlx shadcn@latest add @remocn/idea-set

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { IdeaSet } from "@/components/remocn/idea-set";
 
const IdeaSetScene = () => <IdeaSet lines={["Rough cut.", "Launch day."]} highlight="Launch day." />;
 
export const RemotionRoot = () => (
  <Composition
    id="IdeaSet"
    component={IdeaSetScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each line rises out of a mask above a hairline rule in light italic. After hold frames the glyphs flip one by one to mono, then to medium sans, and the highlight phrase takes the accent color. Pass your own lines, and set highlight to text that appears in them. It ships light and dark.

Props7

Prop	Type	Default
lines	string[]["Napkin sketch.", "Keynote opener."] Lines of text, each set on its own ruled row.
highlight	string"Keynote opener." Phrase that turns accent-colored in the final typeface; must match line text.
hold	number18 Frames to rest between each typeface change.
accent	string— Accent color; overrides the theme accent.
background	string— Background fill; pass "transparent" to drop it.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

linesstring[]
Lines of text, each set on its own ruled row.
Default["Napkin sketch.", "Keynote opener."]
highlightstring
Phrase that turns accent-colored in the final typeface; must match line text.
Default"Keynote opener."
holdnumber
Frames to rest between each typeface change.
Default18
accentstring
Accent color; overrides the theme accent.
backgroundstring
Background fill; pass "transparent" to drop it.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"