# Rolodex Flip
URL: https://remocn.dev/docs/typography/rolodex-flip

Cycle a word through a list of values with a 3D rolodex card flip

- Install: `npx shadcn@latest add @remocn/rolodex-flip`
- Vibe: tech
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rolodex-flip
```

## Usage

`RolodexFlip` renders an inline `span` and inherits the surrounding typography — drop it into the middle of a line and it flips through `items` while the rest of the line stays perfectly still: the outgoing value tips up and away, the incoming one turns in from below half a flip later, and an invisible sizer holds the width and baseline of the longest value. The first value is visible from the start and the last one stays for the rest of the scene.

```tsx
import { RolodexFlip } from "@/components/remocn/rolodex-flip";

export const MyScene = () => (
  <span style={{ fontFamily: "monospace", fontSize: 36 }}>
    $ npx shadcn add{" "}
    <RolodexFlip items={["button", "dialog", "command", "tabs", "chart-area"]} />
  </span>
);
```

## Sizing

The sizer uses the longest item by character count as real hidden text, so it works in any font. In a proportional font two equal-length strings can differ in width, so if your values are the same length put the visually widest one last — or anywhere, it just needs to be in the list.

`slot-machine-roll` and `number-wheel` are numeric reels, `per-word-crossfade` is a flat opacity swap, and `value-swap` slides values vertically at explicit frames — reach for `RolodexFlip` when arbitrary strings should cycle with physical depth at a fixed width.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `—` | Values shown in order. The last one stays. |
| `from` | `number` | `0` | Frame of the first flip. |
| `interval` | `number` | `20` | Frames each value holds before flipping. |
| `flipDuration` | `number` | `10` | Length of the flip itself in frames. |
| `className` | `string` | `—` | Passed to the wrapper span. |
| `style` | `CSSProperties` | `—` | Merged onto the wrapper span. |

## Use when
- Cycling package, feature, or value names inside a held line — install commands, "works with X" beats, plan-name cycling.
- The canonical "any component, same command" bit.

## Don't use when
- The values are numbers with a counting narrative — use `number-wheel` or `rolling-number`.
- Only two values swap once — `value-swap`, `shared-axis-y`, or `per-word-crossfade` is lighter.
- The line reflows per value — the fixed sizer width shows a gap next to short values.