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-pushUsage
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.
// 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.
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | — | The phrase; words are split on spaces. |
fontSize | number | 72 | Font size in pixels |
wordGap | number | 10 | Frames between the first two word arrivals; later gaps shrink by accel. |
accel | number | 0.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 | number | 400 | CSS font-weight |
className | string | — | Optional className passed to the underlying span |