Roguelike Boon Choice

About this style

Roguelikes take their name from Rogue (1980), a dungeon game in which every run is generated fresh and death sends the player back to the start. Modern action roguelikes such as Hades (2020) and deck-builders such as Slay the Spire (2019) break each run into rooms that end in a reward screen: a choice of usually three upgrades, each marked by a rarity color, from which the player builds a different character every time. The screens borrow from collectible card frames, relic and altar imagery and game shop interfaces. Designers make them feel weighty with glow by rarity, a decisive selection and a clear readout of what changed in the build.

Make a 10-second roguelike reward screen: three ornate upgrade cards rise out of the dark glowing by rarity, one is chosen with a satisfying press, the other two shatter, and the chosen card flies into the player's build panel as its stats update.

<inputs>
If I don't give you something, use the default and don't ask.
- Game: Saltgrave (fictional), a descending action roguelike.
- Patron: Mother Wick, Keeper of Lamps (fictional).
- Header: "MOTHER WICK OFFERS A GIFT", with "Choose one." beneath it; after the choice: "Wickfire Brand is yours."
- Cards, left to right (rarity · name · effect · slot):
  1. Common · Tallow Edge · "Your strikes deal +4 damage." · Strike
  2. Rare · Smoke Step · "Your dash leaves smoke that slows foes by 30% for 2 s." · Dash
  3. Mythic · Wickfire Brand · "Your strikes ignite foes: 6 burn damage per second for 4 s." · Strike
- Chosen: Wickfire Brand.
- Build panel before: Strike empty · Special empty · Cast: Moth Swarm (Common) · Dash: Tide Skip (Rare) · Call empty. Stats: Attack 24 · Speed 1.75 hits/s · Burn 0/s · Est. damage per second 42 · Gifts held 2.
- After: Strike: Wickfire Brand (Mythic) · Burn 6/s · Est. damage per second 48 · Gifts held 3. (24 × 1.75 = 42, plus 6 = 48.)
- Room line: "Chamber 7 of 24"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a premium action-roguelike reward screen: three tall relic cards framed in carved filigree and gilt stand in a smoky crypt, each glowing by its rarity; a choice that lands with weight; the losers crack into glassy shards that carry their own art; the winner flies into a crisp build panel. Painterly dark behind, crisp UI in front.
- Palette, deliberately not red, black and gold: room night verdigris #0B1F24 at the edges lifting to #15363A at the center, with drifting smoke #1E4448 at 30%; carved stone arch #0F2A2E with lit edges #2D5A5A; card lacquer #13262A with a fine diagonal grain #172E33; filigree antique gold #C9A45C, highlight #F3DDA0, shadow #7A5E2C; rarities: Common pewter #A9B4B8 (no glow, a cool sheen), Rare jade #3BE0B0, Mythic ember coral #FF7A4D with a hot core #FFD9A8; text cream #F4ECDC, secondary #A9BDB8; numbers in each card's rarity color; panel #0E1B1E at 88% with a 1px #2D5A5A border. Coral and jade against the cool verdigris room are the complementary pair: the mythic reads hottest because everything around it is cool.
- Layout: three cards 360 × 560, at x 290–650, 670–1030 and 1050–1410, y 250–810 (centers x 470, 850, 1230); the header centered at x 850 on baseline 150 with "Choose one." on baseline 196; the build panel at x 1480–1800, y 200–880. A carved stone arch (an SVG ogee arch with two pilasters and a keystone glyph) frames the three cards from x 230 to 1470, y 150 to 900, at 40% so it never competes.
- Card construction, all inline SVG:
  - frame: an ogee-topped arch outline (straight sides, the top rising to a point at the center) with a 6px gilt border, a 2px inner gilt rule 10px inside it, and bevel shading on the border (a 1px highlight line on the upper-left edges, a 1px shadow line on the lower-right);
  - corner filigree: four mirrored ornaments, each two C-scrolls and an acanthus leaf from cubic Béziers, stroked 3px gilt with a 1px highlight offset up-left;
  - gem: a faceted oval gem 46 × 60 in a gilt bezel at the apex, cut into six facet polygons in three tints of the rarity color, with a white specular tick;
  - roundel: a 160px dark disc with a gilt ring at the card's upper middle holding an original line-art emblem in the rarity color: Tallow Edge, a candle crossed by a short blade; Smoke Step, three curling smoke strokes rising off a footprint; Wickfire Brand, a flame inside a ring of eight rays;
  - title in IM Fell English SC 400, 40px, cream, centered; beneath it a ribbon banner with notched ends carrying the rarity name in Marcellus SC 400, 20px, tracked 0.2em, in the rarity color;
  - effect text in Spectral 500, 24px, cream at 92%, centered, at most 300px wide, its numbers in Spectral 700 in the rarity color;
  - footer: the slot name in Marcellus SC 400, 20px, secondary, between two short gilt rules, with a level pip "I".
