# Slice Slide

Cuts the frame into horizontal slices that slide out alternately left and right, each pushed out by the matching slice of the next scene.

```bash
npx shadcn add https://www.reelcn.dev/r/slice-slide.json
```

Usage:

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <LookOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={sliceSlide({ slices: 6 })} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <LookTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

Use for:

- Stylised scene changes in promos, music and fashion edits
- Swapping between two layouts with a strong horizontal rhythm

Avoid:

- Scenes that play audio or video, since both render once per slice. Use `brand-sweep`

Dependencies:

- `@remotion/transitions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| slices? | `number` | — | Number of horizontal slices. Defaults to one per 216 design units of height. |
| direction? | `"left" \| "right"` | — | Where the top slice leaves to. The slices below alternate. |