# Times Turn
URL: https://remocn.dev/docs/numbers/times-turn

A quiet unit beside a large figure is replaced by a turning multiplication sign, then the figure swells.

- Install: `npx shadcn@latest add @remocn/times-turn`
- Vibe: playful
- Natural length: 92f @ 30fps

## Installation

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

## Usage

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

const TimesTurnScene = () => (
  <TimesTurn value="3" before="%" label="more launch cuts from the same storyboard" />
);

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

The figure rises in beside a small unit. A multiplication sign then turns in on the panel while the unit exits, the figure swells to fill the space, and the label rises in word by word. Pass `value`, `before` and `label`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"3"` | Figure shown next to the multiplication sign. |
| `before` | `string` | `"%"` | Small unit shown first, which exits as the sign turns in. |
| `label` | `string` | `"more launch cuts from the same storyboard"` | Caption that rises in word by word under the figure. |
| `accent` | `string` | — | Accent color for highlights and small marks. |
| `background` | `string` | — | Background color override. Pass "transparent" to composite over other layers. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |

## Use when
- A multiplier claim such as 3x, where a percent sign flips into a times sign.
- A turn from a percentage framing to a multiple.
- A short stat beat on a colored panel with one supporting line.

## Don't use when
- You want the multiplier to count up — use `lean-count`.
- The claim is a percentage — use `press-stat`.
- You want a plain stat with no turn — use `compact-stat`.