- Glow by rarity: Common has no glow, only a cool sheen band crossing its gilt every 4 s. Rare has a jade outer glow (feGaussianBlur 18px of the frame at 55%) breathing ±15% at 0.5 Hz, and 8 jade motes rising past it. Mythic has a coral glow (28px at 75%) breathing ±15% at 0.6 Hz, 24 ember motes rising from its lower edge on curling paths, and gem facets that brighten in turn around the gem once every 2 s. Nothing breathes faster than 1 Hz.
- Motion verbs:
  - rise: a card rises from 380px below, rotated 6° and at scale 0.92, on a damped spring (damping ratio 0.55, about 0.7 s), its glow igniting as it lands;
  - hover: a selection mark (two original gilt brackets that hug the card's sides) glides to a card in 0.25 s on cubic-bezier(0.3, 0, 0.2, 1); the hovered card lifts 24px, scales to 1.04, tilts toward the brackets in 3D (rotateY up to 6°, CSS perspective 1600px on its wrapper) and its glow rises 25%; the other two dim to 80%;
  - press: the chosen card dips to 0.97 in 0.08 s and springs to 1.06; a thin gilt ring expands from its center (0 to 420px, 0.4 s, fading);
  - shatter: each other card is pre-cut at load into 26 Voronoi cells (seeded points, each cell the card outline clipped by bisector half-planes); hairline cream cracks draw along the cell edges in 0.12 s, then every shard flies on a closed-form ballistic path (outward from the chosen card with an upward kick, gravity 2400 px/s², spin up to 360°/s, scale 1 to 0.6) and fades over 0.7 s. Each shard is a group clipped by its cell polygon around a full copy of its card, so it carries its own piece of the art, with a 1.5px rim in its rarity color;
  - fly: the chosen card shrinks to a 64px emblem on a quadratic Bézier path to the Strike slot over 0.6 s on cubic-bezier(0.5, 0, 0.2, 1), trailing 12 coral motes, and seats with a 1.2 to 1 pop and a coral ring.
- Build panel: "YOUR BUILD" in Marcellus SC 400, 24px, tracked 0.16em; the room line in Spectral 400 italic, 22px, secondary; five slot rows at 92px pitch from y 300, each a 64px ring (dashed secondary when empty, solid in the gift's rarity color when filled, with its emblem inside), the slot name in Marcellus SC 20px secondary and the gift's name in Spectral 600, 24px, cream; then a 1px rule and the stats in Spectral 500, 22px, labels left and values right-aligned at x 1770, values in Spectral SC 600 with tabular figures. Changed values roll like an odometer over 0.4 s and get a coral underline that sweeps in.
- Room: the smoke is two layers of seeded soft noise drifting left at 10 and 18px/s; a faint pool of light on the floor under the cards; the keystone glyph in the arch lights coral at the end, as if a door has opened.
- Premium: cards that look carved and gilded, glow that tells rarity at a glance, a choice that lands with weight, shards that carry the card's own art, numbers that add up. Cheap: flat rectangles with colored borders, the same glow on all three, cards that just fade out, a panel that changes without showing what changed.
Banned: real game names, gods, characters, logos or card layouts copied from any game; a red, black and gold scheme; lens flares; bloom over the text; screen shake; white flashes; more than three cards; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the room fades up from #0B1F24, smoke drifting; the arch emerges; the header fades in as its tracking closes from 0.3em to 0.2em.
- 0.8–2.2s: the cards rise: Common at 0.9 s, Rare at 1.08 s, Mythic at 1.26 s, each glow igniting on landing; "Choose one." fades in (1.6 s); the build panel slides in from the right (1.9–2.3 s).
- 2.2–4.4s: the brackets appear on Tallow Edge (2.4 s), move to Smoke Step (3.1 s) and to Wickfire Brand (3.8 s); each hovered card lifts, tilts and glows.
- 4.4–5.4s: the press on Wickfire Brand (4.5 s) and its ring; the other two crack (4.6 s) and shatter (4.7–5.4 s), shards falling out of frame below and fading.
- 5.4–6.2s: the chosen card glides to the center (x 850) and holds at scale 1.1, embers rising, glow breathing; the header changes to "Wickfire Brand is yours." (5.5 s). At 6.0 s: the mythic card alone and whole at center, the empty Strike slot in the panel ringed in coral, every shard gone: a complete composition.
- 6.2–7.0s: the card flies into the Strike slot (6.2–6.8 s) and seats with its ring.
- 7.0–8.4s: the slot's name types on; Burn rolls 0 → 6/s, Est. damage per second 42 → 48, Gifts held 2 → 3, each 0.15 s apart with its underline; the keystone glyph lights coral (7.8 s).
- 8.4–10.0s: hold: smoke drifting, the seated gift's ring breathing, motes rising.
For other lengths, stretch the hover beat; keep the rise, the press, the shatter 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: inline SVG in HTML: every card part, ornament, shard and ring is an SVG element whose attributes and transforms are set from seek; glows are SVG filters; text is HTML or SVG text; no canvas and no other libraries.
- The Voronoi cells, shard velocities, smoke noise tiles and mote paths are computed once at load from a seeded PRNG; springs, ballistic paths and odometers are closed-form functions of the time since each element's start; the 3D tilt is a CSS transform set from seek.
</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 each card reads as a carved, gilt-framed relic with filigree, a gem, an emblem roundel and a rarity ribbon; the three rarities read apart at a glance (no glow, jade, coral); each shard shows its own piece of the card's art; the numbers add up (24 × 1.75 = 42, plus 6 = 48); all card text is at least 20px and readable; the 6.0 s frame and the final frame are both complete; nothing flashes, and no breathing glow runs faster than 1 Hz. 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…