# Card Fan
URL: https://remocn.dev/docs/ui-blocks/card-fan

A stack of colored format cards fans out, one card lifts forward, and a caption writes in below.

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

## Installation

```bash
npx shadcn@latest add @remocn/card-fan
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CardFan } from "@/components/remocn/card-fan";

const CardFanScene = () => (
  <CardFan
    title="Your top formats"
    accentWord={2}
    pick={1}
    caption="Launch films are 41% of this month’s renders"
  />
);

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

A title writes in while a stack of cards drops, fans out, and lifts the `pick` card forward. A caption then writes in word by word. Pass your own `title` (with `accentWord` tinting one word), up to six `cards`, the `pick` index and the `caption`; it ships light and dark through `theme`.

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 |
|---|---|---|---|
| `title` | `string` | `"Your top formats"` | Title above the fan. |
| `accentWord` | `number` | `2` | Index of the title word shown in the accent color. |
| `cards` | `{ label: string; color: string; meta?: string; glyph?: 'launch' \| 'list' \| 'play' \| 'cursor' \| 'spark' }[]` | `DEFAULT_CARDS` | Two to six cards. Glyph is one of launch, list, play, cursor, spark. |
| `pick` | `number` | `0` | Zero-based index of the card that lifts forward. |
| `caption` | `string` | `"Launch films are 41% of this month’s renders"` | Line of text written in under the fan. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ink` | `string` | — | Text color override. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- Presenting a handful of formats, templates or plans as a hand of cards with one highlighted.
- A stats beat where a short title and caption frame which option is the most popular.
- A playful, tactile way to introduce two to six named options.

## Don't use when
- The options should swipe through one at a time like a deck — use `swipe-deck`.
- You need a dense grid of feature tiles rather than a fan — use `bento-build`.
- Three feature headings in a row are enough — use `feature-trio`.