Focus Pan Text
Earlier lines stack up blurred as focus pans down line by line to a final sentence and a small toolbar.
$ pnpm dlx shadcn@latest add @remocn/focus-pan-textUsage
// src/Root.tsx
import { Composition } from "remotion";
import { FocusPanText } from "@/components/remocn/focus-pan-text";
const FocusPanTextScene = () => (
<FocusPanText
lines={["The scan is clean.", "All 48 checks passed.", "You're ready to launch."]}
meta="Just now"
/>
);
export const RemotionRoot = () => (
<Composition
id="FocusPanText"
component={FocusPanTextScene}
durationInFrames={169}
fps={30}
width={1280}
height={720}
/>
);Each line is read in turn while earlier lines fall out of focus above; focus lands on the final line, the accent word lights up and a toolbar with meta text appears. Pass lines and accentWord; it ships light and dark through theme.
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 |
|---|---|---|
| lines | string[]DEFAULT_LINES Lines shown in order; the last one is the payoff | |
| accentWord | string— Word in the last line shown in the accent color | |
| meta | string"Just now" Text in the toolbar after the final line | |
| accent | string— Color of the accent word | |
| ink | string— Text color override | |
| theme | "dark" | "light""dark" Ships light and dark palettes | |
| ground | GshPresetId— Gradient ground preset id | |
| groundParams | Partial<GradientParams>— Partial gradient parameters to tune the ground | |
| firstHold | number30 Frames the first line is held before panning on | |
- linesstring[]
Lines shown in order; the last one is the payoff
Default
DEFAULT_LINES - accentWordstring
Word in the last line shown in the accent color
- metastring
Text in the toolbar after the final line
Default
"Just now" - accentstring
Color of the accent word
- inkstring
Text color override
- theme"dark" | "light"
Ships light and dark palettes
Default
"dark" - groundGshPresetId
Gradient ground preset id
- groundParamsPartial<GradientParams>
Partial gradient parameters to tune the ground
- firstHoldnumber
Frames the first line is held before panning on
Default
30