# Card Push

The outgoing scene shrinks into a rounded card and flies off while the next scene rises from behind as a card and expands to full frame.

```bash
npx shadcn add https://www.reelcn.dev/r/card-push.json
```

Usage:

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <FeatureOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={cardPush({ direction: "left" })} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={90}>
    <FeatureTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

Use for:

- Stepping through screens, slides or features like a deck of cards
- Product walkthroughs and app demos

Dependencies:

- `@remotion/transitions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| direction? | `"up" \| "down" \| "left" \| "right"` | — | Where the outgoing card leaves to. The incoming card rises from the opposite side. |
| tilt? | `number` | — | Degrees the outgoing card tilts as it leaves. |
| backdrop? | `string` | — | Canvas behind the cards. Defaults to a tone between the theme background and foreground. |
| borderColor? | `string` | — | Card outline. Defaults to the theme border. |