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-build

Usage

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.

tsx

// 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.

tsx

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.

Props13

Prop	Type	Default
textrequired	string— The phrase to build word by word
fontSize	number52 Font size in pixels
color	string"#fff3df" Text color (any valid CSS color)
fontWeight	number400 CSS font-weight
wordGap	number11 Frames between each of the first two word additions
accel	number0.75 Multiplier applied to each later word gap; lower values accelerate more strongly
rise	number0.18 Starting vertical offset of each new word in em
zoomStep	number0.035 Cumulative scale added to the whole visible phrase after each new word
settleFrames	number9 Frames used by the synchronized word rise and whole-phrase push-in
exitAt	number51 Frame on which the left-to-right opacity wipe begins
exitFrames	number12 Duration of the opacity wipe in frames
speed	number1 Playback speed multiplier
className	string— Optional className passed to the text span

textrequiredstring
The phrase to build word by word
fontSizenumber
Font size in pixels
Default52
colorstring
Text color (any valid CSS color)
Default"#fff3df"
fontWeightnumber
CSS font-weight
Default400
wordGapnumber
Frames between each of the first two word additions
Default11
accelnumber
Multiplier applied to each later word gap; lower values accelerate more strongly
Default0.75
risenumber
Starting vertical offset of each new word in em
Default0.18
zoomStepnumber
Cumulative scale added to the whole visible phrase after each new word
Default0.035
settleFramesnumber
Frames used by the synchronized word rise and whole-phrase push-in
Default9
exitAtnumber
Frame on which the left-to-right opacity wipe begins
Default51
exitFramesnumber
Duration of the opacity wipe in frames
Default12
speednumber
Playback speed multiplier
Default1
classNamestring
Optional className passed to the text span