Baseline Drop
Words fall onto a shared baseline one after another while a gradient streak glows beneath them.
$ pnpm dlx shadcn@latest add @remocn/baseline-dropUsage
// src/Root.tsx
import { Composition } from "remotion";
import { BaselineDrop } from "@/components/remocn/baseline-drop";
const BaselineDropScene = () => (
<BaselineDrop text="Ship the story." stagger={11} accent="#3B5BFD" />
);
export const RemotionRoot = () => (
<Composition
id="BaselineDrop"
component={BaselineDropScene}
durationInFrames={125}
fps={30}
width={1280}
height={720}
/>
);Each word drops from above and lands on a single baseline with a small bounce while a gradient streak draws in and brightens under the line, then retracts. Pass text (or words for explicit splits) and stagger to set the rhythm; it ships light and dark through theme.
Props6
| Prop | Type | Default |
|---|---|---|
| text | string"Ship the story." Headline; split on spaces into dropping words | |
| words | string[]— Explicit word list; overrides text when given | |
| stagger | number11 Frames between consecutive word landings | |
| accent | string"#3B5BFD" Accent color (any valid CSS color) | |
| theme | "dark" | "light""dark" Ships light and dark palettes | |
| speed | number1 Playback speed multiplier | |
- textstring
Headline; split on spaces into dropping words
Default
"Ship the story." - wordsstring[]
Explicit word list; overrides text when given
- staggernumber
Frames between consecutive word landings
Default
11 - accentstring
Accent color (any valid CSS color)
Default
"#3B5BFD" - theme"dark" | "light"
Ships light and dark palettes
Default
"dark" - speednumber
Playback speed multiplier
Default
1