# Feature Flag Rollout
URL: https://remocn.dev/docs/product-scenes/feature-flag-rollout

A feature flag switches on and ramps 5%, 25%, then 100% while guardrail charts and an audit log update.

- Install: `npx shadcn@latest add @remocn/feature-flag-rollout`
- Vibe: tech
- Natural length: 182f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/feature-flag-rollout
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FeatureFlagRollout } from "@/components/remocn/feature-flag-rollout";

const FeatureFlagRolloutScene = () => (
  <FeatureFlagRollout
    flagName="New checkout flow"
    steps={[5, 25, 100]}
    actor="Maya Chen"
  />
);

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

A feature flag card appears, the toggle flips on at the first step, and a cursor drags the rollout slider through each percentage in `steps` while two guardrail charts (error rate and p95 latency) draw live and an audit log adds a row per step. Pass `flagName`, `flagKey`, `actor` and `steps` to match your product; `metrics` and `history` replace the charts and audit rows. Ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `flagName` | `string` | `"New checkout flow"` | Feature flag display name |
| `flagKey` | `string` | `"new-checkout-flow"` | Flag key shown in monospace under the name |
| `environment` | `string` | `"Production"` | Environment chip text, e.g. 'Production' |
| `steps` | `number[]` | `[5, 25, 100]` | Rollout percentages the slider steps through |
| `totalUsers` | `number` | `42800` | User count the rollout percentage is applied to |
| `actor` | `string` | `"Maya Chen"` | Person named in the audit log entries |
| `history` | `FlagAuditEntry[]` | `DEFAULT_HISTORY` | Existing audit log rows: actor, verb, target, time |
| `metrics` | `GuardrailMetric[]` | `DEFAULT_METRICS` | Guardrail charts; the first two are shown |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |
| `workspace` | `string` | — | Declared but not currently rendered |

## Use when
- A release-engineering beat showing a gradual rollout: toggle on, drag the percentage up, watch guardrails hold.
- A launch video for a feature-flag or experimentation tool that must prove rollouts are safe.
- A shipped-safely scene where live metric charts and an audit trail sell the confidence.

## Don't use when
- You want a build-and-deploy story with logs ending in Ready — use `deploy-pipeline`.
- The point is merging code with passing checks, not controlling exposure — use `pr-merge`.
- You need a plain live-metrics wall without a rollout interaction — use `live-dashboard`.