# Sci-fi loadout screen > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The pre-mission loadout screen of a sci-fi shooter. The player picks a slot (Primary, Sidearm, Module), browses what is in the armoury, and sees each piece of gear as a cyan wireframe hologram on a turntable, with leader-line callouts and an overall-length dimension line like a technical drawing. Every stat is a segmented bar that compares the previewed item with the equipped one: the shared part is pale, the gain is solid cyan, the loss is hatched coral. Panels have 14px cut corners and a 1px edge. The neon is held to one cyan, used for the hologram, the selection and the single primary button; everything else is graphite. The detail worth copying: the hologram is generated from six numbers per weapon (body, barrel, stock, magazine, optic), so a new gun is one line of data, not a new drawing. ## Reference behaviour 1. Initial state: Primary tab selected. Halcyon AR-7 is equipped; Mire Lance (rail rifle, tier IV) is previewed, so every stat row already shows a delta (Damage 118, +76; Fire rate 40 rpm, −680). 2. Click a gear card in the left list: it becomes the preview (`aria-pressed="true"`, cyan 1px edge, a dark teal wash fading left to right). The hologram parts redraw from 0 over 700ms while the whole drawing flickers twice over 380ms; bars slide to their new widths over 420ms; the title, class line and description swap. 3. Click a slot tab: the list rebuilds with that slot's gear and the preview jumps to the item already equipped in that slot (no deltas, button disabled and reading "Equipped"). 4. Stat rows: value with unit, delta on the right (cyan when better, coral when worse, grey 0 when equal). For Cooldown, lower is better, so a drop reads cyan and its bar segment is hatched cyan. 5. Attachment tiles under the stats show the item's three parts (Optic / Rail / Cell, or Sight / Barrel / Mag). The same three appear as callouts on the hologram. 6. Frame load reads "29.0 to 33.5 / 40 kg" when the preview changes the weight, with a bar that shows the shared load pale and the change as a segment; it reads one number when nothing changes. 7. The primary button reads "Equip to primary" with the scrip cost (2,400 scrip) or "Owned". Clicking it equips, updates the Current loadout card (bottom left) and the Equipped tag in the list, and disables itself. 8. The hologram rocks between −10° and +10° on Y over 9s, alternate, forever. It is the only loop on the screen. ## Structure ``` 1280 × 800, padding 22 28 26 ┌──────────────────────────────────────────────────────────────────────────┐ │ KESTREL-4 [PRIMARY][SIDEARM][MODULE] SCRIP 8,240│ │ Frame Vanta Mk II · Hangar 3 │ ├─ 1px rule ───────────────────────────────────────────────────────────────┤ │ 4 IN ARMOURY TIER │ ┌ stage (cut 22) ─────────────────┐ │ ┌ PERFORMANCE ┐│ │ ┌ card ────── III ┐│ │ RAIL RIFLE · TIER IV │ │ │ DAMAGE 118 +76│ │ │ name / class ││ │ MIRE LANCE (44px wide caps) │ │ │ ▬▬▬▬████▯▯ ││ │ │ thumbnail 34px ││ │ description │ │ │ × 6 rows ││ │ └─────────────────┘│ │ OPTIC ─╮ ╭─ RAIL │ │ └───────────────┘│ │ × 4, gap 10 │ │ ▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭▭ │ │ [OPTIC][RAIL][CELL]│ │ │ │ turntable ellipses ╰─ CELL │ │ ┌ FRAME LOAD ──┐│ │ ┌ CURRENT LOADOUT ┐│ │ |──── 930 MM OVERALL ────| │ │ └──────────────┘│ │ │ primary sidearm ││ │ perspective grid floor │ │ │ │ └─────────────────┘│ └──────────────────────────────────┘ │ [EQUIP TO PRIMARY]│ └──────────────────────────────────────────────────────────────────────────┘ columns 296 | minmax(0,1fr) | 320, gap 18 22; second row fills the height ``` - `.app`: CSS grid, two rows (`auto`, `minmax(0,1fr)`), `height:100%`. - `
`: callsign block, `role="tablist"` of three parallelogram tabs (`clip-path` with 8px slant), scrip readout. - List: `
` with a label row, cards as `