builtbykev/vyndr
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

DS5 — Pricing (Desk-as-hero) + Motion + Empty/Error + archetype glyphs

Browse Source 
Part 6 #8 — Desk $44.99 is the hero tier. New DeskShowcase leads the
pricing page with the "$1M terminal · $44.99" story + real feature
visuals (alt-line ladder, quarter-Kelly, parlay φ, real-time feed) in a
balanced two-column layout (kills the dead right-half). Desk is the sole
highlighted tier / single primary CTA (color contract #9); Analyst is
secondary. Real prices: Free 5 scans, Analyst $14.99/$19.99, Desk
$34.99/$44.99. ClaimMeter + Stripe checkout wiring untouched.

Part 4 #7 — Ticker → punctuated stillness. The continuous marquee is
retired; the ticker now RESTS ≥4s on each ranked item and pulses only on
change. The EKG heartbeat is a static readout — the header's ONE idle
proof-of-life is the single SIGNAL-LIVE live-dot (the ticker dropped its
competing pulse). All durations tokenized (--motion-*, --ticker-hold);
prefers-reduced-motion kills the motion entirely.

Part 8 #20 — new EmptyState component modeled on the north-star 404
(scanlines + glitch wordmark + amber system voice + CTA hierarchy),
reused at the bare-red "Team not found", "Game not found", and the
ledger empties — one unified voice.

Part 5 — archetype glyph+chip propagated to STREAKS rows + ledger rows
(optional + self-hiding; absent beats fabricated); grade reveal already
carries ArchetypeBlend.

Tests: new tests/unit/ds5PricingStates.test.js (22) locks all four
workstreams; updated teamHubUI + vyndrDesignSystem for the new surfaces.
237 suites / 2864 tests green; next build exit 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kev
2026-07-13 00:31:35 -04:00
parent cf91c04e90
commit a18a3f33fc
14 changed files with 620 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/globals.css
+45 -2
View File
@@ -94,6 +94,16 @@
--scan-op: 0.04;
--grade-hero: var(--g-a);
/* Motion tokens (DS5 · DESIGN-SPEC Part 4 — ALIVE IS PUNCTUATED STILLNESS).
Every duration in the living layer resolves from one of these — no one-off
ms literals. IDLE = the single proof-of-life pulse; TRANSITION is sub-200ms
(perceived instantaneity); DATA is the change-only green pulse; TICKER-HOLD
is how long the ticker RESTS on each item so it can be read (≥4s). */
--motion-idle: 1.4s;
--motion-transition: 180ms;
--motion-data: 300ms;
--ticker-hold: 4200ms;
/* Type — Inter for chrome/UI, JetBrains Mono for ALL data.
Session 41: --font-* come from next/font (self-hosted, set on <html>).
Literal family names kept as fallbacks for any non-next/font context. */
@@ -1078,7 +1088,11 @@ body.tex-grain::before {
}
.grade-reveal { animation: grade-reveal 0.42s cubic-bezier(.2,1.3,.4,1) both; }
/* ===================== TICKER ===================== */
/* ===================== TICKER (DS5 — punctuated stillness) =====================
The ticker RESTS. It no longer marquee-scrolls (constant motion reads cheap,
Part 0 law #1). It holds each item for --ticker-hold (≥4s) so it can be READ,
and the ONLY motion is a change-only cross-fade + a brief data-update pulse
when the item advances. The legacy .ticker-track marquee is retired. */
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
@@ -1088,6 +1102,23 @@ body.tex-grain::before {
white-space: nowrap;
animation: ticker-scroll 38s linear infinite;
}
/* The resting strip — a static ranked row, no idle animation. */
.ticker-rest {
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
/* Change-only cross-fade as the held item advances (sub-200ms, weighted). */
@keyframes ticker-swap { from { opacity: 0.55; } to { opacity: 1; } }
.ticker-item-enter { animation: ticker-swap var(--motion-transition) ease-out both; }
/* Change-only green pulse — the terminal reacting to a fresh head event. */
@keyframes ticker-pulse {
0% { background: color-mix(in srgb, var(--g-a) 22%, transparent); }
100% { background: transparent; }
}
.ticker-pulse { animation: ticker-pulse var(--motion-data) ease-out 1; }
/* ===================== LIVE PULSE ===================== */
.live-dot {
@@ -1104,6 +1135,14 @@ body.tex-grain::before {
100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}
/* ===================== DESK SHOWCASE (DS5 pricing hero) ===================== */
/* Balanced two-column at desktop (pitch | real feature visuals), single column
on mobile — kills the dead right-half of the old pricing page (#8). */
.desk-showcase { grid-template-columns: 1fr; }
@media (min-width: 900px) {
.desk-showcase { grid-template-columns: 1.05fr 1fr; }
}
/* ===================== LINE FLASH (odds cell changes) ===================== */
@keyframes flash-up { 0% { background: rgba(0,212,160,0.45); } 100% { background: transparent; } }
@keyframes flash-down { 0% { background: rgba(255,82,82,0.45); } 100% { background: transparent; } }
@@ -1124,7 +1163,10 @@ body.tex-grain::before {
/* ===================== LIVING LAYER (the brain) ===================== */
/* EKG heartbeat strip */
@keyframes ekg-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ekg-track { display: inline-flex; animation: ekg-scroll 6s linear infinite; }
/* DS5 — the EKG is now a STATIC readout trace (no idle scroll). The header's
ONE idle proof-of-life is the single SIGNAL-LIVE live-dot; the heartbeat
waveform is a frozen instrument face, not constant motion (Part 4). */
.ekg-track { display: inline-flex; }
/* Neural node pulse */
@keyframes node-pulse {
@@ -1189,6 +1231,7 @@ body.tex-grain::before {
/* Reduced-motion: kill the living layer + glitch chrome outright */
@media (prefers-reduced-motion: reduce) {
.wm, .wm::before, .wm::after, .ticker-track, .live-dot,
.ticker-item-enter, .ticker-pulse,
.intel-surface::after, .phosphor-cursor,
.ekg-track, .brain-node, .brain-link, .proc-scan, .data-blink { animation: none !important; }
}