Edge Fit

A single huge cream word, 'recaps', fills the frame edge to edge with a caption and logo

Installation

$ pnpm dlx shadcn@latest add @remocn/edge-fit

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { EdgeFit } from "@/components/remocn/edge-fit";
 
const EdgeFitScene = () => (
  <EdgeFit words={["intros", "teasers", "recaps"]} caption="Fresh from the registry" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="EdgeFit"
    component={EdgeFitScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each word is fitted to the full frame width and its letters rise in, one word after another, with a caption and logo beneath. Pass words, caption and your own logo; it ships light and dark.

Props9

Prop	Type	Default
words	string[]["intros", "teasers", "recaps"] Words shown one at a time, each fitted edge to edge.
caption	string"Fresh from the registry" Small line under the word.
logo	React.ReactNode \| null— Logo node under the word; null hides it.
letterGap	number3 Frames between each letter rising in.
hold	number14 Frames the text holds before the next beat.
accent	string— Accent 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.

wordsstring[]
Words shown one at a time, each fitted edge to edge.
Default["intros", "teasers", "recaps"]
captionstring
Small line under the word.
Default"Fresh from the registry"
logoReact.ReactNode | null
Logo node under the word; null hides it.
letterGapnumber
Frames between each letter rising in.
Default3
holdnumber
Frames the text holds before the next beat.
Default14
accentstring
Accent 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"