Keynote Big Number Stats

About this style

Big statistics on a dark stage are a fixture of technology keynotes. Presenters let a single number fill the screen, pause, and say one sentence about it, because a huge numeral with a short label is easier to remember than a chart. The look depends on restraint: one number at a time, heavy type with careful spacing, a thin label and plenty of black. Companies reuse the same sequence in launch videos and investor updates, often ending on a summary line that turns the numbers into a claim. Landing each number on a musical beat gives the sequence its rhythm, and stepping the numbers down into a row at the end lets viewers see them together.

Make a 10-second keynote statistics sequence in SVG: four giant numbers land one per beat on a dark stage, each with a hairline and a thin label beneath it, then each steps down into a row while a two-line summary lands above them.

<inputs>
If I don't give you something, use the default and don't ask.
- Company and event: Parcelo (fictional), route-planning software for delivery fleets, at its keynote "Parcelo Forward 2026" (fictional).
- Stats, in order: "4.2M" · "stops routed every day"; "31%" · "fewer miles per route"; "9 sec" · "to plan a 400-stop day"; "18,400" · "fleets run on Parcelo".
- Summary: "Less driving." / "More delivered."
- Footnote: "Parcelo fleet data, January–September 2026."
- Tempo: 100 BPM, a beat every 0.6 s from 0.3 s (0.3, 0.9, 1.5 …); stats land on every second beat. Length: 10 seconds.
</inputs>

<direction>
- Look: the moment in a keynote when the presenter goes quiet and the numbers do the talking. A deep, warm stage with a soft top light, one huge number at a time with perfect spacing, a hairline, a thin label and nothing else. Black space is the design.
- Palette: stage #0D0C0B; top light, a radial ellipse #1C1A16 centered at (960, −120), 1400 × 900, falling to the stage color; numbers #F5F1E8; units (M, %, sec) saffron #FFB21E; labels #A9A397; the hero hairline #F5F1E8 at 60%; row rules and dividers #3B3731; event lockup and footnote #6E685E.
- Type: Archivo, loaded with its wght and wdth axes. Hero numbers wght 800, wdth 112, 360px, tracking −0.03em, tabular figures; units at the same size and weight, except "sec", which is 45% of the size on the same baseline with a 0.12em gap; labels wght 300, wdth 100, 40px, tracking 0.01em; row numbers wght 800, wdth 112, 112px (their "sec" also at 45%); row labels wght 400, 22px; summary wght 800, wdth 100, 132px, tracking −0.02em; event lockup and footnote wght 500, wdth 112, 18px, uppercase, tracking 0.18em.
- A hero stat: the number centered on x 960 with its baseline at y 560; a 2px hairline at y 612, as wide as the number; the label centered with its baseline at y 680.
- The row: four columns centered on x 360, 760, 1160 and 1560; numbers on a baseline at y 860; labels at y 904, wrapped at 300px; 1px vertical dividers at x 560, 960 and 1360 from y 760 to 920; a 1px rule across x 160–1760 at y 720.
- The summary, centered: "Less driving." on a baseline at y 330 in #F5F1E8, "More delivered." at y 465 in saffron.
- The event lockup at (120, 92): an original mark (a 20px square split by a diagonal from top left to bottom right, the lower half filled saffron, the upper half outlined in #6E685E) and "PARCELO FORWARD 2026". The footnote right-aligned to x 1800 on a baseline at y 1010.
- The slam: a number enters from scale 1.14 about its center to 1.0 in 0.22 s on easeOutExpo, its opacity 0 → 1 over the first 0.1 s, with two ghost copies (<use> of the same text) at scale 1.07 and 16% opacity and 1.14 and 7% that collapse into it over the same 0.22 s; then it settles with a dip to 0.985 and back (0.25 s, easeInOutSine). On impact the hairline draws out from its center (0.32 s, easeOutQuart) and the label rises 14px as it fades in (0.3 s, easeOutCubic, starting 0.08 s after impact).
- The step-down: 0.1 s before the next stat's beat, the current one scales and moves into its row slot in 0.45 s on easeInOutQuint: number from 360px to 112px, label from 40px to 22px, the hairline retracting into its center. The stage is never empty and never crowded.
- The summary lines slam like the numbers but from 1.08, each its own text element, the second on the off-beat.
- Camera: a slow 1.5% push on the hero stat during each hold, as a scale on the stat about its own center, released as it steps down; no rotation, no shake.
- Premium: huge, beautifully spaced numerals, tabular alignment in the row, one accent color used only for the units and the second summary line, crisp hairlines, generous black space, slams that land exactly on the beat. Cheap: odometer counters with motion blur, 3D extruded or chrome numbers, icons beside the stats, confetti, glow, lens flares, a different color for every stat, "trusted by" phrasing, numbers that bounce.
- Banned: purple or blue gradients, glow, lens flares, particles, gradients or shadows on the numbers, counters, emoji, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.3s: the stage and top light fade up from black; the event lockup fades in.
- 0.3–1.4s: "4.2M" slams at 0.3 s; its hairline and label are in by 0.7 s; the push.
- 1.4–2.6s: "4.2M" steps down to column 1 (1.4–1.85 s); "31%" slams at 1.5 s.
- 2.6–3.8s: "31%" steps down to column 2; "9 sec" slams at 2.7 s.
- 3.8–4.6s: "9 sec" steps down to column 3; "18,400" slams at 3.9 s.
- 4.6–5.9s: "18,400" steps down to column 4 (4.6–5.05 s); the dividers draw downward (4.8–5.2 s); "Less driving." slams at 5.1 s; "More delivered." at 5.4 s; the rule above the row draws outward from the center (5.4–5.8 s).
- 6.0s: the hero frame: the two-line summary, the four stats in their row with labels and dividers, and the lockup, all settled.
- 6.0–7.2s: the footnote fades up from 6.4 s; nothing else moves.
- 7.2–9.0s: a 1% push across the whole stage on easeInOutSine.
- 9.0–10.0s: hold.
For other lengths, keep the slams on the beat grid and add or drop stats rather than stretching holds; keep 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: every shape and texture is generated 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. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. 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 and weight before measuring any text and before defining window.seek.
- Engine: one inline SVG with viewBox 0 0 1920 1080. Set the Archivo axes with font-variation-settings on the text elements. Measure each number's width with getComputedTextLength() after the fonts load, to size its hairline and center it; seek sets transforms, opacities and hairline lengths directly.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10) plus 0.5, 1.6 and 5.5: screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that each number slams on its beat (0.3, 1.5, 2.7, 3.9 s) and is fully settled with its hairline and label within 0.5 s; a stepping-down number never collides with the next one or with the summary; "sec" sits on the baseline at 45%; the row's numbers and labels line up across all four columns; saffron appears only on M, %, sec and "More delivered."; nothing glows. At 6.0 s the summary and all four stats are in place and readable; the final frame adds the footnote. 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…