Wake Wipe
A wake-like wipe reveals 'Ship the launch video today.' with a gradient accent word
$ pnpm dlx shadcn@latest add @remocn/wake-wipeUsage
// src/Root.tsx
import { Composition } from "remotion";
import { WakeWipe } from "@/components/remocn/wake-wipe";
const WakeWipeScene = () => (
<WakeWipe lines={["Animations you own.", "Transitions that land.", "Ship the launch video today."]} highlight="today." />
);
export const RemotionRoot = () => (
<Composition
id="WakeWipe"
component={WakeWipeScene}
durationInFrames={180}
fps={30}
width={1280}
height={720}
/>
);Each line is revealed by a wipe with a soft wake behind it and cleared by the next, ending on the last line with its highlight word in a gradient. Pass lines, highlight and eyebrow; it ships light and dark.
Props7
| Prop | Type | Default |
|---|---|---|
| lines | string[]— Lines shown in turn; the last one gets the highlight. | |
| highlight | string"today." Word or phrase set in the gradient accent. | |
| eyebrow | string"Inside remocn" Small label above the lines. | |
| hold | number54 Frames the final line holds. | |
| accent | string"#3B5BFD" Accent colour (any CSS colour). | |
| speed | number1 Playback multiplier; above 1 plays faster. | |
| theme | "dark" | "light""dark" Colour scheme; ships light and dark. | |
- linesstring[]
Lines shown in turn; the last one gets the highlight.
- highlightstring
Word or phrase set in the gradient accent.
Default
"today." - eyebrowstring
Small label above the lines.
Default
"Inside remocn" - holdnumber
Frames the final line holds.
Default
54 - accentstring
Accent colour (any CSS colour).
Default
"#3B5BFD" - speednumber
Playback multiplier; above 1 plays faster.
Default
1 - theme"dark" | "light"
Colour scheme; ships light and dark.
Default
"dark"