Reel

A fixed centered card where images stack on the z-axis and each blooms open over the last

Installation

$ pnpm dlx shadcn@latest add @remocn/reel

Usage

Give Reel an ordered list of image URLs. Each image stacks on the z-axis over the previous one at the same centered position, and reveals via a centre-out mask that expands from its middle — so a new shot blooms open over the last and the frame is never blank. No camera move: the mask is the only motion. Pace the reveals with step (frames between images) and reveal (frames for one image to open).

tsx

// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { Reel } from "@/components/remocn/reel";
 
const ReelScene = () => (
  <Reel
    images={[
      staticFile("shot-1.png"),
      staticFile("shot-2.png"),
      staticFile("shot-3.png"),
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Reel"
    component={ReelScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

Props8

Prop	Type	Default
images	string[]— Ordered image URLs. Each reveals over the previous one in sequence.
width	number1180 Card width, in pixels. The card is centered in the composition.
height	number676 Card height, in pixels.
radius	number16 Corner radius of the card, in pixels.
step	number20 Frames between successive reveals.
reveal	number13 Frames for one image's centre-out mask to fully open.
objectPosition	string"top" CSS object-position for the images inside the card.
background	string"#050506" Card surface color, shown behind an image while it opens.

imagesstring[]
Ordered image URLs. Each reveals over the previous one in sequence.
widthnumber
Card width, in pixels. The card is centered in the composition.
Default1180
heightnumber
Card height, in pixels.
Default676
radiusnumber
Corner radius of the card, in pixels.
Default16
stepnumber
Frames between successive reveals.
Default20
revealnumber
Frames for one image's centre-out mask to fully open.
Default13
objectPositionstring
CSS object-position for the images inside the card.
Default"top"
backgroundstring
Card surface color, shown behind an image while it opens.
Default"#050506"