# Swipe Deck
URL: https://remocn.dev/docs/product-scenes/swipe-deck

A card deck is swiped right, left and up, then an It's a match modal lands with an install button.

- Install: `npx shadcn@latest add @remocn/swipe-deck`
- Vibe: playful
- Natural length: 156f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/swipe-deck
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SwipeDeck } from "@/components/remocn/swipe-deck";

const SwipeDeckScene = () => (
  <SwipeDeck
    matchWith="Acme"
    initials="MC"
    lines={["Swipe right on what fits.", "Skip the rest.", "Install the match."]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="SwipeDeck"
    component={SwipeDeckScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A phone shows a stack of cards: the cursor swipes the first right to like it, the second left to skip it and the third up to super-like it, then an It's a match modal pops in with two avatars, a heart and an Install button. Pass `cards` (title, meta, chips, and a `scene` or `src`), `matchWith` and `initials`; `lines` are the three captions beside the phone. Ships dark by default and light.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `cards` | `SwipeCard[]` | `DEFAULT_CARDS` | Deck cards; the first three are swiped, the fourth sits underneath |
| `matchWith` | `string` | `"remocn"` | Name shown in the match modal |
| `initials` | `string` | `"MC"` | Initials on the viewer avatar in the match modal |
| `lines` | `[string, string, string]` | — | Three captions beside the phone, one per beat |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"dark"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A discovery or matching app launch where swiping is the core mechanic.
- A product that curates options (templates, styles, tools) and ends in a clear pick.
- A vertical cut with three captions, one per swipe beat.

## Don't use when
- You want a store page and install flow — use `app-store-listing`.
- You want a reward screen with counters — use `streak-reward`.
- You want a stack that fans out of a pile without gestures — use `card-fan`.