Slit Reveal

A point of light draws a hairline that opens onto a product scene, with a glow ring below

Installation
$ pnpm dlx shadcn@latest add @remocn/slit-reveal

Usage

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

PropTypeDefault
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

    Default1