Macro Letter Pan
A macro camera hops across the letters of a key word, then pulls back to reveal the full phrase.
$ pnpm dlx shadcn@latest add @remocn/macro-letter-panUsage
// src/Root.tsx
import { Composition } from "remotion";
import { MacroLetterPan } from "@/components/remocn/macro-letter-pan";
const MacroLetterPanScene = () => (
<MacroLetterPan line="Ship it today." word="today" firstShot={12} />
);
export const RemotionRoot = () => (
<Composition
id="MacroLetterPan"
component={MacroLetterPanScene}
durationInFrames={129}
fps={30}
width={1280}
height={720}
/>
);The camera cuts between tight close-ups of letter pairs inside word, each shot shorter than the last, then springs back to show the whole line, with the key word tinting to the accent color. Pass line and word (a substring of the line). It takes a theme prop and 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 |
|---|---|---|
| line | string"Ready to launch." The full phrase revealed after the pan. | |
| word | string"launch" The substring of the line the camera pans across. | |
| accent | string— Color the key word turns after the pull-back. | |
| ink | string— Text color; defaults to the theme ink. | |
| theme | "dark" | "light""dark" Light or dark ground; the component ships both. | |
| ground | GshPresetId— Gradient preset id used as the background. | |
| groundParams | Partial<GradientParams>— Overrides for the background gradient parameters. | |
| firstShot | number15 Frames of the first close-up; later shots get shorter. | |
| maxShots | number6 Maximum number of close-up shots before the pull-back. | |
- linestring
The full phrase revealed after the pan.
Default
"Ready to launch." - wordstring
The substring of the line the camera pans across.
Default
"launch" - accentstring
Color the key word turns after the pull-back.
- inkstring
Text color; defaults to the theme ink.
- theme"dark" | "light"
Light or dark ground; the component ships both.
Default
"dark" - groundGshPresetId
Gradient preset id used as the background.
- groundParamsPartial<GradientParams>
Overrides for the background gradient parameters.
- firstShotnumber
Frames of the first close-up; later shots get shorter.
Default
15 - maxShotsnumber
Maximum number of close-up shots before the pull-back.
Default
6