Rolodex Flip
Cycle a word through a list of values with a 3D rolodex card flip
Installation
$ pnpm dlx shadcn@latest add @remocn/rolodex-flipUsage
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.
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. |