Feature Flag Rollout

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

Installation

$ pnpm dlx 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.

Props14

Prop	Type	Default
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	number42800 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	number1 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

flagNamestring
Feature flag display name
Default"New checkout flow"
flagKeystring
Flag key shown in monospace under the name
Default"new-checkout-flow"
environmentstring
Environment chip text, e.g. 'Production'
Default"Production"
stepsnumber[]
Rollout percentages the slider steps through
Default[5, 25, 100]
totalUsersnumber
User count the rollout percentage is applied to
Default42800
actorstring
Person named in the audit log entries
Default"Maya Chen"
historyFlagAuditEntry[]
Existing audit log rows: actor, verb, target, time
DefaultDEFAULT_HISTORY
metricsGuardrailMetric[]
Guardrail charts; the first two are shown
DefaultDEFAULT_METRICS
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters
workspacestring
Declared but not currently rendered