Centered Word Build
Words appear sharply from below while the centered phrase pushes closer on every beat
Installation
$ pnpm dlx shadcn@latest add @remocn/centered-word-buildUsage
The visible prefix is laid out as one centered line. Each word becomes fully visible on a hard cut rise em below the baseline and settles upward over settleFrames; opacity is never animated. In the same frame, the whole phrase starts another cumulative zoomStep push-in and holds the closer scale until the next word. The first two word gaps establish the rhythm; later gaps are multiplied by accel to tighten the cadence. At exitAt, a broad opacity mask wipes through the completed phrase from left to right. All timings were measured frame-by-frame from the reference footage.
// src/Root.tsx
import { Composition } from "remotion";
import { CenteredWordBuild } from "@/components/remocn/centered-word-build";
const CenteredWordBuildScene = () => (
<CenteredWordBuild text="everything we learn from" />
);
export const RemotionRoot = () => (
<Composition
id="CenteredWordBuild"
component={CenteredWordBuildScene}
durationInFrames={75}
fps={30}
width={1280}
height={720}
/>
);With Backdrop
The component is transparent. Add the scene color separately with Backdrop; the reference pairs warm white text with an orange radial glow.
import { Composition } from "remotion";
import { CenteredWordBuild } from "@/components/remocn/centered-word-build";
import { Backdrop } from "@/components/remocn/backdrop";
const CenteredWordBuildScene = () => (
<Backdrop
fill={{
type: "gradient",
value:
"radial-gradient(circle at 50% 108%, #ffd77a 0%, #ff6840 31%, #f13d21 78%)",
}}
>
<CenteredWordBuild text="everything we learn from" />
</Backdrop>
);
export const RemotionRoot = () => (
<Composition
id="CenteredWordBuild"
component={CenteredWordBuildScene}
durationInFrames={75}
fps={30}
width={1280}
height={720}
/>
);Syncing
With the defaults, a four-word phrase reveals on frames 0, 11, 22, and 30, reaching cumulative scales of 1, 1.035, 1.07, and 1.105. The exported centeredWordBuildLength(text, wordGap, accel, settleFrames, exitAt, exitFrames) helper returns the frame on which all motion finishes.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | — | The phrase to build word by word |
fontSize | number | 52 | Font size in pixels |
color | string | "#fff3df" | Text color (any valid CSS color) |
fontWeight | number | 400 | CSS font-weight |
wordGap | number | 11 | Frames between each of the first two word additions |
accel | number | 0.75 | Multiplier applied to each later word gap; lower values accelerate more strongly |
rise | number | 0.18 | Starting vertical offset of each new word in em |
zoomStep | number | 0.035 | Cumulative scale added to the whole visible phrase after each new word |
settleFrames | number | 9 | Frames used by the synchronized word rise and whole-phrase push-in |
exitAt | number | 51 | Frame on which the left-to-right opacity wipe begins |
exitFrames | number | 12 | Duration of the opacity wipe in frames |
speed | number | 1 | Playback speed multiplier |
className | string | — | Optional className passed to the text span |