// mavin launch — faithful iPhone frame + V2 (staging) app screens. // Rebuilt to the Runda World Design System V2: OBSIDIAN surfaces (#07090F), // parchment text, BRASS (#A27D4B) the single accent, certified green #4A8C5F, // edge-first corners (radius 3), brand fonts (Futura / Neue Haas / Plex Mono). // Every screen is a PURE function of a 0..1 progress `p` for frame-accurate export. // Lifted from mavin-vault@staging: ScoreRing, AgentProgressLoader, VaultCheckReport, // HomeV2, IdentifyReviewView, BottomDock (v2), v2-tokens.css. const { clamp, Easing } = window; const eoc = Easing.easeOutCubic; const PHOTO = "../assets/photo/watch-rolex-yash.jpg"; const DISP = "var(--font-display)"; // Futura const BODY = "var(--font-body)"; // Neue Haas const MONO = "var(--font-mono)"; // IBM Plex Mono // ── mavin working-v1 monogram (inline, recolorable) ───────────────── function MavinMark({ size = 26, color = "var(--g-fg)", style }) { // Charcoal squircle with bone "m." — matches assets/brand/mavin-app-icon.svg. // (Function name kept for compatibility with all existing call sites.) return ( ); } // ── icon set ────────────────────────────────────────────────────── function Icon({ name, size = 18, stroke = 1.5 }) { const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "home": return ; case "archive": return ; case "trend": return ; case "print": return ; case "gear": return ; case "x": return ; case "check": return ; case "eye": return ; case "search": return ; case "shield": return ; case "file": return ; case "brain": return ; case "scale": return ; case "activity": return ; case "globe": return ; case "clock": return ; case "timer": return ; case "radar": return ; case "bolt": return ; default: return null; } } // ── shared bits ──────────────────────────────────────────────────── function Eyebrow({ children, lower = true, style }) { return {children}; } function MonoCap({ children, style }) { return {children}; } function Flag({ children, brass }) { return {children}; } function Pill({ tone = "green", children, style }) { const t = { green: { bg: "rgba(74,140,95,0.12)", fg: "var(--g-green)", bd: "rgba(74,140,95,0.36)" }, gold: { bg: "rgba(162,125,75,0.10)", fg: "var(--g-brass)", bd: "rgba(162,125,75,0.42)" }, ember: { bg: "rgba(181,58,45,0.10)", fg: "var(--g-ember)", bd: "rgba(181,58,45,0.34)" }, }[tone]; return ( ); } // ── status bar (parchment on obsidian) ──────────────────────────── function StatusBar() { const col = "var(--g-fg)"; return (
9:41
); } // ── bottom dock (V2: midnight bar, brand mark, edge-first tabs) ──── function Dock({ active = "vault" }) { const items = [ { id: "home", label: "Home", icon: "home" }, { id: "vault", label: "Vault", icon: "archive" }, { id: "market", label: "Market", icon: "trend" }, { id: "print", label: "Print", icon: "print" }, { id: "account", label: "Account", icon: "gear" }, ]; return (
mavin
{items.map((it) => { const on = it.id === active; return (
{it.label}
); })}
); } // ════════════════════════════════════════════════════════════════ // SCREEN 1 · VAULT CHECK — camera viewfinder → identification review // ════════════════════════════════════════════════════════════════ function ScreenCamera({ p }) { const flash = p > 0.42 && p < 0.5 ? (1 - Math.abs(p - 0.46) / 0.04) : 0; const scanY = 14 + ((p * 1.7) % 1) * 70; const reticle = clamp((p - 0.05) / 0.25, 0, 1); const brk = 1 - reticle; const rev = clamp((p - 0.5) / 0.42, 0, 1); // review view rises const revE = eoc(rev); return (
{/* viewfinder photo */}
0 ? "46%" : "100%", overflow: "hidden", transition: "none" }}> 0 ? 0.7 : 0.86}) contrast(1.04)` }} />
{rev > 0 &&
PL. 01 · IDENTIFIED
} {rev > 0 &&
HIGH CONFIDENCE
}
{/* capture chrome (before review) */} {rev < 0.3 && (
vault check
{["tl", "tr", "bl", "br"].map((cc) => { const base = { position: "absolute", width: 32, height: 32, borderColor: "var(--g-brass)", borderStyle: "solid", borderWidth: 0 }; const m = { tl: { top: 0, left: 0, borderTopWidth: 2, borderLeftWidth: 2 }, tr: { top: 0, right: 0, borderTopWidth: 2, borderRightWidth: 2 }, bl: { bottom: 0, left: 0, borderBottomWidth: 2, borderLeftWidth: 2 }, br: { bottom: 0, right: 0, borderBottomWidth: 2, borderRightWidth: 2 } }[cc]; return
; })} {p < 0.5 &&
}
)} {/* identification review (rises) */} {rev > 0 && (
identification · provisional

rolex datejust 41

watchesRolexconfidence · highidentity · 86%
{[["reference", "126334"], ["movement", "automatic · 3235"], ["case", "steel & yellow gold"]].map(([k, v]) => (
{k} {v}
))}
continue · examine
)}
); } // ════════════════════════════════════════════════════════════════ // SCREEN 2 · AGENTS — V2 live scan panel + findings + agent grid // ════════════════════════════════════════════════════════════════ const AGENTS = [ { k: "A0", icon: "eye" }, { k: "A1", icon: "search" }, { k: "A2", icon: "shield" }, { k: "A3", icon: "file" }, { k: "A4", icon: "trend" }, { k: "A5", icon: "brain" }, { k: "V1", icon: "scale" }, { k: "V2", icon: "activity" }, { k: "V3", icon: "globe" }, { k: "V4", icon: "clock" }, { k: "V5", icon: "timer" }, { k: "V6", icon: "radar" }, ]; const PHASES = [ { label: "Identifying", sub: "Tri-model consensus recognition" }, { label: "Authenticating", sub: "Forensic scan, provenance & market" }, { label: "Valuing", sub: "6 specialist agents pricing in parallel" }, ]; const FINDINGS = [ "Inspecting forensic markers", "Cross-checking provenance signals", "Searching realized comparables", ]; const ZONES = [ { l: 9, t: 14, w: 34, h: 28 }, { l: 56, t: 12, w: 33, h: 24 }, { l: 13, t: 47, w: 32, h: 36 }, { l: 52, t: 44, w: 38, h: 30 }, { l: 30, t: 25, w: 40, h: 40 }, { l: 20, t: 70, w: 60, h: 18 }, ]; function ScreenAgents({ p }) { const done = Math.floor(eoc(p) * AGENTS.length); const pct = Math.round(clamp(eoc(p), 0, 0.99) * 100); const phaseIdx = p < 0.18 ? 0 : p < 0.6 ? 1 : 2; const ph = PHASES[phaseIdx]; const scanY = 8 + ((p * 1.5) % 1) * 84; const zone = ZONES[(done + phaseIdx) % ZONES.length]; return (
{/* header */}
{ph.label}
{ph.sub}
{pct}%
{/* scan panel */}
{/* grid */}
{/* scan line */}
{/* active reticle zone */}
{["tl", "tr", "bl", "br"].map((cc) => { const base = { position: "absolute", width: 9, height: 9, borderColor: "var(--g-brass)", borderStyle: "solid", borderWidth: 0 }; const m = { tl: { top: -1, left: -1, borderTopWidth: 2, borderLeftWidth: 2 }, tr: { top: -1, right: -1, borderTopWidth: 2, borderRightWidth: 2 }, bl: { bottom: -1, left: -1, borderBottomWidth: 2, borderLeftWidth: 2 }, br: { bottom: -1, right: -1, borderBottomWidth: 2, borderRightWidth: 2 } }[cc]; return
; })}
{/* live pill */}
Live Analysis
{/* findings */}
Agent Findings {done}/12
{FINDINGS.map((f, i) => (
{f}
))}
{/* phase pills */}
{PHASES.map((pp, i) => { const d = i < phaseIdx, a = i === phaseIdx; return ( {i > 0 &&
}
{d ? : {i + 1}} {pp.label}
); })}
{/* central phase heading — fills the space the real component uses */}
{ph.label.toLowerCase()}
{ph.sub}
{done} of 12 agents reporting
{/* agent grid 6-col */}
{AGENTS.map((a, i) => { const d = i < done, act = i === done; return (
{d ? : } {a.k}
); })}
); } // ════════════════════════════════════════════════════════════════ // SCREEN 3 · VERDICT — V2 ScoreRing (butt cap, glow) + verdict pill // ════════════════════════════════════════════════════════════════ const SCORE = 812; function VaultRing({ p, size = 184 }) { const sw = Math.round(size / 10), r = (size - sw) / 2, circ = 2 * Math.PI * r; const e = eoc(clamp(p / 0.62, 0, 1)); const score = Math.round(SCORE * e); const offset = circ * (1 - (SCORE / 1000) * e); const green = score >= 700; const color = green ? "var(--g-green)" : "var(--g-brass)"; const glow = green ? "34,209,122" : "200,162,75"; return (
{score} Vault Score
); } function ScreenScore({ p }) { const verdict = clamp((p - 0.6) / 0.18, 0, 1); return (
vault record · 00271
rolex datejust 41
{verdict > 0 && (
mavin · CERTIFIED
)} {p > 0.74 && (
likely genuine. evidence consistent · exceptional confidence
)}
); } // ════════════════════════════════════════════════════════════════ // SCREEN 4 · VALUE — consensus valuation + range + market // ════════════════════════════════════════════════════════════════ function ScreenValuation({ p }) { const e = eoc(clamp(p / 0.5, 0, 1)); const nav = Math.round(24500 * e); const fmt = (n) => "$" + n.toLocaleString(); const navPct = 6 + eoc(clamp((p - 0.2) / 0.5, 0, 1)) * 40; const shimmer = clamp((p - 0.45) / 0.3, 0, 1); const spark = clamp((p - 0.3) / 0.5, 0, 1); const pts = [22, 26, 21, 30, 28, 36, 33, 42, 39, 48, 52, 60]; const W = 280, H = 50, mx = 64; const path = pts.map((v, i) => `${(i / (pts.length - 1)) * W},${H - (v / mx) * H}`).slice(0, Math.max(2, Math.ceil(spark * pts.length))).join(" "); return (
vault record · 00271
rolex datejust 41
{/* value block — edge-first, rule-led */}
consensus valuation
{fmt(nav)} 0 && shimmer < 1 ? 0.9 : 0 }} />
82% confidence grade a
{/* range */}
$19,200 $31,000
{/* market */}
market · 12 mo ▲ 18.4%
14 comparableslive market
); } // ════════════════════════════════════════════════════════════════ // SCREEN 5 · THE VAULT — objects populating (V2 edge-first grid) // ════════════════════════════════════════════════════════════════ const VAULT_ITEMS = [ { name: "Rolex Datejust 41", cat: "watches", score: 812, img: "../assets/photo/watch-rolex-yash.jpg", nav: 24500, tone: "em" }, { name: "1972 Porsche 911 S", cat: "collector cars", score: 742, img: "../assets/photo/porsche-green.jpg", nav: 225000, tone: "gd" }, { name: "Bonnes-Mares 2017", cat: "wine", score: 688, img: "../assets/photo/wine-cellar.jpg", nav: 4800, tone: "gd" }, { name: "Cartier Tank Solo", cat: "watches", score: 705, img: "../assets/photo/cartier.jpg", nav: 8200, tone: "em" }, { name: "Hermès Birkin 35", cat: "handbags", score: 631, img: "../assets/photo/chesterfield.jpg", nav: 18000, tone: "gd" }, { name: "Basquiat on canvas", cat: "fine art", score: 756, img: "../assets/photo/library.jpg", nav: 45000, tone: "em" }, { name: "F1 Helmet 1976", cat: "memorabilia", score: 693, img: "../assets/photo/f1-paddock.jpg", nav: 32000, tone: "gd" }, { name: "Mickey Mantle 1952", cat: "trading cards", score: 580, img: "../assets/photo/watch-bezel.jpg", nav: 95000, tone: "gd" }, ]; function ScreenVault({ p }) { const totalNav = VAULT_ITEMS.reduce((s, it) => s + it.nav, 0); const fmtK = (n) => n >= 1000000 ? "$" + (n/1000000).toFixed(1) + "M" : "$" + Math.round(n/1000) + "K"; const fmtFull = (n) => "$" + n.toLocaleString(); const portE = eoc(clamp(p / 0.4, 0, 1)); const portVal = Math.round(totalNav * portE); return (
{/* VAULT HEADER — faithful to VaultV1 */}
mavin
{/* CONTENT */}
{/* Portfolio value card */}
Portfolio Value
{fmtK(portVal)} ▲ +3.2%
{VAULT_ITEMS.length} assets in vault
Assets
{/* List rows — VaultV1 SwipeableRow style */}
{VAULT_ITEMS.slice(0, 6).map((it, i) => { const local = clamp((p - i * 0.08) / 0.3, 0, 1); const e = eoc(local); if (local <= 0) return null; const green = it.score >= 700; const amber = it.score >= 400 && !green; const scoreBg = green ? "rgba(74,140,95,0.14)" : amber ? "rgba(162,125,75,0.14)" : "rgba(181,58,45,0.14)"; const scoreBd = green ? "rgba(74,140,95,0.3)" : amber ? "rgba(162,125,75,0.3)" : "rgba(181,58,45,0.3)"; const scoreCol = green ? "var(--g-green)" : amber ? "var(--g-brass)" : "var(--g-ember)"; return (
{it.cat}
{it.name}
{it.score} {fmtFull(it.nav)}
); })}
); } // ════════════════════════════════════════════════════════════════ // SCREEN 6 · INTELLIGENCE — PrintV1 morning brief // ════════════════════════════════════════════════════════════════ const INTEL_ITEMS = [ { color: "#4ade80", title: "Rolex Datejust 41 — valuation revised upward.", body: "Comparable sales from Geneva moved the consensus range to $24,500–$31,000.", time: "2h ago" }, { color: "var(--g-brass)", title: "Comparable sale · 1971 Porsche 911 S", body: "Sold at $218,000 at Gooding & Company. Strong indication for your 1972 example.", time: "yesterday" }, { color: "#a78bfa", title: "Market Pulse · vintage watches", body: "Rolex sports references up 8.4% over 30 days. Datejust models following the move.", time: "2d ago" }, ]; function ScreenIntelligence({ p }) { const headerE = eoc(clamp(p / 0.3, 0, 1)); const briefE = eoc(clamp((p - 0.12) / 0.35, 0, 1)); return (
{/* PRINT HEADER */}
good evening.
FRIDAY, 30 MAY · YOUR BRIEF
{/* CONTENT */}
{/* Morning briefing — amber card, faithful to PrintV1 */}
Your Briefing

Three of your seven objects moved this week. Your Rolex leads the vault by confidence. Two items would benefit from additional evidence — add service records and purchase provenance to improve your vault score.

{/* Section label */}
Your Collection
{/* Intelligence items */} {INTEL_ITEMS.map((item, i) => { const e = eoc(clamp((p - 0.42 - i*0.12) / 0.28, 0, 1)); if (e <= 0) return null; return (
{item.title}
{item.body}
{item.time}
); })}
); } Object.assign(window, { MavinMark, Icon, StatusBar, Dock, Eyebrow, MonoCap, Flag, Pill, ScreenCamera, ScreenAgents, ScreenScore, ScreenValuation, ScreenVault, ScreenIntelligence, });