# Shutter

Slats close one after another over the outgoing scene, then open in the same direction onto the next one.

```bash
npx shadcn add https://www.reelcn.dev/r/shutter.json
```

Usage:

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <NumberThree />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={shutter({ slats: 8 })} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <NumberTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

Use for:

- Section changes in slideshows, listicles and countdowns
- Editorial or retro looks that want a mechanical rhythm

Dependencies:

- `@remotion/transitions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| slats? | `number` | — | Number of slats. Defaults to one per 160 design units across the frame. |
| direction? | `"vertical" \| "horizontal"` | — | `horizontal` slats stack top to bottom; `vertical` slats stand side by side. |
| color? | `string` | — | Slat color. Defaults to the theme accent. |