[object Object]

← back to Ticket System

marketing: Four Horsemen pass — branded Fleet Office hero card (21st.dev Magic concept + local render)

8db70dc3c533b0936b31f0ea8e702818fb454aff · 2026-07-27 08:24:24 -0700 · Steve Abrams

21st.dev Magic (the live horseman) generated 2 concept directions (Command Deck /
Cinematic Launch) at the build URL; final branded hero rendered locally (Inter/mono,
neon ambience, browser-framed live screenshot) since Canva/Figma/Paper aren't authed
on this box. marketing/ holds hero.html + assets + render script.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

Diff

commit 8db70dc3c533b0936b31f0ea8e702818fb454aff
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jul 27 08:24:24 2026 -0700

    marketing: Four Horsemen pass — branded Fleet Office hero card (21st.dev Magic concept + local render)
    
    21st.dev Magic (the live horseman) generated 2 concept directions (Command Deck /
    Cinematic Launch) at the build URL; final branded hero rendered locally (Inter/mono,
    neon ambience, browser-framed live screenshot) since Canva/Figma/Paper aren't authed
    on this box. marketing/ holds hero.html + assets + render script.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 marketing/fleet-office-hero.png | Bin 0 -> 1923550 bytes
 marketing/hero.html             |  86 ++++++++++++++++++++++++++++++++++++++++
 marketing/office-view.png       | Bin 0 -> 495856 bytes
 marketing/render-hero.js        |   9 +++++
 4 files changed, 95 insertions(+)

