Number Go Up

About this style

Incremental games, also called idle or clicker games, are built around a number that grows: the player clicks to earn a resource, spends it on producers that earn it automatically, and buys upgrades that multiply the rate, so the count runs through millions and billions into scientific notation. Cookie Clicker, released in a browser in 2013, popularized the form. Most add prestige: resetting progress in exchange for a permanent multiplier, so each new run climbs faster. Their interfaces rely on rolling counters, satisfying purchase feedback and clear readouts of growth.

Make a 10-second incremental-game screen: a counter climbs from a few clicks into scientific notation as producers and upgrades stack up with satisfying pops, then a prestige reset blooms and the multiplier jumps.

<inputs>
If I don't give you something, use the default and don't ask.
- Game: Acorn Ascendant (fictional). Resource: acorns.
- Producers, with the number owned by 6.0 s: Squirrel 42 · Nut Cart 18 · Burrow Bank 9 · Oak Grove 4 · Acorn Engine 1.
- Upgrades, in order: Twin Cheeks (Squirrels ×2) · Greased Axles (Nut Carts ×3) · Deep Vaults (Burrow Banks ×5) · Grove Song (everything ×10) · Engine Tuning (Acorn Engines ×4).
- Cap: 1.00 × 10¹⁵ acorns, "Storehouse full".
- Prestige: "Plant the Great Oak", worth 7 Oak Seeds; each seed adds +100%, so the multiplier goes from ×1 to ×8.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a polished incremental game: one enormous counter that rolls and keeps rolling, cream panels on a deep moss field, a glossy acorn to click, producer rows that tick up with tactile pops, upgrade chips, a log-scale growth chart and a prestige button that fills with gold. Every change is felt: rolls, pops, rings and springs, never jumps.
- Palette: field deep moss #173826 at the edges to #22513A behind the counter; panels cream #F6EFD9 with a 2px #1E2A22 border, 16px radius and a soft shadow 0 12px 30px rgba(8, 24, 14, 0.35); ink #1E2A22, panel secondary #6B6A55, secondary on the field #B9CDB6; counter cream #FFF4D6; tomato #FF5A3C for purchases, the multiplier and +N chips; gold #F5C84A for the cap, the prestige ring and the bloom rings; leaves #7CC26A and #4E9A4A; acorn cap #6B3F22 with scales #8A5530, nut #B8763E with highlight #E2A866 and tip #7A4A26. Tomato and gold pop off moss and cream like a well-made board game.
- Layout:
  - counter, top center: "ACORNS" in Onest 600, 22px, tracked 0.2em, secondary, centered on y 122; the number centered on baseline 280 in Unbounded 700, 120px, counter cream, every digit in its own fixed 0.72em cell so nothing shifts as digits roll; the rate line centered on baseline 336 in Onest 500, 28px, secondary ("+3.21 × 10⁹ per second"); the multiplier tile at x 1610–1760, y 150–250: a tomato rounded square with "×1" in Unbounded 700, 64px, cream;
  - upgrade chips: five 56px rounded squares centered in a row at y 380–436, each an original icon (puffed cheeks, an axle, a vault door, a music leaf, a cog) in ink on cream, empty outlines until bought;
  - acorn clicker, left: an inline SVG acorn 280px tall centered at (440, 560): a cap of overlapping scales drawn as a crosshatch of curved rows, a short stem, a glossy nut with a long highlight and a pointed tip, a soft shadow on the field; it bobs 6px at 0.8 Hz;
  - prestige, center: a round button 220px across centered at (970, 700): cream with a 2px ink border, "Plant the Great Oak" in Onest 700, 24px, two lines, and "+7 Oak Seeds" in Onest 600, 22px, tomato, beneath; a 10px gold progress ring around it that fills with log10(acorns) ÷ 15; "Oak Seeds 0" in Onest 600, 24px, cream, centered on y 860;
  - producers, right: a panel x 1180–1800, y 480–960 with five rows at 92px pitch: a 56px original icon, the name in Onest 700, 26px, "×42 owned" in Onest 500, 22px, panel secondary, and a tomato buy button 150 × 52 showing the next cost in the counter's notation (Onest 700, 22px, cream); rows are locked (40% opacity, a padlock glyph) until first bought;
  - growth chart, bottom left: x 120–760, y 760–1000, on a cream panel: log10(acorns) against time, y gridlines at 0, 5, 10 and 15 labeled 1, 10⁵, 10¹⁰ and 10¹⁵ in Onest 500, 20px; the line in 3px tomato draws exactly up to t; each upgrade marks its knot with a gold dot.
