# Card Swipe Cover
URL: https://remocn.dev/docs/transitions/card-swipe-cover

A tilted card swipes across the frame and covers the headline, revealing a grid of launch kit cards

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

## Installation

```bash
npx shadcn@latest add @remocn/card-swipe-cover
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CardSwipeCoverDemo } from "@/components/remocn/card-swipe-cover";

const CardSwipeCoverDemoScene = () => (
  <CardSwipeCoverDemo
    line="Every launch asset, *in one place.*"
    title="Launch kits"
    subtitle="Four films, ready to render."
  />
);

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

Scene A types a headline; the text between asterisks is set in the accent style. A card then swipes in from the bottom corner and covers the frame, and scene B shows a title, a subtitle, filter tabs and a grid of cover cards. Pass `line`, `title`, `subtitle` and your own `covers`; it ships light and dark.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette for both scenes |
| `accent` | `string` | — | Accent color; defaults to the theme accent |
| `line` | `string` | `"Every launch asset, *in one place.*"` | Scene A headline; wrap words in asterisks for the accent style |
| `title` | `string` | `"Launch kits"` | Heading of the card grid in scene B |
| `subtitle` | `string` | `"Four films, ready to render."` | Supporting line under the grid heading |
| `covers` | `CoverItem[]` | `DEFAULT_COVERS` | Cards for the scene B grid; defaults use images only in the Remocn repo |
| `ground` | `GshPresetId` | — | Preset id for the scene A gradients.sh shader ground |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the scene A shader parameters |
| `groundB` | `GshPresetId` | — | Preset id for the scene B gradients.sh shader ground |
| `groundParamsB` | `Partial<GradientParams>` | — | Overrides for the scene B shader parameters |
| `transition` | `CardSwipeCoverProps` | — | Overrides for the transition presentation props |

## Use when
- Moving from a statement headline to a catalog of deliverables, templates or case studies.
- A launch video that introduces a gallery of cards right after a punchy line of copy.
- You want a physical, layered swipe where a card with depth carries the next scene in.

## Don't use when
- The next scene is a single hero shot, not a card or gallery — use `diagonal-split`.
- You need a flat, graphic wipe with no depth or tilt — use `column-slide`.
- The two scenes should crossfade softly — use `zoom-blur`.