Word Pullback

The camera pulls back from a big word to reveal "The cinematic toolkit for every launch"

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WordPullback } from "@/components/remocn/word-pullback";
 
const WordPullbackScene = () => (
  <WordPullback before="The" accentWord="cinematic" after="toolkit for every launch" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WordPullback"
    component={WordPullbackScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

One big word is typed, then the camera pulls back in two moves to reveal the surrounding sentence and a logo before a gradient floods the frame. Pass before, accentWord and after; it ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props9

Prop	Type	Default
before	string"The" Text before the accent word.
accentWord	string"cinematic" Word shown huge first, set in serif.
after	string"toolkit for every launch" Text after the accent word.
accent	string— Accent colour (any CSS colour).
ink	string— Text colour (any CSS colour).
background	string— Overrides the theme background colour.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
ground	GshPresetId— Gradient preset used for the backdrop.
groundParams	Partial<GradientParams>— Overrides for the gradient preset parameters.

beforestring
Text before the accent word.
Default"The"
accentWordstring
Word shown huge first, set in serif.
Default"cinematic"
afterstring
Text after the accent word.
Default"toolkit for every launch"
accentstring
Accent colour (any CSS colour).
inkstring
Text colour (any CSS colour).
backgroundstring
Overrides the theme background colour.
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
groundGshPresetId
Gradient preset used for the backdrop.
groundParamsPartial<GradientParams>
Overrides for the gradient preset parameters.