Extraction Loadout

About this style

Extraction shooters send players into a dangerous zone with the gear they choose; they keep what they find only if they reach an exit, and lose their kit if they fall. Grid inventories, where every item takes a footprint of cells, go back to role-playing games such as Diablo (1996), and extraction shooters such as Escape from Tarkov made packing that grid before each raid part of the tension. Color-coded rarity tiers, weight limits and running value totals turn the loadout screen into a moment of planning and nerves. Bungie's Marathon (2026) is the studio's own take on the genre.

Make a 10-second extraction-shooter loadout screen: gear is dragged, rotated and snapped into a grid inventory, rarity colors light up, weight and value counters roll, a contract card ticks off its requirement, then a deploy countdown ends in a hard cut to the drop.

<inputs>
If I don't give you something, use the default and don't ask.
- Operator: TALLIS, level 23. Balance: ₡ 212,480.
- Contract: GH-217 from Greyhollow Salvage (fictional) · Objective "Recover the cradle core from the annex" · Zone Kestrel Flats · Requires Cradle Lock extractor · Raid time 18:00 · Payout ₡ 64,000 · Risk 4 of 5 · Deploy window closes in 00:00:41, counting down.
- Rarity tiers, low to high: SCRAP, ISSUE, SPEC, PROTO, APEX.
- Equipped from the start: Head, HL-2 visor helm (ISSUE, 1.4 kg, ₡ 1,200) · Body, Carapace 3 plate vest (SPEC, 5.8 kg, ₡ 6,900) · Pack, Mule 60 frame pack (ISSUE, 2.2 kg, ₡ 1,100). Start totals 9.4 kg and ₡ 9,200.
- Stowed in order (name, footprint in cells, tier, weight, value): Kite-S survey drone 3×2 PROTO 4.2 kg ₡ 12,800 · Field trauma kit 2×2 SPEC 2.1 kg ₡ 3,400 · Grapple line 3×1, rotated to 1×3, ISSUE 1.8 kg ₡ 950 · Cell pack 2×1 SPEC 1.2 kg ₡ 2,100 · Rations 2×1 SCRAP 1.5 kg ₡ 180 · Signal flares 1×2 ISSUE 0.8 kg ₡ 420 · Annex keycard 1×1 PROTO 0.1 kg ₡ 2,600 · Cradle Lock extractor 2×2 APEX 3.6 kg ₡ 18,500.
- Totals after each item: 13.6 kg ₡ 22,000 · 15.7 kg ₡ 25,400 · 17.5 kg ₡ 26,350 · 18.7 kg ₡ 28,450 · 20.2 kg ₡ 28,630 · 21.0 kg ₡ 29,050 · 21.1 kg ₡ 31,650 · 24.7 kg ₡ 50,150. Capacity 32.0 kg.
- Drop card: "KESTREL FLATS" · "INSERTION 00:00:00" · "OPERATOR TALLIS · SQUAD OF 3" · "GRID K-14"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a game menu built like a piece of equipment: a warm, dark espresso interface of hairline panels and a strict cell grid, gear drawn as cream line-art icons, rarity shown only as colored edges, tags and faint backing tints, and motion that feels physical: items lift, carry weight, snap into whole cells and land. Then one hard cut.
- Palette: background #17110D with a fixed 45° hatch of 1px #1D1510 lines every 6px; panels #221913 with 1px #4A3A2D borders, header strips #2C2119; grid cells #1E1611 with 1px #3B2E24 lines and a 2px inner shadow; ink #EFE3CF, secondary #A8957E, muted #6E5D4C. Rarity: SCRAP ash #9A9183, ISSUE sage #8BBF7A, SPEC glacier #66B8E0, PROTO orchid #C58AF0, APEX saffron #F2B233. Valid placement #8BBF7A at 22%, invalid vermilion #E8553A at 22%; the HEAVY warning in vermilion. The drop card is flat saffron #F2B233 with ink #17110D. Rarity colors stay small (3px top edges, tags, 16% backing tints, outlines), so the espresso ground and cream ink carry the screen and the colors read as information.
- Type: Big Shoulders Display 800–900 for display (the screen title, countdown numerals, the drop card); Tomorrow 500–600 for labels, names and buttons, uppercase where they are labels, tracked 0.06em; IBM Plex Mono 500 for every number, tabular figures. Nothing below 20px.
- Layout on the 1920 × 1080 stage:
  - top bar, y 72–132: "LOADOUT" in Big Shoulders Display 800, 44px, at x 120; "OPERATOR TALLIS · LV 23" in Tomorrow 500, 22px, secondary, at x 420; the balance right-aligned at x 1800;
  - equipment column, x 120–480: three slots from y 180, each 360 × 96 with a 76px icon well, the slot label (HEAD, BODY, PACK) in Tomorrow 600, 20px, muted, the item name in 22px ink and its weight and value in Plex Mono 20px; below them at y 560–880 the counters: WEIGHT as "24.7 / 32.0 KG" in Plex Mono 40px over a 360 × 12 bar (ink fill on #2C2119, a tick at 75%), VALUE as "₡ 50,150" in Plex Mono 40px, and the HEAVY line "HEAVY · SPRINT −6%" that appears when weight passes 75%;
  - backpack grid, x 560–1320, y 200–656: 10 columns × 6 rows of 76px cells, titled "MULE 60 · 10 × 6" in Tomorrow 600, 22px, at y 170, with an "AUTO-STOW" button (140 × 36, 1px border) at its top right and a small "R · ROTATE" key chip beside it;
  - stash tray, x 560–1320, y 720–900: the eight items waiting in a row at 60% scale, labeled "STASH · 8 SELECTED";
  - contract card, x 1400–1800, y 180–700: a saffron 6px top edge, "CONTRACT GH-217" in Big Shoulders Display 800, 40px, the issuer in 20px secondary, then rows label-left and value-right in Tomorrow 500 and Plex Mono, 22px, with Risk as five pips (four filled) and the requirement row with an empty check box; at its foot "DEPLOY WINDOW 00:00:41" in Plex Mono 28px counting down in real seconds;
  - deploy button, x 1400–1800, y 740–836: disabled (muted border) until the requirement is met, then a saffron 2px border with "DEPLOY" in Big Shoulders Display 800, 48px; under it "SQUAD READY 3/3" in 20px.
- Final grid placement (column, row from the top left, footprint): drone (0,0) 3×2; trauma kit (3,0) 2×2; grapple (5,0) 1×3; cell pack (6,0) 2×1; rations (6,1) 2×1; flares (8,0) 1×2; keycard (9,0) 1×1; extractor (3,2) 2×2. The rest stays empty: room for loot.
- Items: each tile fills its footprint minus 4px, its backing #221913 with its rarity at 16%, a 3px rarity edge along its top and a tier tag (Tomorrow 600, 20px) in its corner on tiles of 2 cells or more. The icon is cream line art (2.5px strokes, round joins) drawn in inline SVG as the real object: the drone from above (a body, four arms, four rotor rings, a camera blister); the trauma kit as a hard case with a handle and a pulse line (never a red cross); the grapple as a coil of rope with a three-prong hook; the cell pack as two linked cylinders with terminals and charge bars; rations as a folded pouch beside a bottle; flares as two capped sticks; the keycard with a chip and a stripe reading ANNEX; the extractor as a canister with two clamp rings, side handles and a round window onto a core.
- Drag, the hero motion: on grab the tile lifts (scale 1.06, a soft shadow growing under it, a cream tooltip with its name, tier, weight and value riding 24px above it) and grows from tray scale to full; it follows the cursor with a slight lag and tilts up to 4° against its direction of travel, computed from the cursor path's velocity. Under it, a ghost footprint jumps from cell to cell (whole cells only), green where it fits and vermilion where it overlaps. On drop it settles into its cells in 0.18 s with a 3% squash and recovery, its footprint's cell borders brighten in its rarity and fade back over 0.3 s, a 1px rarity outline traces once around it, and the counters roll to the new totals like odometers (digits slide vertically over 0.3 s, easeOutCubic). Rotation spins a held item 90° in 0.15 s while the R chip lights.
- The cursor: a crisp cream arrow with a 1.5px ink outline, moving on curved paths with easeInOutCubic; a grab closes it into a small hand shape (two drawn states, swapped), and clicks press buttons 2px down for 0.1 s.
- Auto-stow: items fly from the tray to their cells on shallow arcs (0.35 s each, cubic-bezier(0.3, 0, 0.2, 1)), growing to full scale as they go, and land with the same settle.
- The APEX moment: the extractor's tile carries a slow saffron sheen sweeping across its icon; when it lands, a ring of cell-border brightening ripples outward through the grid from its footprint (one ring of cells every 40 ms, out to five rings), the contract's requirement box draws its check, and the deploy button wakes.
- Countdown: numerals 3, 2 and 1 in Big Shoulders Display 900, 360px, cream at 92% with a saffron copy 8px down and right behind each, centered over the grid; each slams in from 1.15× to 1.0 in 0.1 s on cubic-bezier(0.2, 0.9, 0.1, 1), holds, and gives way to the next; a 2px saffron ring around it fills over each second. With each count a group of panels slides off by whole widths on cubic-bezier(0.75, 0, 0.1, 1) and stops dead: the tray down, the equipment column left, the contract card right; the grid dims to 40%.
- The cut: at 8.2 s the frame changes in one frame to the drop card: flat saffron, "KESTREL FLATS" in Big Shoulders Display 900, 220px, ink, left-aligned at x 120 on baseline 600; above it "GREYHOLLOW SALVAGE · CONTRACT GH-217" in Plex Mono 500, 22px; below it "INSERTION 00:00:00" in Plex Mono 500, 40px, counting real seconds, then the operator line and "GRID K-14" in Tomorrow 600, 24px; a 1px ink grid every 120px at 15% and four ink corner ticks at the 120px margins. No transition, no fade and no cut back.
- Premium: gear that has weight when lifted, snaps by whole cells and lands with a settle, rarity used as small precise color, numbers that add up at every step, a countdown that strips the screen, and one clean hard cut. Cheap: a neon tactical HUD on black, glowing outlines on everything, items that fade into place, a slow crossfade to the zone name.
- Banned: guns or other weapons, blood, glow or bloom, neon gradients, hexagon HUD clutter, real game, studio or brand names, logos or layouts copied from any existing game, a red cross symbol, fades on item placement, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: the interface assembles: panel borders trace from their corners (0.3 s each, staggered 60 ms), grid cells pop in a diagonal wave (15 ms per diagonal), the equipped items appear in their slots, the counters read 9.4 / 32.0 KG and ₡ 9,200, the tray tiles slide up 40 ms apart and the contract card slides in from the right by its own width.
- 1.0–1.7s: the cursor grabs the drone (1.05 s), carries it up from the tray on an arc with its tooltip and ghost, and drops it at (0,0) (1.65 s): 13.6 kg, ₡ 22,000.
- 1.7–2.4s: the trauma kit goes to (3,0) (grab 1.85 s, drop 2.35 s): 15.7 kg, ₡ 25,400.
- 2.4–3.1s: the grapple is grabbed lying 3×1 (2.45 s), shows a vermilion ghost against the trauma kit, rotates to 1×3 at 2.7 s with the R chip lit, and drops at (5,0) (3.05 s): 17.5 kg, ₡ 26,350.
- 3.1–4.1s: the cursor clicks AUTO-STOW (3.25 s); the cell pack (lands 3.4 s), rations (3.6 s), flares (3.8 s) and keycard (4.0 s) fly to their cells, the counters stepping through each total to 21.1 kg, ₡ 31,650.
- 4.1–5.4s: the cursor grabs the extractor (4.2 s), its sheen sweeping; its ghost turns vermilion over the grapple (4.5 s), then green at (3,2) (4.7 s); it drops at 4.9 s: the ripple runs through the grid, the counters roll to 24.7 kg and ₡ 50,150, the weight bar passes its 75% tick and HEAVY appears, and the requirement checks at 5.1 s.
- 5.4–6.2s: settled; the deploy button wakes in saffron. The 6.0 s frame is the complete loadout: every item in its cells, every counter final, the contract checked, the window timer at 00:00:35.
- 6.2–6.4s: the cursor moves to DEPLOY and presses it (6.3 s).
- 6.4–8.2s: the countdown: 3 at 6.4 s (the tray slides away), 2 at 7.0 s (the equipment column slides away), 1 at 7.6 s (the contract card slides away), the grid dimming under the numerals.
- 8.2s: the hard cut to the saffron drop card.
- 8.2–10.0s: hold on the drop card; only the insertion clock counts (00:00:01 at 9.2 s).
For other lengths, add or remove auto-stowed items at 0.2 s spacing; keep each drag's settle, the one-second counts and at least 1 s on the drop card.
</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, opacity and text are set from seek, with inline SVG for the item icons, cursor, check, pips and rings; no canvas and no libraries.
- The cursor path is a list of timed waypoints joined by closed-form curves; a held item's position, lag and tilt come from that path and its derivative at t; the grid occupancy, ghost cell and validity are computed from the drag schedule; counters are sums over the items landed by t, rolled from the previous total over 0.3 s. Draw the hatch and the cell grid once with CSS backgrounds.
</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 every item lands exactly on its listed cells with no overlap, each total matches the inputs at every step (ending at 24.7 kg and ₡ 50,150), the grapple shows its rotation, ghosts move by whole cells and turn vermilion only where an item overlaps, rarity color stays on edges, tags and tints, the icons read as the objects named, the countdown shows exactly 3, 2, 1 a second apart, the 6.0 s frame is the complete loadout, the cut to the drop card is a single clean change at 8.2 s with no fade, and no text sits within 60px of an edge. 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…