# Flick Swap
URL: https://remocn.dev/docs/typography/flick-swap

A headline flicks up on a scrolling rail to swap between items, each with a label and a highlighted phrase.

- Install: `npx shadcn@latest add @remocn/flick-swap`
- Vibe: premium
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/flick-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FlickSwap } from "@/components/remocn/flick-swap";

const FlickSwapScene = () => (
  <FlickSwap
    items={[
      { label: "Captions", headline: "Every word lands on the beat.", highlight: "on the beat" },
      { label: "Transitions", headline: "Cuts that feel expensive.", highlight: "expensive" },
    ]}
    dwell={28}
  />
);

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

A rail on the side marks position while headlines scroll upward with a quick flick and settle, holding for `dwell` frames each. Pass `items` as label, headline and highlight objects; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `FlickSwapItem[]` | `DEFAULT_ITEMS` | List of items with label, headline and highlight phrase |
| `dwell` | `number` | `28` | Frames each item stays still between flicks |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A feature rundown where several one-line claims cycle through in one scene.
- A beat that lists categories, each with its own headline, without cutting between scenes.

## Don't use when
- You only have a single headline - use `feature-headline`.
- You want items to change in place with a crossfade - use `per-word-crossfade`.
- You want one word to roll through options - use `slot-machine-roll`.