Slash Wipe

A gradient slash wipes across and reveals a large title, '/transitions', with a one-line sub

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

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlashWipe } from "@/components/remocn/slash-wipe";
 
const SlashWipeScene = () => (
  <SlashWipe sections={[{ title: "captions", sub: "Styles that follow every word." }, { title: "transitions", sub: "Cuts that land on the beat." }]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SlashWipe"
    component={SlashWipeScene}
    durationInFrames={110}
    fps={30}
    width={1280}
    height={720}
  />
);

A gradient slash sweeps across the frame and reveals the first title, then another slash wipes in the next, each with a one-line sub. Pass sections (title and optional sub) and your own logo; it ships light and dark.

Props7

PropTypeDefault
sections
SlashSection[]DEFAULT_SECTIONS

Titles with optional sub, each revealed by a slash.

every
number56

Frames between one section and the next.

logo
React.ReactNode—

Custom logo node shown in place of the built-in mark.

accent
string"#3B5BFD"

Accent colour (any CSS colour).

background
string—

Overrides the theme background colour.

speed
number1

Playback multiplier; above 1 plays faster.

theme
"dark" | "light""dark"

Colour scheme; ships light and dark.

  • sectionsSlashSection[]

    Titles with optional sub, each revealed by a slash.

    DefaultDEFAULT_SECTIONS

  • everynumber

    Frames between one section and the next.

    Default56

  • logoReact.ReactNode

    Custom logo node shown in place of the built-in mark.

  • accentstring

    Accent colour (any CSS colour).

    Default"#3B5BFD"

  • backgroundstring

    Overrides the theme background colour.

  • speednumber

    Playback multiplier; above 1 plays faster.

    Default1

  • theme"dark" | "light"

    Colour scheme; ships light and dark.

    Default"dark"