Pull in

A fixed lead phrase stays while spaced-out place words pull into view one after another.

Installation

$ pnpm dlx shadcn@latest add @remocn/pull-in

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PullIn } from "@/components/remocn/pull-in";
 
const PullInScene = () => (
  <PullIn lead="Now in" places={["vertical.", "4K.", "your codebase."]} hold={24} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PullIn"
    component={PullInScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

The lead phrase holds while each entry in places pulls into view from a wide spread and then departs for the next. Pass lead and places, and tune hold for pace. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
lead	string"Now in" Phrase that stays in place.
places	string[]["vertical.", "4K.", "your codebase."] Words pulled into view in order.
hold	number24 Frames each state stays on screen before the next one.
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.

leadstring
Phrase that stays in place.
Default"Now in"
placesstring[]
Words pulled into view in order.
Default["vertical.", "4K.", "your codebase."]
holdnumber
Frames each state stays on screen before the next one.
Default24
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"