Word Push

Words drive in from the right and push the line left into its new center

Installation

$ pnpm dlx shadcn@latest add @remocn/word-push

Usage

The first word glides in from the left and settles at center. Each following word appears slightly to the right of its slot and drives left into place, pushing the whole line left by half its width so the phrase always settles centered.

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WordPush } from "@/components/remocn/word-push";
 
const WordPushScene = () => <WordPush text="move at your own pace" />;
 
export const RemotionRoot = () => (
  <Composition
    id="WordPush"
    component={WordPushScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

The component renders transparent — supply the background via Backdrop. It ships single-theme; edit the copied file to re-theme colors.

tsx

import { Composition } from "remotion";
import { WordPush } from "@/components/remocn/word-push";
import { Backdrop } from "@/components/remocn/backdrop";
 
const WordPushScene = () => (
  <Backdrop fill={{ type: "color", value: "#0b0b14" }}>
    <WordPush text="move at your own pace" color="#ffffff" />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="WordPush"
    component={WordPushScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Syncing to a voiceover

wordGap sets the first gap and accel shrinks every following one, so the build accelerates as one gesture rather than per word. The exported wordPushLength(text, wordGap) helper returns the frame on which the last push settles — use it as the lower bound of the Sequence.

Props7

Prop	Type	Default
textrequired	string— The phrase; words are split on spaces.
fontSize	number72 Font size in pixels
wordGap	number10 Frames between the first two word arrivals; later gaps shrink by accel.
accel	number0.8 Each next gap is the previous one multiplied by this — one accelerando across the phrase. 1 keeps the rhythm uniform.
color	string"#171717" Text color (any valid CSS color)
fontWeight	number400 CSS font-weight
className	string— Optional className passed to the underlying span

textrequiredstring
The phrase; words are split on spaces.
fontSizenumber
Font size in pixels
Default72
wordGapnumber
Frames between the first two word arrivals; later gaps shrink by accel.
Default10
accelnumber
Each next gap is the previous one multiplied by this — one accelerando across the phrase. 1 keeps the rhythm uniform.
Default0.8
colorstring
Text color (any valid CSS color)
Default"#171717"
fontWeightnumber
CSS font-weight
Default400
classNamestring
Optional className passed to the underlying span