Kinetic Center Build

Words enter from the right and push the line until the full phrase locks centered

Installation

$ pnpm dlx shadcn@latest add @remocn/kinetic-center-build

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { KineticCenterBuild } from "@/components/remocn/kinetic-center-build";
 
const KineticCenterBuildScene = () => (
  <KineticCenterBuild text="Words push left." entryOffset={88} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="KineticCenterBuild"
    component={KineticCenterBuildScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Each word lands centered, then the next word slides in from the right and pushes the line left so the growing phrase stays centered at every step — reads as one kinetic line build, best for short three-word phrases.

This is a layout-aware effect — it measures word widths to keep the line centered, so it works best with short headings.

With Backdrop

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

Pair with Backdrop to place the text inside a full-frame fill with a rounded, shadowed content frame:

tsx

import { Composition } from "remotion";
import { KineticCenterBuild } from "@/components/remocn/kinetic-center-build";
import { Backdrop } from "@/components/remocn/backdrop";
 
const KineticCenterBuildScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <KineticCenterBuild text="Words push left." entryOffset={88} />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="KineticCenterBuild"
    component={KineticCenterBuildScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props6

Prop	Type	Default
textrequired	string— The phrase to build, word by word. Best with short three-word phrases.
entryOffset	number88 How far in pixels each incoming word starts to the right before pushing the line.
fontSize	number72 Font size in pixels
fontWeight	number600 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
className	string— Optional className passed to the phrase container

textrequiredstring
The phrase to build, word by word. Best with short three-word phrases.
entryOffsetnumber
How far in pixels each incoming word starts to the right before pushing the line.
Default88
fontSizenumber
Font size in pixels
Default72
fontWeightnumber
CSS font-weight
Default600
colorstring
Text color (any valid CSS color)
Default"#171717"
classNamestring
Optional className passed to the phrase container