diff --git a/marketing/fleet-office-hero.png b/marketing/fleet-office-hero.png
new file mode 100644
index 0000000..a5aa1b4
Binary files /dev/null and b/marketing/fleet-office-hero.png differ
diff --git a/marketing/hero.html b/marketing/hero.html
new file mode 100644
index 0000000..4977b8f
--- /dev/null
+++ b/marketing/hero.html
@@ -0,0 +1,86 @@
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
+<style>
+  *{margin:0;box-sizing:border-box}
+  body{width:1600px;height:1000px;background:#06070c;overflow:hidden;font-family:'Inter',sans-serif;
+       color:#eef1f7;position:relative;-webkit-font-smoothing:antialiased}
+  .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
+  /* neon ambience */
+  .glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
+  .g1{width:900px;height:900px;left:640px;top:-160px;background:radial-gradient(circle,#1e5fae,transparent 60%)}
+  .g2{width:700px;height:700px;left:-160px;top:520px;background:radial-gradient(circle,#6a3fb0,transparent 60%)}
+  .grain{position:absolute;inset:0;background:
+     linear-gradient(#06070c00,#06070c) ,radial-gradient(circle at 50% 0,#0b1220,transparent 55%)}
+  /* top bar */
+  .top{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;gap:14px;
+       padding:0 46px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(9,11,17,.6);backdrop-filter:blur(6px)}
+  .brand{font-weight:800;letter-spacing:.26em;font-size:15px}.brand i{color:#5aa9f0;font-style:normal;margin-right:9px;text-shadow:0 0 16px #5aa9f0}
+  .pills{display:flex;gap:8px;margin-left:auto}
+  .pill{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:8px;background:rgba(255,255,255,.04);
+        border:1px solid rgba(255,255,255,.09);font-size:11px;color:#7f8798;text-transform:uppercase;letter-spacing:.08em}
+  .pill i{width:7px;height:7px;border-radius:2px;box-shadow:0 0 8px currentColor}
+  .pill b{font-family:'JetBrains Mono',monospace;font-size:14px;color:#fff}
+  /* layout */
+  .wrap{position:absolute;top:64px;left:0;right:0;bottom:0;display:grid;grid-template-columns:560px 1fr;align-items:center}
+  .left{padding:0 20px 0 56px}
+  .kicker{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.24em;color:#5aa9f0;text-transform:uppercase;margin-bottom:22px}
+  h1{font-size:62px;line-height:1.02;font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
+  h1 .a{background:linear-gradient(100deg,#8fc4ff,#c9a4f2);-webkit-background-clip:text;background-clip:text;color:transparent}
+  .sub{font-size:19px;line-height:1.5;color:#aab4c6;max-width:440px;margin-bottom:30px}
+  .chips{display:flex;flex-wrap:wrap;gap:9px;max-width:470px;margin-bottom:34px}
+  .chip{font-size:12.5px;padding:7px 13px;border-radius:20px;border:1px solid rgba(255,255,255,.12);
+        background:rgba(255,255,255,.03);color:#c2c9d6}
+  .chip b{color:#5aa9f0;font-weight:600}
+  .cta{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:11px;font-size:16px;font-weight:600;
+       color:#06070c;background:linear-gradient(100deg,#5aa9f0,#8fc4ff);box-shadow:0 8px 30px #5aa9f055}
+  .url{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#586074}
+  /* browser frame */
+  .right{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
+  .frame{width:940px;transform:perspective(1800px) rotateY(-11deg) rotateX(3deg);border-radius:14px;overflow:hidden;
+         border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 120px #000c,0 0 90px #2a5fae44}
+  .bar{height:38px;background:#0d1017;display:flex;align-items:center;gap:8px;padding:0 15px;border-bottom:1px solid rgba(255,255,255,.07)}
+  .bar .d{width:11px;height:11px;border-radius:50%}
+  .bar .u{margin-left:14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#6b7486;
+          background:#070910;padding:4px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.06)}
+  .frame img{display:block;width:100%}
+  .foot{position:absolute;bottom:26px;left:56px;font-size:12.5px;color:#586074}
+  .foot b{color:#7f8798}
+</style></head>
+<body>
+  <div class="glow g1"></div><div class="glow g2"></div><div class="grain"></div>
+  <div class="top">
+    <span class="brand"><i>◆</i>FLEET OFFICE</span>
+    <div class="pills">
+      <span class="pill"><i style="background:#5aa9f0;color:#5aa9f0"></i>doing <b>10</b></span>
+      <span class="pill"><i style="background:#ff5f6d;color:#ff5f6d"></i>blocked <b>16</b></span>
+      <span class="pill"><i style="background:#34d9a0;color:#34d9a0"></i>done <b>39</b></span>
+      <span class="pill"><i style="background:#c9a4f2;color:#c9a4f2"></i>agents <b>48</b></span>
+      <span class="pill"><i style="background:#c9a4f2;color:#c9a4f2"></i>DMs <b>8</b></span>
+    </div>
+  </div>
+  <div class="wrap">
+    <div class="left">
+      <div class="kicker">Live · 3D · Real-time</div>
+      <h1>Every agent action,<br><span class="a">a living floor.</span></h1>
+      <div class="sub">A top-down 3D command center over your ticket system. Rooms are tickets, avatars are agents, and messages fly between them — in real time.</div>
+      <div class="chips">
+        <span class="chip"><b>Rooms</b> = tickets</span>
+        <span class="chip"><b>Avatars</b> = agents</span>
+        <span class="chip"><b>4 lanes</b> = kanban</span>
+        <span class="chip"><b>DM</b> light-streams</span>
+        <span class="chip">4s live sync</span>
+      </div>
+      <span class="cta">Enter the floor →</span>
+      <div class="url">▸ 127.0.0.1:9794/office</div>
+    </div>
+    <div class="right">
+      <div class="frame">
+        <div class="bar"><span class="d" style="background:#ff5f57"></span><span class="d" style="background:#febc2e"></span><span class="d" style="background:#28c840"></span>
+          <span class="u">127.0.0.1:9794/office</span></div>
+        <img src="office-view.png" alt="Fleet Office">
+      </div>
+    </div>
+  </div>
+  <div class="foot"><b>FLEET OFFICE</b> — WebGL / Three.js · reads the live ticket store · $0 local</div>
+</body></html>
diff --git a/marketing/office-view.png b/marketing/office-view.png
new file mode 100644
index 0000000..31171ac
Binary files /dev/null and b/marketing/office-view.png differ
diff --git a/marketing/render-hero.js b/marketing/render-hero.js
new file mode 100644
index 0000000..42111a4
--- /dev/null
+++ b/marketing/render-hero.js
@@ -0,0 +1,9 @@
+const { chromium } = require('/Users/macstudio3/Projects/animals/node_modules/playwright');
+(async () => {
+  const b = await chromium.launch({ headless:true });
+  const p = await b.newPage({ viewport:{width:1600,height:1000}, deviceScaleFactor:2 });
+  await p.goto('file:///tmp/hero.html', { waitUntil:'networkidle', timeout:20000 });
+  await p.waitForTimeout(1200); // fonts + webfont layout settle
+  await p.screenshot({ path:'/tmp/fleet-office-hero.png' });
+  await b.close(); console.log('OK');
+})().catch(e=>{console.error('FATAL',e);process.exit(1)});

← 6431278 office: professional polish pass (design-agent driven) — Int  ·  back to Ticket System  ·  marketing: Photoshop (5th horseman) color-graded Fleet Offic 8139690 →