PROFILE-MOCK / DESIGN INDEX / 25 EXPLORATIONS

OPERATIVE_DOSSIER

Twenty parallel takes on the operative profile page — the surface you land on at /u/<username>. Each one runs as a self-contained HTML file with the same canonical operative (swamplord_42, tier 12, 384,210). Click through to compare how each design treats identity, score, trajectory, output, and badges.

// goal: make the page feel like home — a HUD worth landing on
// goal: real graphs from 1,100 days of telemetry — not just stat tiles
// goal: one coherent picture, not seven stacked sections

01 Designs 20 / 20

// designs 01–20 — open exploration

01 Trajectory HUD 1,100-day cumulative-score area chart with horizontal tier rules, a hatched sabbatical band, and a glowing NOW reticle on the SWAMP MARSHAL line. Identity orbits the chart. score-first area-chart annotated 02 Constellation Eleven badges as a hand-drawn SVG starfield, connected by tier-colored filaments. Operative is the brightest magenta node at center; everything else is restrained side panel. badge-led starfield svg-graph 03 Terminal Dossier A single living `swamp operative show --verbose` session. Boot lines reveal identity field-by-field; charts are block-character ASCII. JetBrains Mono throughout. tty-native ascii-art boot-sequence 04 Spec Sheet Operative as a precision component datasheet — headline ratings, parts table for extensions, dot-matrix cadence, achievement ledger, signed-off footer. datasheet tabular tnum 05 Cardstack Asymmetric 12-col grid of overlapping panels with thin cyan-shadow offsets. Hero score/trajectory card anchors; honors, output, cadence, writings sit askew. collage asymmetric workspace 06 Field Map Hand-drawn topographic SVG — hatched collective territories, extension outposts sized by pulls, four supply-line uplinks, centered operative crosshair. Inset altimeter chart. cartographic topography field-recon 07 Timeline Spine A glowing green-to-cyan vertical axis runs the full page from the identity origin to a pulsing NOW end-cap. Every life event hangs off the spine; persistent right rail. vertical-axis chronological persistent-rail 08 Tier Runway Fifteen-stop horizontal runway with tier 12 highlighted and tier 15 glimmering at the horizon. Exact 384,210 / 500,000 — 76.842% progress bar beneath. progression journey milestones 09 Three-Panel Console Desktop ops console — 260px identity, flex work, 300px output. Trajectory chart, 30-bucket composition strip, lifetime mix donut, streaming activity log. Stacks on mobile. 3-pane desktop-first ops-console 10 Year-View Hero Four stacked annual heatmaps (2023–2026) take the upper half. Identity collapses to one tight line; stats and supporting trim sit beneath. Heatmap IS the page. heatmap-led multi-year cadence-first 11 Receipt Tape A 480px thermal "OPERATIVE RECEIPT" with zigzag-torn edges, dotted rules, line-item badges, barcode, and a rotated green PAID·TIER 12 stamp. printed-tape itemized charm 12 Polar Composition 365-day SVG sunburst — inner month ring stacked by event-type ratio, outer wedges colored by each day's dominant type. Username, tier, and score at the center. radial event-mix sunburst 13 Score Hero A colossal Orbitron 384,210 in the upper third. SWAMP MARSHAL band, "TOP 1.1% OF 1,248", sparkline. Everything else demoted to compact footnotes. number-first percentile maximalist 14 Live Stream A dominant central EXECUTION STREAM walks back day-by-day with synthesized event chips, badge-earned highlights, extension pushes, and writings inline. activity-feed chronological event-typed 15 Magazine Spread Editorial layout — centered masthead, serif italic deck, two-column justified body with drop cap, sidebar score plate, Recent Releases table, Field Notes column. editorial portfolio print-vibe 16 Workshop Frame the operative through what they make. 2-column grid of artifact cards — each extension with namespace, version, sparkline, pulls, score, grade pill. output-first artifacts maker-portrait 17 Network Hub Inline-SVG topology — self-node center, three collective nodes sized by membership, two identity satellites, pulls-weighted extension cluster, role-labeled edges. network-graph relationships topology 18 Pulse 365-day ECG waveform with QRS-shaped daily-score spikes and a green-glow band over the current 47-day streak. Vital-signs row beneath, single heartbeat dot. waveform rhythm patient-monitor 19 Mission Briefing Classified field file with stamped headers and eight ruled sections — SUBJECT, CLEARANCE, AFFILIATIONS, DEPLOYMENTS, FIELD REPORTS, RISK PROFILE, HISTORY. classified dossier ops-doc 20 Strata A core sample — horizontal quarterly strata (newest top), phase-textured backgrounds for ramp/plateau/climb/dip/recovery, badges and extensions deposited per quarter. geological longitudinal core-sample
02 Character Sheets 5 / 5

// designs 21–25 — cyberpunk RPG character sheets, distinct game lineages

21 Cyberpunk 2020 HUD Hex-framed core attributes (VEL/CAD/RIG/REA/INF/CRA), inline-SVG hex-ring radar, HP/AP/REP/XP vitals, equipment slots for extensions, badge inventory by rarity, party + quest log. stat-block hex-frame radar 22 Tabletop Sheet Cyberpunk RED paper-form facsimile — INT/REF/DEX/TECH/COOL/WILL/LUCK/MOVE/BODY/EMP fields, SKILLS, WEAPONS table, LIFEPATH prose. Photocopy-of-a-sheet vibe. paper-form cyberpunk-red tabletop 23 S.P.E.C.I.A.L. Pip-Boy seven-attribute sheet (Stream/Perception/Endurance/Craft/Intellect/Agency/Legacy) with hand-drawn mascot icons, pip indicators, derived stats, perks, holotape inventory. pip-boy fallout mascot-icons 24 Matrix Runner Shadowrun decker — 9 attributes in a 3×3, condition-monitor boxes, initiative + edge dice, programs as cyberdeck slots, contacts, qualities. Dense and grid-driven. shadowrun decker condition-monitor 25 Thought Cabinet Disco-Elysium 2×2 quadrants of skills (Intellect/Psyche/Physique/Motorics) — each whispers a single-line voice. Badges as thoughts to internalize. Literary, melancholy. literary disco-elysium skill-voices
Brief Every design uses the same canonical operative dataset (_DATA.md) and answers the same brief (_BRIEF.md). Compare like-for-like: which one feels most like home? Which one would you actually want to land on? Which graph earns its weight on the page?