Hairline Open

A hairline of light draws across the frame and opens like a slit onto the next serif statement

Installation

$ pnpm dlx shadcn@latest add @remocn/hairline-open

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HairlineOpen } from "@/components/remocn/hairline-open";
 
const HairlineOpenScene = () => (
  <HairlineOpen
    from="Write the story"
    to="Ship the film"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="HairlineOpen"
    component={HairlineOpenScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

The from statement sits on the stage. A hairline of light draws across the middle, shears slightly, then opens like a slit as the outgoing scene splits away, revealing the to statement on a soft gradient. Pass from and to as short text or any React node; it ships light and dark and settles by frame 78.

Props5

Prop	Type	Default
from	React.ReactNode"Write the story" Outgoing statement: a short headline or any React node
to	React.ReactNode"Ship the film" Incoming statement: a short headline or any React node
accent	string"#3B5BFD" Accent color used by the scenes
theme	"dark" \| "light""dark" Light or dark stage
speed	number1 Playback multiplier for the whole timeline

fromReact.ReactNode
Outgoing statement: a short headline or any React node
Default"Write the story"
toReact.ReactNode
Incoming statement: a short headline or any React node
Default"Ship the film"
accentstring
Accent color used by the scenes
Default"#3B5BFD"
theme"dark" | "light"
Light or dark stage
Default"dark"
speednumber
Playback multiplier for the whole timeline
Default1