# Reel
URL: https://remocn.dev/docs/ui-blocks/reel

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

- Install: `npx shadcn@latest add @remocn/reel`
- Vibe: clean
- Natural length: 160f @ 30fps

## Installation

```bash
npx 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}
  />
);
```

## 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. |

## Use when
- Showing a sequence of screenshots or product shots that should bloom open one over the last in a fixed frame.
- The story is "here's what the product looks like" across several views without a camera move.
- You want the reveal itself (the centre-out mask) to be the only motion in the scene.

## Don't use when
- You need a single framed photo rather than a sequence — use `polaroid` instead.
- You want a scrolling wall of items rather than a stacked reveal — use `infinite-marquee` or `perspective-marquee` instead.