Design bundle (2): current source of truth — Scanner States + blue-boundary law
Reference material only, ZERO product code. Adds Vyndr Scanner States.dc.html (S6/S7 spec) + HANDOFF Session 3 blue-boundary-channel law (#8FB2DE = the honesty channel: priced-out / no-market / line-not-priced). This is the diff baseline for the design-migration arc. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VCNgGSt5qvcLxaeQqa7Zpj
This commit is contained in:
@@ -1,5 +1,11 @@
|
||||
# VYNDR VISUAL SYSTEM — CODE HANDOFF
|
||||
|
||||
## SESSION 3 (Jul 22) — Scanner surfaces S6 + S7
|
||||
`Vyndr Scanner States.dc.html` — spec for the two scanner states Code flagged missing (converges at the scanner-nudge build order).
|
||||
- **S6 scan empty (marketless scan)**: read-card frame, ZERO market numbers (no empty triplet frame — it doesn't render), chip `NO MARKET` in the blue boundary channel (`rgba(106,147,200,.12)` bg / `.34` border / text `#8FB2DE` — same tokens as PRICED OUT), dashed blue void box (refusal frame shape, blue not red: nothing failed), copy "no live market for this line" (never "coming soon"). Path forward built in: green primary CTA to tonight's board with live priced-prop count; player-specific path (`HERBERT · 3 PRICED PROPS ▸`) leads when the player is on the slate. Mobile 390: both paths 44px.
|
||||
- **S7 priced-line display (the nudge)**: strip under the scan field showing ONLY genuinely-priced lines per exact player+stat. Case A `NONE PRICED` is the DEFAULT/common case — quiet dashed blue box + "we price these for [player]" stat chips (with amber fair previews). Case B priced: 44px rows `o 27.5 · BOOK −114 · ◆ FAIR −105 · OPEN READ ▸`, one tap to the real triplet. Case C off-slate: text-tokens-only fact line, no blue, no chips, stops. Typed-line mismatch: query text preserved, `o 30.5 ISN'T PRICED` blue fact line (not an error), nearest priced line = same player+stat only.
|
||||
- New color law: **blue #8FB2DE = the boundary channel** — the system being honest about what it can't hand you (edge priced out, no market, line not priced). Distinct from red REFUSAL (model decision) and amber QUARANTINE (model leg suppressed).
|
||||
|
||||
## SESSION 2 (Jul 17) — Offseason & Intelligence expansion
|
||||
Two new design files, same package format. System law unchanged (tokens, grade colors, glow-A-only, THE VERB IS "READ").
|
||||
|
||||
|
||||
@@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html,body{background:#06060B;color:#F0F0F0;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||||
::selection{background:rgba(0,212,160,.28);color:#F0F0F0}
|
||||
a{color:#00D4A0;text-decoration:none}
|
||||
a:hover{color:#5cf0cf}
|
||||
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
|
||||
@keyframes vy-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
|
||||
@keyframes vy-syncdot{0%,100%{opacity:1}50%{opacity:.2}}
|
||||
@keyframes vy-wirein{0%{opacity:0;transform:translateY(4px)}8%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-3px)}}
|
||||
.vy-grain{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
|
||||
.vy-vignette{position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55),inset 0 90px 120px -60px rgba(0,212,160,.05)}
|
||||
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
|
||||
[data-reveal].vy-in{opacity:1;transform:none}
|
||||
.vy-still *{animation-play-state:paused !important}
|
||||
html{scroll-behavior:smooth}
|
||||
</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" class="{{ stillClass }}" style="min-height:100vh;background:radial-gradient(1200px 700px at 78% -8%,rgba(106,147,200,.06),transparent 60%),#06060B;padding:0 0 120px">
|
||||
<div class="vy-vignette" aria-hidden="true"></div>
|
||||
<div class="vy-grain" aria-hidden="true"></div>
|
||||
|
||||
<div style="position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:14px;height:36px;padding:0 40px;background:rgba(6,6,11,.88);backdrop-filter:blur(14px);border-top:1px solid #14141E">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.26em;color:#00D4A0;font-weight:800;flex:none">THE WIRE</span>
|
||||
<span style="width:1px;height:14px;background:#1E1E2A;flex:none"></span>
|
||||
<span class="mono" data-wire-time style="font-size:10px;color:#707080;letter-spacing:.06em;flex:none">--:--:--</span>
|
||||
<span class="mono" data-wire style="font-size:11px;color:#B8BCC8;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1">Scanner spec open — honest absence is a designed state, not a bug.</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.16em;color:#4a4a58;flex:none">LOG ▸</span>
|
||||
</div>
|
||||
|
||||
<div style="max-width:1240px;margin:0 auto;padding:0 40px">
|
||||
|
||||
<div style="padding:52px 0 30px">
|
||||
<div class="mono" style="font-size:11px;letter-spacing:.34em;color:#00D4A0;margin-bottom:16px">VYNDR · SCANNER SURFACES · S6 + S7</div>
|
||||
<h1 style="font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.05">Honest absence, designed.<span class="mono" style="color:#00D4A0;animation:vy-cursor 1.1s steps(1) infinite">▌</span></h1>
|
||||
<p style="margin-top:12px;max-width:680px;color:#B8BCC8;font-size:14px;line-height:1.55">Two scanner states flagged missing from the bundle. <span class="mono" style="color:#F0F0F0">S6</span> — the marketless scan: what a read card renders when the board never priced that line. <span class="mono" style="color:#F0F0F0">S7</span> — the priced-line display: the scanner surfaces the board's real lines so nobody free-types a line that doesn't exist. Both extend the boundary channel: <span class="mono" style="color:#8fb2de">blue</span> is the system being honest about what it can't hand you.</p>
|
||||
<div class="mono" style="margin-top:14px;font-size:10px;letter-spacing:.16em;color:#707080">NO FABRICATED MARKETS · ABSENCE IS THE DEFAULT CASE · EVERY DEAD END POINTS SOMEWHERE REAL</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ S6 · SCAN EMPTY STATE ============ -->
|
||||
<div data-reveal style="margin-top:14px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">S6</span>
|
||||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">SCAN EMPTY STATE <span style="color:#8fb2de">· MARKETLESS</span></div><div style="font-size:12.5px;color:#707080;margin-top:5px">The user scanned a prop the board never priced. No market numbers render — there is no market. The card says so plainly, then hands the user tonight's real board. Help, never a wall.</div></div>
|
||||
</div>
|
||||
|
||||
<div id="s6" data-screen-label="S6 · Scan empty state" style="margin-top:44px">
|
||||
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start">
|
||||
|
||||
<!-- anatomy · the marketless read card -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:22px 24px;min-width:0">
|
||||
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">ANATOMY</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">READ-CARD FRAME · ZERO MARKET NUMBERS · PATH FORWARD BUILT IN</span>
|
||||
</div>
|
||||
<div style="max-width:520px;margin:0 auto;border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Herbert <span style="color:#B8BCC8;font-weight:500">o 287.5 Pass Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">LAC · SCANNED · JUL 22, 2026</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(106,147,200,.12);border:1px solid rgba(106,147,200,.34);font-size:8px;letter-spacing:.1em;color:#8fb2de;font-weight:700;flex:none">NO MARKET</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;border:1px dashed rgba(106,147,200,.35);border-radius:11px;padding:22px 16px;text-align:center;background:#0A0A10">
|
||||
<div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.22em;color:#8fb2de">NO LIVE MARKET FOR THIS LINE</div>
|
||||
<div style="font-size:11.5px;color:#B8BCC8;margin-top:9px;line-height:1.55;max-width:330px">No book prices this exact line right now — so there's no vig to strip and no fair number to show. We won't invent a market that isn't there.</div>
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58;margin-top:11px">NO BOOK · NO FAIR · NO MODEL · NOTHING FABRICATED</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:12px 14px;border-radius:10px;background:rgba(0,212,160,.06);border:1px solid rgba(0,212,160,.22)">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px"><span class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080">WHAT WE PRICE NOW</span><span class="mono" style="font-size:8px;letter-spacing:.08em;color:#00D4A0;font-weight:700">142 PROPS LIVE</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:10px">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:10px;background:#00D4A0;color:#06060B;font-weight:800;font-size:10px;letter-spacing:.08em;flex:none">TONIGHT'S BOARD ▸</span>
|
||||
<span style="font-size:10.5px;color:#B8BCC8;line-height:1.5;min-width:0">Herbert has <span class="mono" style="color:#F0F0F0;font-weight:700">3 priced props</span> on tonight's board — full triplets on each.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:16px;line-height:1.7">CHIP · BLUE BOUNDARY CHANNEL rgba(106,147,200,.12) / BORDER .34 / TEXT #8FB2DE — SAME TOKENS AS PRICED-OUT · DASHED VOID BOX BORROWS THE REFUSAL FRAME BUT BLUE, NOT RED: NOTHING FAILED, THE MARKET JUST ISN'T THERE · GREEN RESERVED FOR THE ONE REAL PATH FORWARD (PRIMARY CTA LAW)</div>
|
||||
</div>
|
||||
|
||||
<!-- laws + distinctions -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px;min-width:0">
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px 22px">
|
||||
<div class="mono" style="font-size:11px;letter-spacing:.24em;color:#F0F0F0;font-weight:700;margin-bottom:14px">STATE LAWS</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;align-items:flex-start;gap:11px"><span class="mono" style="color:#8fb2de;font-size:11px;flex:none;padding-top:1px">01</span><div style="font-size:11px;color:#B8BCC8;line-height:1.55;min-width:0"><span style="color:#F0F0F0;font-weight:600">Zero market numbers.</span> No book, no fair, no model, no gauge at 0. An empty triplet frame is a lie — the frame doesn't render.</div></div>
|
||||
<div style="display:flex;align-items:flex-start;gap:11px"><span class="mono" style="color:#8fb2de;font-size:11px;flex:none;padding-top:1px">02</span><div style="font-size:11px;color:#B8BCC8;line-height:1.55;min-width:0"><span style="color:#F0F0F0;font-weight:600">True copy only.</span> "No live market for this line" — never "coming soon", never "check back". We don't promise markets we don't control.</div></div>
|
||||
<div style="display:flex;align-items:flex-start;gap:11px"><span class="mono" style="color:#8fb2de;font-size:11px;flex:none;padding-top:1px">03</span><div style="font-size:11px;color:#B8BCC8;line-height:1.55;min-width:0"><span style="color:#F0F0F0;font-weight:600">Always a path forward.</span> The card ends at tonight's board — with the live priced-prop count and, when the player is on the slate, their real priced props. A scan never dead-ends.</div></div>
|
||||
<div style="display:flex;align-items:flex-start;gap:11px"><span class="mono" style="color:#8fb2de;font-size:11px;flex:none;padding-top:1px">04</span><div style="font-size:11px;color:#B8BCC8;line-height:1.55;min-width:0"><span style="color:#F0F0F0;font-weight:600">Help framing.</span> "What we price now" — the product showing its inventory, never apologizing for what a book didn't post.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px 22px">
|
||||
<div class="mono" style="font-size:11px;letter-spacing:.24em;color:#F0F0F0;font-weight:700;margin-bottom:12px">NOT THE SAME STATE AS</div>
|
||||
<div style="display:flex;flex-direction:column;gap:9px">
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0E0E14;border:1px solid #1E1E2A"><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:5px;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.28);font-size:7.5px;letter-spacing:.1em;color:#FF6B78;font-weight:700;flex:none">REFUSAL</span><span style="font-size:10.5px;color:#707080;line-height:1.45;min-width:0">Market exists, our inputs are too thin to grade. Red — a model decision.</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0E0E14;border:1px solid #1E1E2A"><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:5px;background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.3);font-size:7.5px;letter-spacing:.1em;color:#FFB347;font-weight:700;flex:none">QUARANTINE</span><span style="font-size:10.5px;color:#707080;line-height:1.45;min-width:0">Market exists, model leg suppressed. Amber — book & fair still stand.</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0E0E14;border:1px solid rgba(106,147,200,.3)"><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:5px;background:rgba(106,147,200,.12);border:1px solid rgba(106,147,200,.34);font-size:7.5px;letter-spacing:.1em;color:#8fb2de;font-weight:700;flex:none">NO MARKET</span><span style="font-size:10.5px;color:#B8BCC8;line-height:1.45;min-width:0">No market exists at all. Blue boundary — nothing to price, nothing failed.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- S6 mobile 390 -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px;margin-top:16px">
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080;margin-bottom:14px">MOBILE · 390 · SAME ANATOMY, 44PX PATHS</div>
|
||||
<div style="width:340px;max-width:100%;margin:0 auto;border-radius:13px;background:#0E0E14;border:1px solid #1E1E2A;padding:14px;display:flex;flex-direction:column;gap:11px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><div style="font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Herbert <span style="color:#B8BCC8;font-weight:500">o 287.5 Pass Yds</span></div><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#8fb2de;font-weight:700;flex:none">NO MARKET</span></div>
|
||||
<div style="border:1px dashed rgba(106,147,200,.35);border-radius:10px;padding:16px 12px;text-align:center;background:#0A0A10">
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.18em;color:#8fb2de">NO LIVE MARKET FOR THIS LINE</div>
|
||||
<div style="font-size:10.5px;color:#B8BCC8;margin-top:7px;line-height:1.5">No book prices this line right now. We won't invent one.</div>
|
||||
</div>
|
||||
<span class="mono" style="display:flex;align-items:center;justify-content:center;height:44px;border-radius:11px;background:#00D4A0;color:#06060B;font-weight:800;font-size:10.5px;letter-spacing:.08em">HERBERT · 3 PRICED PROPS ▸</span>
|
||||
<span class="mono" style="display:flex;align-items:center;justify-content:center;height:44px;border-radius:11px;background:#14141E;border:1px solid #2A2A38;color:#B8BCC8;font-weight:700;font-size:10px;letter-spacing:.08em">TONIGHT'S BOARD · 142 LIVE ▸</span>
|
||||
</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;margin-top:14px;line-height:1.6;text-align:center">BOTH PATHS 44PX · PLAYER-SPECIFIC PATH LEADS WHEN THE PLAYER IS ON THE SLATE, BOARD PATH OTHERWISE PROMOTES TO GREEN</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ S7 · PRICED-LINE DISPLAY ============ -->
|
||||
<div data-reveal style="margin-top:56px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">S7</span>
|
||||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">SCANNER PRICED-LINE DISPLAY <span style="color:#8fb2de">· THE NUDGE</span></div><div style="font-size:12.5px;color:#707080;margin-top:5px">As the user picks player + stat, the scanner shows the board's real priced lines — one tap to a real triplet instead of free-typing a line that isn't priced. Only genuinely-priced lines render. "None priced" is the common case and the default design, not an edge.</div></div>
|
||||
</div>
|
||||
|
||||
<div id="s7" data-screen-label="S7 · Scanner priced-line display" style="margin-top:44px">
|
||||
|
||||
<!-- the strip anatomy, three cases -->
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">THE STRIP · THREE CASES</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">CASE A IS THE DEFAULT — MOST PLAYER+STAT PICKS HAVE NO PRICED LINE</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start">
|
||||
|
||||
<!-- CASE A · none priced (DEFAULT) -->
|
||||
<div style="border-radius:14px;background:#0E0E14;border:1px solid rgba(106,147,200,.3);padding:18px;display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#8fb2de;font-weight:700">A · NONE PRICED</span><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:5px;background:rgba(106,147,200,.12);border:1px solid rgba(106,147,200,.34);font-size:7px;letter-spacing:.1em;color:#8fb2de;font-weight:700">DEFAULT · COMMON CASE</span></div>
|
||||
<div style="border-radius:11px;background:#0A0A10;border:1px solid #1E1E2A;padding:13px">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">Herbert</span><span class="mono" style="font-size:9px;color:#707080">·</span><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:8.5px;color:#F0F0F0;font-weight:700">COMPLETIONS</span></div>
|
||||
<div style="margin-top:11px;padding:12px;border-radius:9px;border:1px dashed rgba(106,147,200,.3);text-align:center">
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.14em;color:#8fb2de">NO PRICED LINE FOR THIS STAT</div>
|
||||
<div style="font-size:10px;color:#707080;margin-top:6px;line-height:1.5">The board doesn't price Herbert completions tonight.</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin:11px 0 7px">WE PRICE THESE FOR HERBERT</div>
|
||||
<div style="display:flex;gap:6px;flex-wrap:wrap">
|
||||
<span class="mono" style="font-size:9px;color:#F0F0F0;background:#14141E;border:1px solid #2A2A38;border-radius:7px;padding:7px 10px;font-weight:700">PASS YDS <span style="color:#707080;font-weight:400">o 275.5</span></span>
|
||||
<span class="mono" style="font-size:9px;color:#F0F0F0;background:#14141E;border:1px solid #2A2A38;border-radius:7px;padding:7px 10px;font-weight:700">PASS TD <span style="color:#707080;font-weight:400">o 1.5</span></span>
|
||||
<span class="mono" style="font-size:9px;color:#F0F0F0;background:#14141E;border:1px solid #2A2A38;border-radius:7px;padding:7px 10px;font-weight:700">INT <span style="color:#707080;font-weight:400">o 0.5</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:10.5px;color:#707080;line-height:1.55">Quiet, structured, never alarmed — the strip keeps its shape and offers the player's real priced stats as the way through. This state must look intentional at scale: it's most of the traffic.</div>
|
||||
</div>
|
||||
|
||||
<!-- CASE B · priced lines exist -->
|
||||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#00D4A0;font-weight:700">B · PRICED — ONE TAP TO THE TRIPLET</span></div>
|
||||
<div style="border-radius:11px;background:#0A0A10;border:1px solid #1E1E2A;padding:13px">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">Jokić</span><span class="mono" style="font-size:9px;color:#707080">·</span><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:8.5px;color:#F0F0F0;font-weight:700">POINTS</span></div>
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin:11px 0 7px">WE PRICE THESE LINES</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;height:44px;padding:0 10px;border-radius:10px;background:#0E0E14;border:1px solid rgba(0,212,160,.28)">
|
||||
<span class="mono" style="font-size:10.5px;font-weight:800;color:#F0F0F0;flex:none">o 27.5</span>
|
||||
<span class="mono" style="font-size:7.5px;color:#707080;flex:none">BK −114</span>
|
||||
<span class="mono" style="font-size:7.5px;color:#FFB347;font-weight:700;flex:none">◆ −105</span>
|
||||
<span class="mono" style="font-size:10px;color:#00D4A0;font-weight:800;margin-left:auto;flex:none">▸</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;height:44px;padding:0 10px;border-radius:10px;background:#0E0E14;border:1px solid #1E1E2A;margin-top:7px">
|
||||
<span class="mono" style="font-size:10.5px;font-weight:800;color:#F0F0F0;flex:none">u 27.5</span>
|
||||
<span class="mono" style="font-size:7.5px;color:#707080;flex:none">BK −106</span>
|
||||
<span class="mono" style="font-size:7.5px;color:#FFB347;font-weight:700;flex:none">◆ −115</span>
|
||||
<span class="mono" style="font-size:10px;color:#707080;font-weight:800;margin-left:auto;flex:none">▸</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:10.5px;color:#707080;line-height:1.55">Only lines the board genuinely prices — per exact player + stat. Each row is a 44px tap straight into the real triplet. Fair previews amber; green edges only when the read behind it is takeable.</div>
|
||||
</div>
|
||||
|
||||
<!-- CASE C · off-slate -->
|
||||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#B8BCC8;font-weight:700">C · OFF-SLATE PLAYER</span></div>
|
||||
<div style="border-radius:11px;background:#0A0A10;border:1px solid #1E1E2A;padding:13px">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">Skenes</span><span class="mono" style="font-size:9px;color:#707080">·</span><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:8.5px;color:#F0F0F0;font-weight:700">STRIKEOUTS</span></div>
|
||||
<div style="margin-top:11px;padding:14px 12px;text-align:center">
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080">NOT ON TONIGHT'S SLATE</div>
|
||||
<div style="font-size:10px;color:#4a4a58;margin-top:6px;line-height:1.5">No game, no markets, no prices to show.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:10.5px;color:#707080;line-height:1.55">Nothing renders — no chips, no suggestions, no dashed frame. Off-slate is quieter than case A: the strip states the fact in text tokens only and stops. No blue; there's no boundary to mark, just no game.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- typed-line mismatch, in scanner context -->
|
||||
<div style="display:flex;align-items:center;gap:12px;margin:30px 0 14px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">IN CONTEXT · TYPED LINE ≠ PRICED LINE</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">THE NUDGE — REDIRECT TO THE REAL LINE, NEVER PRETEND THE TYPED ONE EXISTS</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start">
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:22px 24px;min-width:0">
|
||||
<div style="max-width:520px;margin:0 auto">
|
||||
<div style="display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;background:#0E0E14;border:1px solid rgba(0,212,160,.4)">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#707080" stroke-width="2"></circle><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M20 20l-4-4"></path></svg>
|
||||
<span class="mono" style="font-size:13px;color:#F0F0F0">jokic o 30.5 pts<span style="display:inline-block;width:2px;height:15px;background:#00D4A0;vertical-align:-2px;animation:vy-syncdot 1.1s steps(1) infinite"></span></span>
|
||||
</div>
|
||||
<div style="margin-top:12px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;padding:13px">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:9px;color:#8fb2de;flex:none">⊘</span><span class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#8fb2de;font-weight:700">o 30.5 ISN'T PRICED</span><span class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-left:auto">NEAREST PRICED LINE ↓</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:10px;background:#0A0A10;border:1px solid rgba(0,212,160,.28);margin-top:9px">
|
||||
<span class="mono" style="font-size:11px;font-weight:800;color:#F0F0F0;flex:none">o 27.5 PTS</span>
|
||||
<span class="mono" style="font-size:8.5px;color:#707080;flex:none">BOOK −114</span>
|
||||
<span class="mono" style="font-size:8.5px;color:#FFB347;font-weight:700;flex:none">◆ FAIR −105</span>
|
||||
<span class="mono" style="font-size:8.5px;color:#00D4A0;font-weight:700;margin-left:auto;flex:none">OPEN READ ▸</span>
|
||||
</div>
|
||||
<div style="font-size:10px;color:#707080;line-height:1.5;margin-top:9px">The typed line stays visible in the query — the strip never rewrites the user's intent, it shows what's actually priced next to it.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:16px;line-height:1.7">"ISN'T PRICED" IS A FACT LINE, NOT AN ERROR — BLUE TEXT, NO RED, NO SHAKE · NEAREST LINE = SAME PLAYER + STAT ONLY, NEVER A DIFFERENT STAT PASSED OFF AS CLOSE</div>
|
||||
</div>
|
||||
|
||||
<!-- S7 mobile 390 -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px;min-width:0">
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080;margin-bottom:14px">MOBILE · 390 · STRIP UNDER THE SCAN FIELD</div>
|
||||
<div style="width:300px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:9px">
|
||||
<div style="display:flex;align-items:center;gap:9px;height:44px;padding:0 13px;border-radius:12px;background:#0E0E14;border:1px solid rgba(0,212,160,.4)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#707080" stroke-width="2"></circle><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M20 20l-4-4"></path></svg>
|
||||
<span class="mono" style="font-size:12px;color:#F0F0F0">herbert comp<span style="display:inline-block;width:2px;height:14px;background:#00D4A0;vertical-align:-2px;animation:vy-syncdot 1.1s steps(1) infinite"></span></span>
|
||||
</div>
|
||||
<div style="border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;padding:12px">
|
||||
<div style="padding:11px 10px;border-radius:9px;border:1px dashed rgba(106,147,200,.3);text-align:center">
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#8fb2de">NO PRICED LINE FOR THIS STAT</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin:10px 0 7px">WE PRICE THESE FOR HERBERT</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<span class="mono" style="display:flex;align-items:center;height:44px;padding:0 12px;border-radius:9px;background:#14141E;border:1px solid #2A2A38;font-size:9.5px;color:#F0F0F0;font-weight:700;gap:8px">PASS YDS <span style="color:#707080;font-weight:400">o 275.5</span><span style="color:#FFB347;font-weight:700;margin-left:auto">◆ −108</span></span>
|
||||
<span class="mono" style="display:flex;align-items:center;height:44px;padding:0 12px;border-radius:9px;background:#14141E;border:1px solid #2A2A38;font-size:9.5px;color:#F0F0F0;font-weight:700;gap:8px">PASS TD <span style="color:#707080;font-weight:400">o 1.5</span><span style="color:#FFB347;font-weight:700;margin-left:auto">◆ +102</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;margin-top:14px;line-height:1.6;text-align:center">ALL SUGGESTION ROWS 44PX · FAIR PREVIEW RIDES EVERY SUGGESTED STAT — THE FREE HOOK WORKS EVEN IN THE EMPTY STATE</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:16px;padding:13px 18px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#8fb2de;font-weight:700">THE SCANNER NEVER IMPLIES A LINE EXISTS WHERE IT DOESN'T</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">ABSENCE IS THE DEFAULT DESIGN · EVERY EMPTY POINTS TO A REAL PRICED PROP · BLUE = THE HONEST BOUNDARY</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"motion":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"}}">
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {
|
||||
rootRef: (n) => { this.rootNode = n; },
|
||||
stillClass: (this.props.motion ?? true) ? '' : 'vy-still'
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
this._t = [];
|
||||
const tick = () => {
|
||||
const wt = document.querySelector('[data-wire-time]');
|
||||
if (wt) wt.textContent = new Date().toLocaleTimeString('en-US', { hour12: false });
|
||||
};
|
||||
tick();
|
||||
this._t.push(setInterval(tick, 1000));
|
||||
const entries = [
|
||||
'Marketless scans tonight: 61% of scanner traffic — S6 is the front door.',
|
||||
'Board carries 142 priced props · scanner nudge routes dead-ends there.',
|
||||
'Blue boundary channel: priced-out edge + unpriced lines share one meaning.',
|
||||
'No fabricated markets. No "coming soon". Truth law holds.'
|
||||
];
|
||||
let wi = 0;
|
||||
this._t.push(setInterval(() => {
|
||||
const el = document.querySelector('[data-wire]');
|
||||
if (!el) return;
|
||||
wi = (wi + 1) % entries.length;
|
||||
el.textContent = entries[wi];
|
||||
el.style.animation = 'none';
|
||||
void el.offsetWidth;
|
||||
el.style.animation = 'vy-wirein 6s ease both';
|
||||
}, 6000));
|
||||
const secs = [...(this.rootNode || document).querySelectorAll('[data-reveal],[data-screen-label]')];
|
||||
secs.forEach(s => { if (!s.hasAttribute('data-reveal')) s.setAttribute('data-reveal', ''); });
|
||||
this._io = new IntersectionObserver(ents => {
|
||||
ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vy-in'); this._io.unobserve(e.target); } });
|
||||
}, { rootMargin: '0px 0px -8% 0px' });
|
||||
secs.forEach(s => this._io.observe(s));
|
||||
}
|
||||
componentWillUnmount() {
|
||||
(this._t || []).forEach(t => { clearInterval(t); clearTimeout(t); });
|
||||
if (this._io) this._io.disconnect();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user