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/reelUsage
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).
// 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}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | — | Ordered image URLs. Each reveals over the previous one in sequence. |
width | number | 1180 | Card width, in pixels. The card is centered in the composition. |
height | number | 676 | Card height, in pixels. |
radius | number | 16 | Corner radius of the card, in pixels. |
step | number | 20 | Frames between successive reveals. |
reveal | number | 13 | 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. |