Aspect Slit

A film-title card opens through a slit, with a serif hero line and a small caption

Installation

$ pnpm dlx shadcn@latest add @remocn/aspect-slit

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AspectSlit } from "@/components/remocn/aspect-slit";
 
const AspectSlitScene = () => <AspectSlit title="Now showing." caption="A launch film, built in React." slit={0.125} />;
 
export const RemotionRoot = () => (
  <Composition
    id="AspectSlit"
    component={AspectSlitScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Letterbox bars close to a thin slit, a serif title rises into it, then the bars open back to full frame as the title grows to hero size and a small caption settles underneath. Pass title, caption and slit (the narrowest bar gap as a share of frame height).

Props6

Prop	Type	Default
title	string"Now showing." Short title. It first appears inside the slit, then grows to hero size.
caption	string"A launch film, built in React." Small line under the hero title. Pass "" to hide.
slit	number0.125 Height of the narrowest slit, as a share of the frame height.
accent	string"#3B5BFD" Accent color for the background light and the title full stop.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

titlestring
Short title. It first appears inside the slit, then grows to hero size.
Default"Now showing."
captionstring
Small line under the hero title. Pass "" to hide.
Default"A launch film, built in React."
slitnumber
Height of the narrowest slit, as a share of the frame height.
Default0.125
accentstring
Accent color for the background light and the title full stop.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"