# Font Cycle
URL: https://remocn.dev/docs/typography/font-cycle

One word rapidly cycles through typefaces, each labeled, before settling in its final face

- Install: `npx shadcn@latest add @remocn/font-cycle`
- Vibe: playful
- Natural length: 102f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/font-cycle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FontCycle } from "@/components/remocn/font-cycle";

const FontCycleScene = () => (
  <FontCycle word="Shipped" passes={2} showLabel />
);

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

The word swaps through the `fonts` list for `passes` rounds, starting fast and slowing, with the font name shown as a small label under it. It then lands in the `final` face with a small settle and a gradient sheen while the guides fade. Pass `word`, and custom `fonts` or `final` only if their font families are already loaded in your project; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Launch"` | The word that cycles through the typefaces. |
| `fonts` | `FontCycleFace[]` | `DEFAULT_FONTS` | Faces to cycle through; each needs a loaded family and a label. |
| `final` | `FontCycleFace` | `FINAL_FACE` | Face the word settles into at the end. |
| `passes` | `number` | `2` | How many times the font list is cycled. |
| `showLabel` | `boolean` | `true` | Show each font's name under the word. |
| `accent` | `string` | `"#3B5BFD"` | Color of the label dot once the word lands. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A branding beat showing the same word in many typefaces before the chosen one lands.
- A type-design or customization pitch that needs a fast, decelerating font roulette.
- A hero word reveal that should end on a gradient-filled word in one clean face.

## Don't use when
- You want one family flexing in width and weight, not different faces — use `axis-flex`.
- You want a casing change rather than a typeface change — use `case-flip`.
- The word should simply land with no cycling — use `focus-blur-resolve`.