# Gradual rollout

An animated isometric shadcn/ui scene for feature-flag and progressive-delivery sites: a console rolls a new version out while traffic on light rails shifts between servers.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Feature flag and experimentation product sites; Edge and hosting platforms explaining safe releases; Canary and progressive delivery feature sections; Developer tools landing pages about shipping safely
- **Category:** Technology · **Type:** Scenes · **Style:** Gradient, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/isometric/gradual-rollout) · [Screenshot](https://www.craftui.space/llms.md/preview/gradual-rollout.8a0e906c.jpg)

![Gradual rollout](https://www.craftui.space/llms.md/preview/gradual-rollout.8a0e906c.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/gradual-rollout.json
```

This is a paid item (ISO-7PVTRP): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import GradualRollout from "@/components/isometric/gradual-rollout";

export default function Page() {
  return <GradualRollout />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `IsoTone` | `"primary"` | Brand colour: a theme token name (primary, chart-2…) or any CSS colour. |
| `accent` | `IsoTone` | — | Colour of lit details (rails, packets of the new version, slider, lights). Defaults to `tone`. |
| `variant` | `IsoVariant` | `"ink"` | Flat ink drawing (default), soft tint, full colour, or blueprint outline. |
| `strokeWidth` | `number` | `0.3` | Line weight: in `ink` 0.3 is a 1.3 px outline at any size; rims and rails or outlines elsewhere. |
| `flag` | `string` | `"new-checkout"` | Feature flag name on the console, up to about 16 characters. |
| `steps` | `readonly [number, number, number]` | `built-in demo content` | The three rollout steps in percent, e.g. [10, 50, 100]. Default [10, 50, 100]. |
| `errorRate` | `string` | `"0.00%"` | Error rate shown on the console, e.g. "0.00%". |
| `latency` | `string` | `"212 ms"` | p95 latency shown on the console, e.g. "212 ms". |
| `stableLabel` | `string` | `"v1"` | Label on the stable server's front, up to about 4 characters. |
| `canaryLabel` | `string` | `"v2"` | Label on the new server's front, up to about 4 characters. |
| `screen` | `ReactNode \| ((state: RolloutScreenState) => ReactNode)` | — | Your own UI inside the console instead of the built-in one: any React node, or a function of the story's state (`step`, `percent` and the copy) so your UI follows the rollout. It renders at 452 × 220 CSS px (the screen is 11.3 × 5.5 units at 40 px per unit) and is projected into the scene; the rails and servers still play. |
| `autoPlay` | `boolean` | `true` | Play when the scene scrolls into view. Off shows the rolled-out end state. |
| `loop` | `boolean` | `true` | Replay after a pause. Off plays once and holds the end state. |
| `replayOnClick` | `boolean` | `true` | Clicking the scene replays the story. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the scene: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | `built-in demo content` | How far it turns, in degrees: a number for both ways, or [min, max]. Default [-15, 30]: further toward the console than away from it, so the copy stays readable. Each side is capped at 40. |
| `grid` | `boolean` | `true` | Dashed construction grid on the floor. |
| `grain` | `boolean` | `false` | Film grain over the scene (off in ink). |
| `title` | `string` | — | Accessible description. Without it the scene is decorative. |
| `className` | `string` | — | Classes for the wrapper; size the scene with width (it keeps its aspect ratio). |

### `RolloutScreenState`

| Field | Type | Description |
| --- | --- | --- |
| `step` (required) | `"start" \| "half" \| "healthy" \| "full" \| "done"` | "start" (first step), "half", "healthy", "full", "done". |
| `percent` (required) | `number` | The rollout percentage at this step. |
| `flag` (required) | `string` | The feature flag's name. |
| `errorRate` (required) | `string` | Error rate copy, e.g. "0.00%". |
| `latency` (required) | `string` | p95 latency copy, e.g. "212 ms". |

## Files

The install adds:

- `components/isometric/gradual-rollout.tsx`
- `components/isometric/iso-core.tsx`

npm dependencies (installed for you): `motion`.