Layover

A headline's key word cycles through short stops before landing on the final word.

Installation

$ pnpm dlx shadcn@latest add @remocn/layover

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Layover } from "@/components/remocn/layover";
 
const LayoverScene = () => (
  <Layover from="Write it" word="here." stops={["w", "every"]} to="Plays" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Layover"
    component={LayoverScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

The from phrase stays while word cycles through each entry in stops and settles on to. Pass from, word, stops and to to tell your own stop-by-stop story. It ships in light and dark through the theme prop.

Props8

Prop	Type	Default
from	string"Write it" Phrase that stays in place.
word	string"here." Initial word in the cycling slot.
stops	string[]["w", "every"] Words the slot passes through.
to	string"Plays" Word the line settles on.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

fromstring
Phrase that stays in place.
Default"Write it"
wordstring
Initial word in the cycling slot.
Default"here."
stopsstring[]
Words the slot passes through.
Default["w", "every"]
tostring
Word the line settles on.
Default"Plays"
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"