Feature Flag Rollout

About this style

Feature flags let teams ship code switched off and then turn it on for a growing share of users, a practice usually called a progressive or percentage rollout. Users are assigned by hashing their ID, so each step reaches a stable, evenly scattered slice of people rather than one region or one customer. Teams watch error rates, latency and business metrics at every step and roll back if a guardrail trips. Promos for flagging and experimentation products show that sequence because it is the whole promise of the product: releases become measured, reversible and a little boring. A good animation moves the percentage, the audience and the health numbers together, so the viewer sees cause and effect.

Make a 10-second feature flag rollout: a staged slider steps a new checkout from 1% to 100% of users while 4,000 user dots light up in hashed order, each cohort in its own shade, and three guardrail charts for errors, latency and conversion hold steady below their limits.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Burgee (fictional), feature flags and staged rollouts. Wordmark "burgee" beside an original mark: a small swallow-tailed pennant on a short pole.
- Flag: key "new-checkout-flow", name "New checkout flow", description "One-page checkout with saved cards.", environment "Production", owner "Payments team".
- Audience: 48,210 users; each of the 4,000 dots stands for about 12 of them.
- Steps (percent · users · dots · log time): 1% · 482 · 40 · 10:00; 5% · 2,411 · 200 · 10:15; 25% · 12,053 · 1,000 · 10:45; 50% · 24,105 · 2,000 · 11:30; 100% · 48,210 · 4,000 · 12:30.
- Metrics at each step, with their limits: Error rate 0.21%, 0.20%, 0.19%, 0.19%, 0.19% (limit 0.50%); p95 latency 288, 291, 286, 284, 284 ms (limit 400 ms); Checkout conversion 3.42%, 3.61%, 3.78%, 3.84%, 3.87% (floor 3.30%), finishing "+13.2% vs control".
- Final line: "Shipped to everyone. No rollbacks."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a quiet control room for a careful release, olive-black with one lime signal. The slider is the cause; the dots and the charts are the effect, and they move together at every step. Pacing is a steady ramp: five steps about a second apart, each larger than the last.
- Palette: background #121410 with a soft vignette to #0C0D0A at the corners and fixed seeded grain at 2%; panels #1A1D17 with 1px #2B3026 borders, radius 18; bone #F1F0E6 for primary text and chart lines; muted #979C8A; unlit dots #2A2E25; lime #C9F26B as the single accent (the on state, the slider fill, passing checks); cohort shades from first to last: #EEFFC2 (1%), #DDF98F (5%), #C9F26B (25%), #AEDA4E (50%), #8FBF3A (100%); limit lines #E07A5F, dashed, the only warm color and used only for limits.
- Type: Schibsted Grotesk 800 for the big percentage (168px, tracking −0.04em) and the wordmark (24px); Schibsted Grotesk 700 for the flag name (40px) and metric values (40px); Schibsted Grotesk 500 and 600 for labels and descriptions (16–20px); Martian Mono 400 and 500 for the flag key, counts, detent labels, the log and limits (12–20px), with tabular figures. Draw check marks as 2px strokes, not glyphs.
- Layout:
  - Control panel x 100–700, y 100–980. The wordmark at x 136, baseline y 160. The flag key at baseline y 232 in Martian Mono 500 20px with a "Production" chip after it (1px lime border, lime Martian Mono 500 12px). The flag name at baseline y 300; the description at baseline y 338 in muted 18px; "Owner · Payments team" at baseline y 368 in Martian Mono 13px muted. The On/Off toggle at (136, 400), 64×34, with its label beside it. The big percentage at x 136, baseline y 610 (bone at 0%, lime once on); under it at baseline y 656, "of users · 12,053 of 48,210" in Martian Mono 16px muted. The slider at y 740: a 6px track at x 136–664 (#2B3026) with five evenly spaced detents for 1%, 5%, 25%, 50% and 100% at x 136, 268, 400, 532 and 664 (labels under them at baseline y 776, Martian Mono 13px, muted, the current one bone), a lime fill up to the thumb, and a 28px bone thumb with a 3px lime ring. The guardrail chip at baseline y 812: "Checking guardrails…" in muted, then a lime check and "3 of 3 guardrails passing". The rollout log from y 850: one row per completed step, 24px apart, Martian Mono 13px: "10:15   5%   2,411 users" with a lime check at the end.
  - User grid card x 780–1820, y 100–640: the title "Users in rollout" (Schibsted 600 20px) at x 812, baseline y 144, and the count "12,053 / 48,210" right-aligned at x 1788 in Martian Mono 500 18px. A grid of 100 × 40 dots on a 10px pitch from (811, 180) to (1801, 570), each dot 3px in radius. A legend at baseline y 612: five 8px swatches in the cohort shades labeled "1%", "5%", "25%", "50%" and "100%", and a hollow swatch labeled "not yet".
  - Metric cards: three at y 670–980, at x 780–1113, 1133–1466 and 1486–1820. Each holds the label at top + 36 (Schibsted 600 16px muted); the value at top + 86 (Schibsted 700 40px bone), with a small lime check or the conversion's "+13.2% vs control" beside it; the limit at top + 112 in Martian Mono 13px muted ("limit 0.50%", "limit 400 ms", "floor 3.30%"); and a 290×120 sparkline from top + 150, 22px in from the card's left edge: a bone 2px line, the dashed limit line at its true position on the scale, and faint vertical ticks at each step. Scales: error rate 0–0.6%, latency 0–450 ms, conversion 3.0–4.2%.
- Dots: each dot gets a seeded bucket from 0 to 3,999 (a shuffle of the indexes), so cohorts scatter evenly across the grid instead of filling it in rows. A dot turns on when its bucket is below the current dot count; it pops in over 0.35 s, its radius going 0 → 4.5 → 3px (easeOutBack) and its color settling from #F7FFE0 to its cohort's shade. Within a step, dots turn on in bucket order spread across that step's light-up window, so the count rises smoothly; the user count rises with them.
- The percentage changes by rolling digits (each digit slides up 0.25 s, easeOutCubic). The thumb glides between detents in 0.45 s (easeInOutCubic), the fill following it.
- Sparklines grow continuously from left to right as time passes (their x runs from 0.8 s at the left edge to 5.8 s at the right) and follow the step values with seeded wobble of no more than ±3% of the value; they are flat between steps and never approach their limits.
- Premium: cause and effect you can read (slider, then dots, then charts), cohorts scattered like a real hash rollout, limits drawn at honest scale far from the lines, steady and unhurried steps. Cheap: a giant toggle and confetti, dots filling in rows like a progress bar, metrics that spike for drama, neon glow, a rocket launch.
- Banned: real company names, logos and UI copied from existing products; confetti, rockets and fireworks; glow and bloom; any second accent besides the limit color; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the three panels rise 16px and fade in, 0.1 s apart (easeOutQuart 0.6 s); the unlit dots fade in as a diagonal wave from the top left; the sparklines show their limit lines; the percentage reads "0%" in bone and the toggle reads Off.
- 0.8–1.0s: a cursor (a white arrow with a dark outline) clicks the toggle at 0.9 s: the knob slides (0.25 s), the track turns lime and the label reads "On"; the percentage rolls to "1%" and turns lime; the thumb appears on the 1% detent.
- 1.0–1.4s: the first 40 dots light over 0.3 s; the count reaches 482; the guardrail chip checks for 0.3 s and passes at 1.4 s; log row one appears.
- 2.0–2.6s: the thumb glides to 5%; dots 40–199 light over 0.5 s; the count reaches 2,411; guardrails pass at 2.6 s; log row two.
- 3.0–3.7s: 25%; dots up to 999 light over 0.6 s; 12,053; pass at 3.7 s; log row three.
- 4.0–4.7s: 50%; dots up to 1,999 over 0.6 s; 24,105; pass at 4.7 s; log row four.
- 5.0–5.8s: 100%; dots up to 3,999 over 0.7 s; 48,210; pass at 5.8 s; log row five.
- 6.0s: the poster: 100% in lime, the full grid in its five cohort shades, all three metric cards with steady lines well inside their limits and five step ticks, five log rows, the chip passing.
- 6.4–7.6s: one brightness wave crosses the grid from left to right over 1.2 s (each dot lifts 25% toward #F7FFE0 for 0.3 s as it passes, once); at 6.6 s the grid title crossfades to the final line and a lime "Released" chip joins the "Production" chip.
- 7.6–10.0s: hold.
For other lengths, stretch the time between steps; keep each step's light-up window and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: grain, dots, charts and icons are drawn in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG (the bucket shuffle, the chart wobble, the grain). Each dot's on-time is precomputed once from its bucket and the step windows; its pop is then a pure function of t. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. The grain and the panel frames are painted once at load into an offscreen canvas and composited each frame; the 4,000 dots are drawn as arcs in one pass per color.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the lit dot count matches the step at each pause (40, 200, 1,000, 2,000, 4,000), the lit dots are scattered evenly with no rows or bands, the user count and percentage agree with the step, the thumb sits on the right detent, every metric line stays well inside its limit, the limit color appears only on limit lines, the log rows are in time order, nothing flashes, the 6.0 s frame matches the poster description, and the final frame shows 100%, the full grid, the final line and the Released chip. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…