Paper Tear

$ pnpm dlx shadcn@latest add @remocn/paper-tear

Usage

paperTear() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The outgoing scene behaves like a printed sheet: it trembles and leans toward camera, then a jagged rip runs from top to bottom in a couple of frames. At the moment the rip completes the camera jolts, a flash runs along the seam and paper scraps blow out of it. Both halves then spring apart, pivoting on the frame edges so their torn sides swing toward camera. Each half has a fibrous edgeColor border and casts a shadow on the incoming scene, which is punched toward camera and settles back.

The rip shape comes from seed and roughness and is fully deterministic, so the same seed always tears the same way.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { paperTear } from "@/components/remocn/paper-tear";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 36 })}
      presentation={paperTear({ seed: 3, roughness: 0.7 })}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

The outgoing scene is rendered up to three times per frame (two torn halves plus an intact copy below the running rip), so it costs more than a plain wipe.

Timing

Variations

• impact: 0 turns off the shake, flash and debris for a quiet tear.
• impact: 2 doubles the shake and debris travel for a louder hit.
• roughness: 0 gives a smooth wavy rip, 1 a ragged zig-zag.

Props

paperTear(props) accepts: