Oval Type

Words ride a row of stretchy gradient capsules, which then grow into a tall three-word poster.

Installation

$ pnpm dlx shadcn@latest add @remocn/oval-type

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { OvalType } from "@/components/remocn/oval-type";
 
const OvalTypeScene = () => <OvalType tagline={["Make", "it", "move"]} words={["Plan", "Cut", "Edit"]} accentWord={1} />;
 
export const RemotionRoot = () => (
  <Composition
    id="OvalType"
    component={OvalTypeScene}
    durationInFrames={115}
    fps={30}
    width={1280}
    height={720}
  />
);

Capsules step left along a conveyor, stretching while they travel and bouncing tall when they land, each carrying one word from words. Then the tagline words land as tall poster ovals and the gaps close. Use accentWord to set one tagline word in italic serif; it ships light and dark through theme.

Props7

Prop	Type	Default
tagline	string[]["Make", "it", "move"] The poster row: one word per capsule, in reading order.
words	string[]— Words that ride the capsules past the frame before the tagline lands.
accentWord	number1 Index of the tagline word set in italic serif; -1 for none.
beat	number9 Frames between two conveyor steps.
theme	"dark" \| "light""dark" Light or dark ground; ships both.
speed	number1 Playback speed multiplier.
accent	string— Unused; kept for API parity, the capsules use a fixed gradient.

taglinestring[]
The poster row: one word per capsule, in reading order.
Default["Make", "it", "move"]
wordsstring[]
Words that ride the capsules past the frame before the tagline lands.
accentWordnumber
Index of the tagline word set in italic serif; -1 for none.
Default1
beatnumber
Frames between two conveyor steps.
Default9
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"
speednumber
Playback speed multiplier.
Default1
accentstring
Unused; kept for API parity, the capsules use a fixed gradient.