# Version Hero
URL: https://remocn.dev/docs/numbers/version-hero

A chrome numeral is built from stacked slices, docks inside a glowing disc, and a label lands beneath.

- Install: `npx shadcn@latest add @remocn/version-hero`
- Vibe: premium
- Natural length: 96f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/version-hero
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { VersionHero } from "@/components/remocn/version-hero";

const VersionHeroScene = () => (
  <VersionHero version="2.0" name="remocn" label="Now available" />
);

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

The numeral's slices stack up in 3D under a slow orbiting camera, dock into a solid object while a disc of light rises behind it, and a specular sweep crosses its faces. The label lands beneath. Pass `version`, `name` and `label`; `theme` picks brushed aluminium in dark or matte paper stock in light.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `version` | `string` | `"2.0"` | Release number rendered as the extruded object. |
| `name` | `string` | `"remocn"` | Product name in the label under the numeral. |
| `label` | `string` | `"Now available"` | Second half of the label. |
| `logo` | `React.ReactNode` | — | React node that replaces the label's name; the default is the Remocn logo. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark is brushed aluminium, light is matte paper stock. |

## Use when
- A release announcement where the version number is the hero.
- A 2.0 style launch close with a light sweep over the numeral.
- A product-name lockup that finishes on a short Now available line.

## Don't use when
- The number is an edition counter — use `roman-edition`.
- The headline is a statistic — use `compact-stat`.
- You want a gradient number snapped onto a poster grid — use `grid-snap-poster`.