- The count, exact: N is 0 until the clicks: 1 at 0.7 s, 2 at 0.95 s, 3 at 1.2 s; the first Squirrel costs 3 at 1.3 s, so N drops to 0. From then N = 10^L(t) − 1, where L is piecewise linear through the knots (1.3, 0), (1.6, 0.6), (2.6, 3.4), (3.6, 6.6), (4.6, 10.2), (5.4, 13.4), then eases out (easeOutQuad) to exactly 15.0 at 5.9 s and holds at the cap. Each knot is an upgrade, so the slope steps up at every one (2.0, 2.8, 3.2, 3.6, 4.0 per second): the chart shows those kinks. Later costs are tiny next to the count, so they don't dent the curve. The rate line always shows ln(10) · L′(t) · N, so it agrees with the counter.
- Notation: below 1,000,000,000, whole numbers with commas; at 10⁹ (about 4.27 s) the long digit string squashes horizontally to 0 over 0.15 s while "1.00 × 10⁹" springs out of its center: three significant digits, the exponent in a superscript tile 50px tall that rolls like an odometer (0.25 s) each time it steps up.
- Rolling digits: each digit cell holds a vertical strip 0–9 positioned continuously from the digit's fractional value, so digits scroll rather than jump. Any digit scrolling faster than 8 digits per second is drawn as a steady soft band (three stacked digits at 35%) instead of a blur of changes, so nothing flickers.
- Feedback verbs:
  - click: the acorn squashes to 0.92 × 1.06 for 0.08 s and springs back; a "+1" in Onest 700, 32px, tomato, floats up 80px and fades over 0.7 s; 6 small leaf flecks pop out on ballistic arcs;
  - buy: the cursor presses the button (translateY 3px for 0.08 s); the owned count rolls; a "+1" chip pops from the row's icon; the row's icon does a 1.15 scale pop on a spring;
  - upgrade: the chip fills from outline to solid with a 1.3 to 1 spring and a gold ring expands from it; a thin gold ring also leaves the counter (0 to 900px, 0.5 s, fading) and the counter swells 4% for 0.2 s;
  - cap: at 5.9 s the counter turns gold for 0.3 s and settles to cream with "Storehouse full" in Onest 600, 22px, gold, under the rate line; the prestige ring completes and breathes ±6% at 0.8 Hz.
- Cursor: an original rounded arrow, cream with a 2px ink outline and a soft shadow, gliding on curved paths (cubic-bezier(0.4, 0, 0.2, 1), 0.3 s per move) to every click and buy.
- The prestige bloom, at 6.4 s: the counter's digits lift off one by one (30 ms apart) as small acorns that fly on curved paths into the prestige button; the button shrinks to a seed and a seedling grows from it (a stem and two leaves, 0.4 s); 24 oak leaves unfold outward from it on a slow spiral to 520px and fade; three gold rings expand from it 0.12 s apart; the field lightens 8% and stays lighter, a new season. Meanwhile every producer count rolls down to 0, the upgrade chips return to outlines, the chart draws a dashed vertical "Prestige" line and starts a second, steeper line from 0, and Oak Seeds rolls 0 → 7.
- Motion: springs are closed-form damped functions (damping ratio 0.5–0.65); entrances rise 16px and fade over 0.4 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: one huge counter that never jumps, numbers that agree with the rate and the chart, purchases that feel tactile, a prestige that visibly resets everything and pays back a bigger multiplier. Cheap: a number that flickers through random digits, coins and confetti everywhere, flashing BUY buttons, a casino look.
Banned: real games, cookies, coins with currency symbols, slot machines or gambling imagery, confetti showers, flickering digits, flashing buttons, gradients on the panels, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the moss field; the panels rise in 80 ms apart; the counter reads 0; the acorn bobs.
- 0.6–1.6s: the cursor clicks the acorn three times (0.7, 0.95, 1.2 s) with +1 floaters; it buys the first Squirrel (1.3 s) and the count restarts from 0; Twin Cheeks pops (1.6 s).
- 1.6–4.2s: the count climbs; Nut Cart unlocks and is bought (2.0 s), Burrow Bank (2.8 s), Oak Grove (3.3 s), with more buys between them as owned counts roll toward their totals; Greased Axles (2.6 s) and Deep Vaults (3.6 s) pop with their rings; the chart kinks at each.
- 4.2–5.9s: at about 4.27 s the digits collapse into "1.00 × 10⁹" and the exponent starts rolling; Acorn Engine is bought and Grove Song pops (4.6 s); Engine Tuning (5.4 s); the exponent rolls to 15 and the cap lands at 5.9 s.
- 5.9–6.4s: the 6.0 s frame is complete: "1.00 × 10¹⁵" in gold-settling cream, "Storehouse full", all five producer rows at their totals, all five chips solid, the chart's line at the top, the prestige ring full; the cursor glides to the prestige button.
- 6.4–7.4s: the click and the bloom: digits fly in, the seedling grows, leaves and rings unfold; everything resets; Oak Seeds rolls to 7.
- 7.4–8.6s: the multiplier slams from ×1 to ×8 (scale 1.3 to 1 in 0.12 s, a 4% squash, a tomato ring); the count restarts at 0 and climbs on L from 0 at 7.5 s to 3.4 at 8.6 s (about 2,511), the cursor buying two Squirrels on the way; the second chart line rises far steeper than the first.
- 8.6–10.0s: hold: L climbs slowly at 0.1 per second, so only the counter's last digits roll; the acorn bobs, the seedling sways.
For other lengths, stretch the climb between upgrades; keep the cap landing just before the 6.0 s frame, the bloom 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: 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 before defining window.seek.
- Engine: HTML/CSS: absolutely positioned elements whose transforms, sizes, text and opacity are set from seek, with inline SVG for the acorn, icons, cursor, chart, leaves and rings; no canvas and no other libraries.
- N, the rate, the notation and every digit strip's position are computed from L(t) each seek; the chart's polyline is rebuilt from L sampled every 1/60 s up to t; buy, click and upgrade times come from a fixed schedule, and springs, floaters and leaf paths are closed-form functions of the time since each event.
</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 the counter never jumps or flickers (digits scroll, fast ones as steady bands); the switch to scientific notation reads clearly at 10⁹; the rate line matches the counter; the chart's kinks line up with the upgrade times; owned counts end at 42, 18, 9, 4 and 1 before the prestige and roll to 0 after it; Oak Seeds ends at 7 and the multiplier at ×8; all text is at least 20px and stays inside its panel; the 6.0 s and final frames are complete compositions. 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…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

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…