Wake Wipe

A wake-like wipe reveals 'Ship the launch video today.' with a gradient accent word

Installation
$ pnpm dlx shadcn@latest add @remocn/wake-wipe

Usage

tsx
// 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

PropTypeDefault
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.

    Default54

  • accentstring

    Accent colour (any CSS colour).

    Default"#3B5BFD"

  • speednumber

    Playback multiplier; above 1 plays faster.

    Default1

  • theme"dark" | "light"

    Colour scheme; ships light and dark.

    Default"dark"