Slit Reveal
A point of light draws a hairline that opens onto a product scene, with a glow ring below
$ pnpm dlx shadcn@latest add @remocn/slit-revealUsage
// src/Root.tsx
import { Composition } from "remotion";
import { SlitReveal } from "@/components/remocn/slit-reveal";
const SlitRevealScene = () => (
<SlitReveal
title="Introducing remocn"
src="/images/app-screenshot.png"
opening="letterbox"
accent="#3B5BFD"
/>
);
export const RemotionRoot = () => (
<Composition
id="SlitReveal"
component={SlitRevealScene}
durationInFrames={160}
fps={30}
width={1280}
height={720}
/>
);A point of light draws out into a hairline with the title riding on it. The line then opens like a slit, letterbox style or sideways, onto the scene you pass as children or src, which settles out of a soft blur. Without either it shows a built-in product mock. With opening="letterbox" the reveal settles by frame 132, and sideways by frame 152.
Props6
| Prop | Type | Default |
|---|---|---|
| title | string"Introducing remocn" Line of type that rides the hairline before it opens | |
| children | React.ReactNode— Scene revealed in the slit; wins over src | |
| src | string— Screenshot revealed in the slit, filled to cover | |
| opening | "letterbox" | "sideways""letterbox" Letterbox opens top and bottom; sideways rolls the line upright | |
| accent | string"#3B5BFD" Color of the light and the default product mock | |
| speed | number1 Playback multiplier for the whole timeline | |
- titlestring
Line of type that rides the hairline before it opens
Default
"Introducing remocn" - childrenReact.ReactNode
Scene revealed in the slit; wins over src
- srcstring
Screenshot revealed in the slit, filled to cover
- opening"letterbox" | "sideways"
Letterbox opens top and bottom; sideways rolls the line upright
Default
"letterbox" - accentstring
Color of the light and the default product mock
Default
"#3B5BFD" - speednumber
Playback multiplier for the whole timeline
Default
1