Slash Wipe
A gradient slash wipes across and reveals a large title, '/transitions', with a one-line sub
$ pnpm dlx shadcn@latest add @remocn/slash-wipeUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
DEFAULT_SECTIONS - everynumber
Frames between one section and the next.
Default
56 - 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.
Default
1 - theme"dark" | "light"
Colour scheme; ships light and dark.
Default
"dark"