Point Expand
Short statements rise word by word ending in a round point that pulses and expands into the next scene.
$ pnpm dlx shadcn@latest add @remocn/point-expandUsage
// src/Root.tsx
import { Composition } from "remotion";
import { PointExpand } from "@/components/remocn/point-expand";
const PointExpandScene = () => (
<PointExpand
statements={["Launch films used to take weeks.", "Now they take an afternoon.", "Copy, paste, render."]}
accent="#3B5BFD"
/>
);
export const RemotionRoot = () => (
<Composition
id="PointExpand"
component={PointExpandScene}
durationInFrames={180}
fps={30}
width={1280}
height={720}
/>
);Each statement rises word by word and ends in a round point that drops in, pulses pulses times, and then expands as a circle that becomes the next scene's ground, alternating a plain stage with an accent gradient. Pass up to five statements (trailing periods are replaced by the point) and an accent. It ships light and dark.
Props5
| Prop | Type | Default |
|---|---|---|
| statements | string[]— Up to five statements; each ends in an expanding point. | |
| pulses | number2 How many times the point pulses before it expands. | |
| accent | string"#3B5BFD" Color of the points and the gradient scenes. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
| theme | "dark" | "light""dark" Light or dark palette. | |
- statementsstring[]
Up to five statements; each ends in an expanding point.
- pulsesnumber
How many times the point pulses before it expands.
Default
2 - accentstring
Color of the points and the gradient scenes.
Default
"#3B5BFD" - speednumber
Playback speed multiplier for the whole timeline.
Default
1 - theme"dark" | "light"
Light or dark palette.
Default
"dark"