Torn Edge

A torn paper sheet rips away to reveal a bold headline printed on the gradient stage

Installation

$ pnpm dlx shadcn@latest add @remocn/torn-edge

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TornEdge } from "@/components/remocn/torn-edge";
 
const TornEdgeScene = () => <TornEdge title="Make it yours." accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="TornEdge"
    component={TornEdgeScene}
    durationInFrames={110}
    fps={30}
    width={1280}
    height={720}
  />
);

A gradient paper sheet tears across the frame, the halves part, and the headline is printed on the stage underneath. Pass title and accent (the mid colour of the sheet gradient); it ships light and dark.

Props4

Prop	Type	Default
title	string"Make it yours." Headline printed on the stage underneath the sheet.
accent	string"#3B5BFD" Mid colour of the sheet's gradient (gradients.sh "fluted").
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

titlestring
Headline printed on the stage underneath the sheet.
Default"Make it yours."
accentstring
Mid colour of the sheet's gradient (gradients.sh "fluted").
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"