# Spine Turn
URL: https://remocn.dev/docs/typography/spine-turn

Titles rise in large, then turn 90 degrees to become book spines along the bottom rule.

- Install: `npx shadcn@latest add @remocn/spine-turn`
- Vibe: clean
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spine-turn
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpineTurn } from "@/components/remocn/spine-turn";

const SpineTurnScene = () => <SpineTurn titles={["Kickoff", "Deep dive", "Wrap-up"]} hold={26} />;

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

Each title rises in large over a hairline rule, holds, then rotates 90 degrees and shrinks into a spine at the bottom while the next title enters. The last title stays large. Pass `titles` and `hold`; `accent` and `background` override the colors, and it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `titles` | `string[]` | `["Kickoff", "Deep dive", "Wrap-up"]` | Titles in order; each turns into a spine except the last. |
| `hold` | `number` | `26` | Frames each title holds before it turns. |
| `accent` | `string` | — | Hero title color. Defaults to the theme accent. |
| `background` | `string` | — | Stage color. Use "transparent" to composite over other layers. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |

## Use when
- An agenda or chapter sequence where each title hands off to the next and stacks as a spine.
- A clean explainer that needs to show progress through three or four sections.
- A recap beat where earlier points shrink into a growing row while the newest one stays large.

## Don't use when
- You want a numbered list that highlights row by row — use `index-list`.
- Each step needs its own full beat with a number — use `three-steps`.
- The titles should just replace each other with no history — use `fade-through`.