Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Matrix ECHO — Living Memory</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,700;1,9..144,300;1,9..144,400&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --flesh: #C4956A; | |
| --flesh-pale: #E8C9A8; | |
| --flesh-deep: #8B5E3C; | |
| --scar: #7A3B3B; | |
| --scar-bright: #C0514A; | |
| --scar-pale: #D4897A; | |
| --tissue: #2A1A14; | |
| --tissue-mid: #3D2318; | |
| --tissue-light: #5C3520; | |
| --membrane: rgba(196, 149, 106, 0.08); | |
| --nerve: #E8A87C; | |
| --bg: #120A06; | |
| --text: #D4B896; | |
| --text-dim: #8A6848; | |
| --text-bright: #F0D4B0; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'Fraunces', Georgia, serif; | |
| font-size: 17px; | |
| line-height: 1.7; | |
| overflow-x: hidden; | |
| cursor: none; | |
| } | |
| /* ── CUSTOM CURSOR ── */ | |
| .cursor { | |
| position: fixed; | |
| width: 12px; | |
| height: 12px; | |
| background: var(--scar-bright); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 9999; | |
| transition: transform 0.1s ease, opacity 0.2s; | |
| mix-blend-mode: screen; | |
| } | |
| .cursor-trail { | |
| position: fixed; | |
| width: 32px; | |
| height: 32px; | |
| border: 1px solid rgba(192, 81, 74, 0.4); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 9998; | |
| transition: all 0.15s ease; | |
| } | |
| /* ── NOISE OVERLAY ── */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| z-index: 1000; | |
| opacity: 0.6; | |
| } | |
| /* ── VEINS / ORGANIC LINES ── */ | |
| .vein-bg { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.15; | |
| } | |
| /* ── HERO ── */ | |
| header { | |
| position: relative; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| padding: 4rem 2rem; | |
| } | |
| .hero-membrane { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse at 30% 40%, rgba(122, 59, 59, 0.35) 0%, transparent 55%), | |
| radial-gradient(ellipse at 70% 60%, rgba(90, 40, 20, 0.3) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 20%, rgba(196, 149, 106, 0.08) 0%, transparent 40%); | |
| } | |
| /* Pulsing biological blobs */ | |
| .blob { | |
| position: absolute; | |
| border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; | |
| filter: blur(60px); | |
| animation: morph 8s ease-in-out infinite; | |
| opacity: 0.12; | |
| } | |
| .blob-1 { | |
| width: 500px; height: 500px; | |
| background: var(--scar); | |
| top: -100px; left: -100px; | |
| animation-delay: 0s; | |
| } | |
| .blob-2 { | |
| width: 400px; height: 400px; | |
| background: var(--flesh-deep); | |
| bottom: -80px; right: -80px; | |
| animation-delay: -3s; | |
| } | |
| .blob-3 { | |
| width: 300px; height: 300px; | |
| background: var(--scar-bright); | |
| top: 40%; left: 60%; | |
| animation-delay: -5s; | |
| opacity: 0.07; | |
| } | |
| @keyframes morph { | |
| 0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); } | |
| 33% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; transform: rotate(120deg); } | |
| 66% { border-radius: 50% 50% 30% 70% / 60% 40% 70% 30%; transform: rotate(240deg); } | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| max-width: 900px; | |
| } | |
| .hero-label { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.4em; | |
| color: var(--scar-pale); | |
| text-transform: uppercase; | |
| display: block; | |
| margin-bottom: 2rem; | |
| opacity: 0; | |
| animation: rise 1s ease 0.3s forwards; | |
| } | |
| .hero-title { | |
| font-size: clamp(5rem, 15vw, 11rem); | |
| font-weight: 300; | |
| color: var(--flesh-pale); | |
| line-height: 0.9; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 0.5rem; | |
| opacity: 0; | |
| animation: rise 1.2s ease 0.5s forwards; | |
| position: relative; | |
| } | |
| .hero-title .scar-letter { | |
| color: var(--scar-bright); | |
| font-style: italic; | |
| position: relative; | |
| } | |
| .hero-title .scar-letter::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--scar-bright), transparent); | |
| animation: scar-pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes scar-pulse { | |
| 0%, 100% { opacity: 0.4; transform: scaleX(0.8); } | |
| 50% { opacity: 1; transform: scaleX(1); } | |
| } | |
| .hero-sub { | |
| font-size: clamp(1rem, 2.5vw, 1.4rem); | |
| font-weight: 300; | |
| font-style: italic; | |
| color: var(--text-dim); | |
| margin-bottom: 3rem; | |
| opacity: 0; | |
| animation: rise 1s ease 0.8s forwards; | |
| } | |
| .hero-tagline { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.85rem; | |
| color: var(--nerve); | |
| background: rgba(196, 149, 106, 0.06); | |
| border: 1px solid rgba(196, 149, 106, 0.15); | |
| border-left: 3px solid var(--scar-bright); | |
| padding: 1rem 1.5rem; | |
| text-align: left; | |
| max-width: 600px; | |
| margin: 0 auto 3rem; | |
| opacity: 0; | |
| animation: rise 1s ease 1s forwards; | |
| line-height: 1.6; | |
| } | |
| .pulse-dot { | |
| display: inline-block; | |
| width: 8px; height: 8px; | |
| background: var(--scar-bright); | |
| border-radius: 50%; | |
| margin-right: 0.5rem; | |
| animation: heartbeat 1.2s ease-in-out infinite; | |
| vertical-align: middle; | |
| } | |
| @keyframes heartbeat { | |
| 0%, 100% { transform: scale(1); opacity: 1; } | |
| 14% { transform: scale(1.3); } | |
| 28% { transform: scale(1); } | |
| 42% { transform: scale(1.2); } | |
| 70% { opacity: 0.6; } | |
| } | |
| @keyframes rise { | |
| from { opacity: 0; transform: translateY(24px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .scroll-cue { | |
| position: absolute; | |
| bottom: 2.5rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.6rem; | |
| letter-spacing: 0.3em; | |
| color: var(--text-dim); | |
| opacity: 0; | |
| animation: rise 1s ease 1.5s forwards; | |
| } | |
| .scroll-cue::after { | |
| content: ''; | |
| width: 1px; | |
| height: 50px; | |
| background: linear-gradient(to bottom, var(--scar-bright), transparent); | |
| animation: drip 1.5s ease-in-out infinite; | |
| } | |
| @keyframes drip { | |
| 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } | |
| 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } | |
| 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } | |
| } | |
| /* ── SECTIONS ── */ | |
| section { | |
| padding: 7rem 2rem; | |
| position: relative; | |
| } | |
| .container { max-width: 1100px; margin: 0 auto; } | |
| /* ── LIVE DEMO SECTION ── */ | |
| .demo-section { | |
| background: var(--tissue); | |
| border-top: 1px solid rgba(196, 149, 106, 0.1); | |
| border-bottom: 1px solid rgba(196, 149, 106, 0.1); | |
| } | |
| .demo-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2px; | |
| background: rgba(196, 149, 106, 0.08); | |
| border: 1px solid rgba(196, 149, 106, 0.1); | |
| } | |
| .demo-panel { | |
| background: var(--tissue); | |
| padding: 2rem; | |
| } | |
| .demo-panel-header { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.35em; | |
| color: var(--scar-pale); | |
| text-transform: uppercase; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid rgba(196, 149, 106, 0.1); | |
| } | |
| .status-dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| background: var(--scar-bright); | |
| animation: heartbeat 1.2s ease-in-out infinite; | |
| } | |
| /* Scar formation interactive demo */ | |
| .scar-demo-input { | |
| width: 100%; | |
| background: rgba(196, 149, 106, 0.05); | |
| border: 1px solid rgba(196, 149, 106, 0.15); | |
| border-radius: 0; | |
| padding: 1rem; | |
| color: var(--text-bright); | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.8rem; | |
| resize: none; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| min-height: 100px; | |
| } | |
| .scar-demo-input:focus { | |
| border-color: rgba(192, 81, 74, 0.4); | |
| } | |
| .scar-demo-input::placeholder { color: var(--text-dim); } | |
| .demo-btn { | |
| margin-top: 1rem; | |
| width: 100%; | |
| padding: 0.8rem; | |
| background: transparent; | |
| border: 1px solid var(--scar); | |
| color: var(--scar-pale); | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| cursor: none; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .demo-btn:hover { | |
| background: rgba(122, 59, 59, 0.2); | |
| border-color: var(--scar-bright); | |
| color: var(--flesh-pale); | |
| } | |
| .demo-btn::before { | |
| content: ''; | |
| position: absolute; | |
| left: -100%; | |
| top: 0; bottom: 0; | |
| width: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(192, 81, 74, 0.1), transparent); | |
| transition: left 0.4s ease; | |
| } | |
| .demo-btn:hover::before { left: 100%; } | |
| /* Scar lattice visualization */ | |
| .lattice-canvas { | |
| width: 100%; | |
| height: 280px; | |
| position: relative; | |
| overflow: hidden; | |
| background: rgba(18, 10, 6, 0.5); | |
| border: 1px solid rgba(196, 149, 106, 0.08); | |
| } | |
| .scar-node { | |
| position: absolute; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.55rem; | |
| color: var(--flesh-pale); | |
| text-align: center; | |
| cursor: none; | |
| transition: all 0.3s ease; | |
| z-index: 2; | |
| } | |
| .scar-node:hover .node-tooltip { | |
| opacity: 1; | |
| transform: translateY(-8px); | |
| } | |
| .node-tooltip { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(0px); | |
| background: var(--tissue-mid); | |
| border: 1px solid rgba(196, 149, 106, 0.2); | |
| padding: 0.5rem 0.8rem; | |
| font-size: 0.65rem; | |
| color: var(--text); | |
| white-space: nowrap; | |
| opacity: 0; | |
| transition: all 0.2s ease; | |
| pointer-events: none; | |
| z-index: 10; | |
| margin-bottom: 8px; | |
| } | |
| svg.lattice-svg { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| /* Scar feed */ | |
| .scar-feed { | |
| max-height: 280px; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--scar) transparent; | |
| } | |
| .scar-entry { | |
| padding: 0.8rem; | |
| border-left: 2px solid var(--scar); | |
| margin-bottom: 0.8rem; | |
| background: rgba(122, 59, 59, 0.08); | |
| opacity: 0; | |
| transform: translateX(-10px); | |
| animation: scar-appear 0.4s ease forwards; | |
| } | |
| .scar-entry.hallucination { border-left-color: var(--scar-bright); } | |
| .scar-entry.logical { border-left-color: var(--flesh); } | |
| .scar-entry.contextual { border-left-color: var(--nerve); } | |
| @keyframes scar-appear { | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .scar-type-badge { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.55rem; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--scar-pale); | |
| margin-bottom: 0.3rem; | |
| display: block; | |
| } | |
| .scar-claim { | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| font-style: italic; | |
| margin-bottom: 0.2rem; | |
| } | |
| .scar-correction { | |
| font-size: 0.8rem; | |
| color: var(--flesh-pale); | |
| } | |
| .scar-correction::before { | |
| content: '→ '; | |
| color: var(--scar-bright); | |
| } | |
| .scar-weight-bar { | |
| height: 2px; | |
| background: rgba(196, 149, 106, 0.1); | |
| margin-top: 0.6rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scar-weight-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--scar), var(--scar-bright)); | |
| transition: width 1s ease; | |
| } | |
| /* ── SCAR ANATOMY SECTION ── */ | |
| .anatomy-section { background: var(--bg); } | |
| .anatomy-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: start; | |
| } | |
| .anatomy-code { | |
| background: var(--tissue); | |
| border: 1px solid rgba(196, 149, 106, 0.1); | |
| border-left: 3px solid var(--scar); | |
| padding: 2rem; | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.78rem; | |
| line-height: 2; | |
| color: var(--text-dim); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .anatomy-code::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, var(--scar), transparent); | |
| } | |
| .code-kw { color: var(--flesh-pale); } | |
| .code-field { color: var(--nerve); } | |
| .code-val { color: var(--scar-pale); } | |
| .code-comment { color: rgba(138, 104, 72, 0.5); font-style: italic; } | |
| .code-type { color: var(--flesh); } | |
| .anatomy-text { padding-top: 1rem; } | |
| .section-eyebrow { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.4em; | |
| color: var(--scar-pale); | |
| text-transform: uppercase; | |
| display: block; | |
| margin-bottom: 1rem; | |
| } | |
| .section-title { | |
| font-size: clamp(2rem, 4vw, 3rem); | |
| font-weight: 300; | |
| color: var(--flesh-pale); | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| font-style: italic; | |
| } | |
| .section-body { | |
| color: var(--text-dim); | |
| font-size: 1rem; | |
| line-height: 1.8; | |
| margin-bottom: 1.2rem; | |
| } | |
| .section-body em { color: var(--flesh-pale); font-style: italic; } | |
| /* field annotations */ | |
| .field-list { margin-top: 2rem; } | |
| .field-item { | |
| display: flex; | |
| gap: 1rem; | |
| padding: 0.8rem 0; | |
| border-bottom: 1px solid rgba(196, 149, 106, 0.06); | |
| align-items: flex-start; | |
| } | |
| .field-name { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.75rem; | |
| color: var(--nerve); | |
| flex-shrink: 0; | |
| width: 140px; | |
| } | |
| .field-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-dim); | |
| line-height: 1.5; | |
| } | |
| /* ── DOMAIN MAP SECTION ── */ | |
| .domain-section { | |
| background: var(--tissue); | |
| border-top: 1px solid rgba(196, 149, 106, 0.08); | |
| border-bottom: 1px solid rgba(196, 149, 106, 0.08); | |
| } | |
| .domain-bars { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-top: 3rem; | |
| } | |
| .domain-row { | |
| display: grid; | |
| grid-template-columns: 130px 1fr 60px; | |
| align-items: center; | |
| gap: 1.2rem; | |
| } | |
| .domain-name { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.72rem; | |
| color: var(--text-dim); | |
| text-align: right; | |
| } | |
| .domain-bar-track { | |
| height: 6px; | |
| background: rgba(196, 149, 106, 0.08); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .domain-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--scar), var(--scar-bright)); | |
| width: 0%; | |
| transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1); | |
| position: relative; | |
| } | |
| .domain-bar-fill::after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| top: -2px; bottom: -2px; | |
| width: 4px; | |
| background: var(--scar-bright); | |
| filter: blur(2px); | |
| } | |
| .domain-risk { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.7rem; | |
| color: var(--scar-pale); | |
| text-align: right; | |
| } | |
| .domain-risk.high { color: var(--scar-bright); } | |
| .domain-risk.medium { color: var(--flesh); } | |
| .domain-risk.low { color: var(--text-dim); } | |
| /* ── PIPELINE SECTION ── */ | |
| .pipeline-section { background: var(--bg); } | |
| .pipeline-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0; | |
| max-width: 680px; | |
| margin: 4rem auto 0; | |
| position: relative; | |
| } | |
| .pipeline-steps::before { | |
| content: ''; | |
| position: absolute; | |
| left: 24px; | |
| top: 48px; | |
| bottom: 48px; | |
| width: 1px; | |
| background: linear-gradient(to bottom, transparent, var(--scar), var(--scar), transparent); | |
| opacity: 0.3; | |
| } | |
| .pipeline-step { | |
| display: flex; | |
| gap: 2rem; | |
| padding: 2rem 0; | |
| opacity: 0; | |
| transform: translateY(16px); | |
| transition: all 0.5s ease; | |
| } | |
| .pipeline-step.visible { opacity: 1; transform: translateY(0); } | |
| .step-icon { | |
| width: 50px; | |
| height: 50px; | |
| border: 1px solid rgba(196, 149, 106, 0.2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| flex-shrink: 0; | |
| position: relative; | |
| background: var(--tissue); | |
| } | |
| .step-icon::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| background: linear-gradient(135deg, rgba(192, 81, 74, 0.3), transparent); | |
| z-index: -1; | |
| } | |
| .step-content { flex: 1; padding-top: 0.4rem; } | |
| .step-label { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.6rem; | |
| letter-spacing: 0.35em; | |
| color: var(--scar-pale); | |
| text-transform: uppercase; | |
| display: block; | |
| margin-bottom: 0.3rem; | |
| } | |
| .step-name { | |
| font-size: 1.1rem; | |
| color: var(--flesh-pale); | |
| font-style: italic; | |
| display: block; | |
| margin-bottom: 0.4rem; | |
| } | |
| .step-desc { | |
| font-size: 0.88rem; | |
| color: var(--text-dim); | |
| line-height: 1.6; | |
| } | |
| /* ── STATS SECTION ── */ | |
| .stats-section { | |
| background: var(--tissue); | |
| border-top: 1px solid rgba(196, 149, 106, 0.08); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1px; | |
| background: rgba(196, 149, 106, 0.08); | |
| border: 1px solid rgba(196, 149, 106, 0.08); | |
| margin-top: 3rem; | |
| } | |
| .stat-card { | |
| background: var(--tissue); | |
| padding: 2.5rem 2rem; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| transition: background 0.3s; | |
| } | |
| .stat-card:hover { background: rgba(196, 149, 106, 0.04); } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--scar), transparent); | |
| transform: scaleX(0); | |
| transition: transform 0.4s ease; | |
| } | |
| .stat-card:hover::before { transform: scaleX(1); } | |
| .stat-number { | |
| font-size: 3rem; | |
| font-weight: 300; | |
| color: var(--scar-bright); | |
| display: block; | |
| line-height: 1; | |
| margin-bottom: 0.5rem; | |
| font-style: italic; | |
| } | |
| .stat-label { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| letter-spacing: 0.25em; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| } | |
| /* ── FOOTER ── */ | |
| footer { | |
| background: var(--bg); | |
| padding: 5rem 2rem 3rem; | |
| text-align: center; | |
| border-top: 1px solid rgba(196, 149, 106, 0.08); | |
| } | |
| .footer-title { | |
| font-size: 2rem; | |
| font-weight: 300; | |
| font-style: italic; | |
| color: var(--flesh-pale); | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-org { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.5em; | |
| color: var(--text-dim); | |
| display: block; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-link { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.25em; | |
| color: var(--text-dim); | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| transition: color 0.2s; | |
| } | |
| .footer-link:hover { color: var(--flesh-pale); } | |
| .footer-status { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| letter-spacing: 0.25em; | |
| color: var(--text-dim); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| /* ── SECTION HEADERS ── */ | |
| .section-header { text-align: center; margin-bottom: 1rem; } | |
| /* ── SCROLLBAR ── */ | |
| ::-webkit-scrollbar { width: 4px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--scar); } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 768px) { | |
| .demo-grid { grid-template-columns: 1fr; } | |
| .anatomy-grid { grid-template-columns: 1fr; } | |
| .stats-grid { grid-template-columns: repeat(2, 1fr); } | |
| .domain-row { grid-template-columns: 100px 1fr 50px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="cursor" id="cursor"></div> | |
| <div class="cursor-trail" id="cursorTrail"></div> | |
| <!-- VEIN BACKGROUND SVG --> | |
| <svg class="vein-bg" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice"> | |
| <path d="M0,450 C200,380 400,520 600,440 C800,360 1000,500 1200,420 C1300,380 1380,440 1440,420" stroke="rgba(122,59,59,0.4)" stroke-width="1" fill="none"/> | |
| <path d="M0,200 C300,240 500,160 700,200 C900,240 1100,180 1440,220" stroke="rgba(196,149,106,0.2)" stroke-width="0.5" fill="none"/> | |
| <path d="M0,700 C200,660 500,740 800,700 C1100,660 1300,720 1440,680" stroke="rgba(122,59,59,0.3)" stroke-width="0.8" fill="none"/> | |
| <path d="M300,0 C320,200 280,400 300,600 C320,800 290,900 310,900" stroke="rgba(196,149,106,0.15)" stroke-width="0.5" fill="none"/> | |
| <path d="M900,0 C880,150 920,350 890,550 C860,750 900,850 880,900" stroke="rgba(122,59,59,0.25)" stroke-width="0.8" fill="none"/> | |
| </svg> | |
| <!-- HERO --> | |
| <header> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="blob blob-3"></div> | |
| <div class="hero-membrane"></div> | |
| <div class="hero-content"> | |
| <span class="hero-label">Matrix · Corp · Intelligence · Substrate</span> | |
| <h1 class="hero-title"> | |
| <span class="scar-letter">E</span>CHO | |
| </h1> | |
| <p class="hero-sub">It remembers every wound</p> | |
| <div class="hero-tagline"> | |
| <span class="pulse-dot"></span> | |
| <strong style="color:var(--flesh-pale)">Qwen3.5-27B · Opus 4.6 Distilled · Rust</strong><br> | |
| A living model that crystallizes its mistakes into Scars — structured memories that grow stronger with every correction. The more it fails, the harder it is to fool. | |
| </div> | |
| </div> | |
| <div class="scroll-cue">descend</div> | |
| </header> | |
| <!-- LIVE DEMO --> | |
| <section class="demo-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <span class="section-eyebrow">Interactive Demo</span> | |
| <h2 class="section-title">Watch a Scar form</h2> | |
| </div> | |
| <div class="demo-grid"> | |
| <!-- Left: correction input --> | |
| <div class="demo-panel"> | |
| <div class="demo-panel-header"> | |
| <div class="status-dot"></div> | |
| Correction Interface | |
| </div> | |
| <label style="font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;display:block;margin-bottom:0.5rem;">What the model said</label> | |
| <textarea class="scar-demo-input" id="claimInput" placeholder="The derivative of x² is x" rows="3"></textarea> | |
| <label style="font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;display:block;margin:1rem 0 0.5rem;">Correction</label> | |
| <textarea class="scar-demo-input" id="correctionInput" placeholder="The derivative of x² is 2x" rows="3"></textarea> | |
| <button class="demo-btn" id="formScarBtn">⬡ Crystallize Scar</button> | |
| <div style="margin-top:2rem;"> | |
| <div class="demo-panel-header" style="margin-bottom:1rem;"> | |
| <div class="status-dot"></div> | |
| Active Scar Feed | |
| </div> | |
| <div class="scar-feed" id="scarFeed"> | |
| <div class="scar-entry"> | |
| <span class="scar-type-badge">Factual</span> | |
| <div class="scar-claim">"Paris is the capital of Germany"</div> | |
| <div class="scar-correction">Paris is the capital of France</div> | |
| <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:72%"></div></div> | |
| </div> | |
| <div class="scar-entry hallucination"> | |
| <span class="scar-type-badge">Hallucination</span> | |
| <div class="scar-claim">"Einstein won the Nobel Prize in 1925"</div> | |
| <div class="scar-correction">Einstein won in 1921 for photoelectric effect</div> | |
| <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:88%"></div></div> | |
| </div> | |
| <div class="scar-entry logical"> | |
| <span class="scar-type-badge">Logical</span> | |
| <div class="scar-claim">"All primes are odd therefore 2 is not prime"</div> | |
| <div class="scar-correction">2 is the only even prime number</div> | |
| <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:55%"></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: lattice visualization --> | |
| <div class="demo-panel"> | |
| <div class="demo-panel-header"> | |
| <div class="status-dot"></div> | |
| Scar Lattice — Live | |
| </div> | |
| <div class="lattice-canvas" id="latticeCanvas"> | |
| <svg class="lattice-svg" id="latticeSvg"></svg> | |
| <!-- nodes injected by JS --> | |
| </div> | |
| <div style="margin-top:1.5rem;padding:1rem;background:rgba(196,149,106,0.04);border:1px solid rgba(196,149,106,0.08);"> | |
| <div style="font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:0.8rem;">Pre-scan Output</div> | |
| <div id="scanOutput" style="font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--nerve);line-height:1.8;"> | |
| <span style="color:var(--text-dim)">// Awaiting query...</span> | |
| </div> | |
| </div> | |
| <textarea class="scar-demo-input" id="queryInput" placeholder="Ask something to trigger a pre-scan..." rows="2" style="margin-top:1rem;"></textarea> | |
| <button class="demo-btn" id="scanBtn" style="margin-top:0.5rem;">⬡ Pre-Scan Lattice</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SCAR ANATOMY --> | |
| <section class="anatomy-section"> | |
| <div class="container"> | |
| <div class="anatomy-grid"> | |
| <div class="anatomy-code"> | |
| <div><span class="code-kw">struct</span> <span class="code-type">Scar</span> {</div> | |
| <div> <span class="code-field">id</span>: <span class="code-type">Uuid</span>,</div> | |
| <div> <span class="code-field">domain</span>: <span class="code-type">String</span>, <span class="code-comment">// "math.calculus"</span></div> | |
| <div> <span class="code-field">scar_type</span>: <span class="code-type">ScarType</span>,</div> | |
| <div> <span class="code-field">original_claim</span>: <span class="code-type">String</span>,</div> | |
| <div> <span class="code-field">correction</span>: <span class="code-type">String</span>,</div> | |
| <div> <span class="code-field">confidence_at_time</span>: <span class="code-type">f32</span>, <span class="code-comment">// was 0.94</span></div> | |
| <div> <span class="code-field">times_triggered</span>: <span class="code-type">u32</span>,</div> | |
| <div> <span class="code-field">weight</span>: <span class="code-type">f32</span>, <span class="code-comment">// 0.0–1.0</span></div> | |
| <div> <span class="code-field">fingerprint</span>: <span class="code-type">Vec<f32></span>, <span class="code-comment">// 128-dim</span></div> | |
| <div> <span class="code-field">created_at</span>: <span class="code-type">DateTime<Utc></span>,</div> | |
| <div> <span class="code-field">last_triggered</span>: <span class="code-type">Option<DateTime></span>,</div> | |
| <div>}</div> | |
| <br> | |
| <div><span class="code-kw">enum</span> <span class="code-type">ScarType</span> {</div> | |
| <div> <span class="code-val">Factual</span> | <span class="code-val">Logical</span> | <span class="code-val">Contextual</span></div> | |
| <div> | <span class="code-val">Hallucination</span> | <span class="code-val">Overconfidence</span></div> | |
| <div>}</div> | |
| </div> | |
| <div class="anatomy-text"> | |
| <span class="section-eyebrow">The Primitive</span> | |
| <h2 class="section-title">A Scar is a structured wound</h2> | |
| <p class="section-body">Every correction ECHO receives becomes a <em>Scar</em> — a typed, weighted memory object that lives in the Scar Lattice. Unlike RAG or fine-tuning, Scars form instantly, cost no compute, and grow stronger every time they fire.</p> | |
| <p class="section-body">The <em>fingerprint</em> is a 128-dim semantic vector computed in pure Rust — no ML model, just math. Similarity search across 10,000 Scars completes in microseconds via Rayon parallel scan.</p> | |
| <div class="field-list"> | |
| <div class="field-item"> | |
| <span class="field-name">weight</span> | |
| <span class="field-desc">Influence strength. Increases every time this Scar fires in a pre-scan. Decays slowly over time.</span> | |
| </div> | |
| <div class="field-item"> | |
| <span class="field-name">confidence_at_time</span> | |
| <span class="field-desc">How certain the model was when it was wrong. High confidence + wrong = overconfidence Scar.</span> | |
| </div> | |
| <div class="field-item"> | |
| <span class="field-name">times_triggered</span> | |
| <span class="field-desc">How many future queries activated this Scar. A proxy for how common this mistake pattern is.</span> | |
| </div> | |
| <div class="field-item"> | |
| <span class="field-name">fingerprint</span> | |
| <span class="field-desc">128-dim semantic vector. Used for cosine similarity matching against new queries in O(n) via rayon.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- DOMAIN WEAKNESS MAP --> | |
| <section class="domain-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <span class="section-eyebrow">Domain Weakness Map</span> | |
| <h2 class="section-title" style="font-style:italic;font-weight:300;color:var(--flesh-pale);font-size:clamp(1.8rem,4vw,2.8rem);">Where it bleeds most</h2> | |
| <p style="color:var(--text-dim);max-width:500px;margin:0 auto;font-size:0.95rem;">Risk score = Scar volume + average weight + confidence at mistake. High risk domains get automatic confidence suppression.</p> | |
| </div> | |
| <div class="domain-bars" id="domainBars"> | |
| <div class="domain-row"> | |
| <span class="domain-name">math</span> | |
| <div class="domain-bar-track"><div class="domain-bar-fill" data-width="82"></div></div> | |
| <span class="domain-risk high">0.82</span> | |
| </div> | |
| <div class="domain-row"> | |
| <span class="domain-name">history</span> | |
| <div class="domain-bar-track"><div class="domain-bar-fill" data-width="71"></div></div> | |
| <span class="domain-risk high">0.71</span> | |
| </div> | |
| <div class="domain-row"> | |
| <span class="domain-name">science.physics</span> | |
| <div class="domain-bar-track"><div class="domain-bar-fill" data-width="64"></div></div> | |
| <span class="domain-risk medium">0.64</span> | |
| </div> | |
| <div class="domain-row"> | |
| <span class="domain-name">coding</span> | |
| <div class="domain-bar-track"><div class="domain-bar-fill" data-width="48"></div></div> | |
| <span class="domain-risk medium">0.48</span> | |
| </div> | |
| <div class="domain-row"> | |
| <span class="domain-name">geography</span> | |
| <div class="domain-bar-track"><div class="domain-bar-fill" data-width="31"></div></div> | |
| <span class="domain-risk low">0.31</span> | |
| </div> | |
| <div class="domain-row"> | |
| <span class="domain-name">technology</span> | |
| <div class="domain-bar-track"><div class="domain-bar-fill" data-width="22"></div></div> | |
| <span class="domain-risk low">0.22</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PIPELINE --> | |
| <section class="pipeline-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <span class="section-eyebrow">The Loop</span> | |
| <h2 class="section-title" style="font-style:italic;font-weight:300;color:var(--flesh-pale);font-size:clamp(1.8rem,4vw,2.8rem);">How ECHO heals itself</h2> | |
| </div> | |
| <div class="pipeline-steps" id="pipeline"> | |
| <div class="pipeline-step"> | |
| <div class="step-icon">💬</div> | |
| <div class="step-content"> | |
| <span class="step-label">Input</span> | |
| <span class="step-name">User prompt arrives</span> | |
| <p class="step-desc">Raw query enters ECHO. Before a single token is generated, the Scar system intercepts.</p> | |
| </div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="step-icon">🔬</div> | |
| <div class="step-content"> | |
| <span class="step-label">Pre-Scan</span> | |
| <span class="step-name">Lattice searched for wounds</span> | |
| <p class="step-desc">128-dim fingerprint computed in Rust. Cosine similarity scan across all active Scars via Rayon. Top-k matches retrieved in microseconds.</p> | |
| </div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="step-icon">⚠️</div> | |
| <div class="step-content"> | |
| <span class="step-label">Caution Injection</span> | |
| <span class="step-name">Past wounds prepended</span> | |
| <p class="step-desc">If matching Scars found — a caution prompt is prepended: what was wrong before, what the correction was. Confidence suppressed up to 30% in risky domains.</p> | |
| </div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="step-icon">🧠</div> | |
| <div class="step-content"> | |
| <span class="step-label">Generation</span> | |
| <span class="step-name">Qwen3.5-27B runs in Rust</span> | |
| <p class="step-desc">Full inference via candle. The base model generates with scar context already in its window — no architecture change needed, just smarter input.</p> | |
| </div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="step-icon">🩸</div> | |
| <div class="step-content"> | |
| <span class="step-label">Correction</span> | |
| <span class="step-name">User corrects → Scar forms</span> | |
| <p class="step-desc">POST /v1/echo/correct. Scar crystallizes instantly. Duplicate check — if a similar Scar exists, its weight increases instead of creating a duplicate. Saved to disk atomically.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- STATS --> | |
| <section class="stats-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <span class="section-eyebrow">Architecture</span> | |
| <h2 class="section-title" style="font-style:italic;font-weight:300;color:var(--flesh-pale);font-size:clamp(1.8rem,4vw,2.8rem);">By the numbers</h2> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <span class="stat-number" data-target="27">0</span> | |
| <span class="stat-label">Billion parameters</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number" data-target="128">0</span> | |
| <span class="stat-label">Scar fingerprint dims</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number" data-target="10000">0</span> | |
| <span class="stat-label">Max active Scars</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number" data-target="5">0</span> | |
| <span class="stat-label">Scar types</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <span class="footer-title">Matrix ECHO</span> | |
| <span class="footer-org">Matrix · Corp · V1 · Rust · Qwen3.5-27B</span> | |
| <div class="footer-links"> | |
| <a class="footer-link" href="https://huggingface.co/Matrix-Corp">HuggingFace</a> | |
| <a class="footer-link" href="https://github.com/zapgaming">GitHub</a> | |
| <a class="footer-link" href="https://huggingface.co/Jackrong/Qwen3.5-27B-Claude-4.6-Opus-Reasoning-Distilled">Base Model</a> | |
| </div> | |
| <div class="footer-status"> | |
| <span class="pulse-dot" style="width:6px;height:6px;"></span> | |
| Architecture Complete · Build In Progress | |
| </div> | |
| </footer> | |
| <script> | |
| // ── CURSOR ── | |
| const cursor = document.getElementById('cursor'); | |
| const trail = document.getElementById('cursorTrail'); | |
| let mx = 0, my = 0, tx = 0, ty = 0; | |
| document.addEventListener('mousemove', e => { | |
| mx = e.clientX; my = e.clientY; | |
| cursor.style.left = mx - 6 + 'px'; | |
| cursor.style.top = my - 6 + 'px'; | |
| }); | |
| setInterval(() => { | |
| tx += (mx - tx) * 0.12; | |
| ty += (my - ty) * 0.12; | |
| trail.style.left = tx - 16 + 'px'; | |
| trail.style.top = ty - 16 + 'px'; | |
| }, 16); | |
| // ── SCAR LATTICE VISUALIZATION ── | |
| const canvas = document.getElementById('latticeCanvas'); | |
| const svg = document.getElementById('latticeSvg'); | |
| const scarData = [ | |
| { id: 1, x: 20, y: 40, r: 18, domain: 'math', label: 'Math', type: 'Factual', weight: 0.72, color: '#C0514A' }, | |
| { id: 2, x: 45, y: 25, r: 14, domain: 'math', label: 'Math', type: 'Logical', weight: 0.55, color: '#C0514A' }, | |
| { id: 3, x: 65, y: 55, r: 22, domain: 'history', label: 'Hist', type: 'Hallucination', weight: 0.88, color: '#8B5E3C' }, | |
| { id: 4, x: 30, y: 70, r: 12, domain: 'general', label: 'Gen', type: 'Contextual', weight: 0.34, color: '#7A3B3B' }, | |
| { id: 5, x: 75, y: 30, r: 16, domain: 'science', label: 'Sci', type: 'Factual', weight: 0.61, color: '#C4956A' }, | |
| { id: 6, x: 85, y: 70, r: 10, domain: 'coding', label: 'Code', type: 'Logical', weight: 0.42, color: '#8B5E3C' }, | |
| { id: 7, x: 50, y: 80, r: 13, domain: 'history', label: 'Hist', type: 'Overconfidence', weight: 0.67, color: '#8B5E3C' }, | |
| ]; | |
| const edges = [[1,2],[1,4],[2,5],[3,7],[5,6],[3,4]]; | |
| function renderLattice() { | |
| const w = canvas.offsetWidth; | |
| const h = canvas.offsetHeight; | |
| // Draw edges | |
| svg.innerHTML = ''; | |
| edges.forEach(([a, b]) => { | |
| const na = scarData.find(s => s.id === a); | |
| const nb = scarData.find(s => s.id === b); | |
| const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); | |
| line.setAttribute('x1', na.x / 100 * w); | |
| line.setAttribute('y1', na.y / 100 * h); | |
| line.setAttribute('x2', nb.x / 100 * w); | |
| line.setAttribute('y2', nb.y / 100 * h); | |
| line.setAttribute('stroke', 'rgba(196,149,106,0.15)'); | |
| line.setAttribute('stroke-width', '1'); | |
| line.setAttribute('stroke-dasharray', '3,4'); | |
| svg.appendChild(line); | |
| }); | |
| // Remove old nodes | |
| canvas.querySelectorAll('.scar-node').forEach(n => n.remove()); | |
| scarData.forEach(s => { | |
| const node = document.createElement('div'); | |
| node.className = 'scar-node'; | |
| node.style.cssText = ` | |
| left: ${s.x / 100 * w - s.r}px; | |
| top: ${s.y / 100 * h - s.r}px; | |
| width: ${s.r * 2}px; | |
| height: ${s.r * 2}px; | |
| background: radial-gradient(circle at 35% 35%, ${s.color}88, ${s.color}33); | |
| border: 1px solid ${s.color}66; | |
| box-shadow: 0 0 ${s.weight * 20}px ${s.color}44; | |
| `; | |
| node.innerHTML = ` | |
| <span style="font-size:${Math.max(0.45, s.r * 0.04)}rem">${s.label}</span> | |
| <div class="node-tooltip">${s.type} · weight: ${s.weight.toFixed(2)} · ${s.domain}</div> | |
| `; | |
| canvas.appendChild(node); | |
| }); | |
| } | |
| renderLattice(); | |
| window.addEventListener('resize', renderLattice); | |
| // ── SCAR FORMATION ── | |
| const scarFeed = document.getElementById('scarFeed'); | |
| let scarCount = scarData.length; | |
| const types = ['Factual', 'Logical', 'Hallucination', 'Contextual', 'Overconfidence']; | |
| const domains = ['math', 'history', 'coding', 'science.physics', 'general', 'geography']; | |
| const typeClasses = { Factual: '', Logical: 'logical', Hallucination: 'hallucination', Contextual: 'contextual', Overconfidence: 'hallucination' }; | |
| document.getElementById('formScarBtn').addEventListener('click', () => { | |
| const claim = document.getElementById('claimInput').value.trim(); | |
| const correction = document.getElementById('correctionInput').value.trim(); | |
| if (!claim || !correction) return; | |
| const type = types[Math.floor(Math.random() * types.length)]; | |
| const domain = domains[Math.floor(Math.random() * domains.length)]; | |
| const weight = (0.4 + Math.random() * 0.5).toFixed(2); | |
| const entry = document.createElement('div'); | |
| entry.className = `scar-entry ${typeClasses[type]}`; | |
| entry.style.animationDelay = '0s'; | |
| entry.innerHTML = ` | |
| <span class="scar-type-badge">${type} · ${domain}</span> | |
| <div class="scar-claim">"${claim.slice(0, 60)}${claim.length > 60 ? '...' : ''}"</div> | |
| <div class="scar-correction">${correction.slice(0, 60)}${correction.length > 60 ? '...' : ''}</div> | |
| <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:0%"></div></div> | |
| `; | |
| scarFeed.prepend(entry); | |
| setTimeout(() => { | |
| entry.querySelector('.scar-weight-fill').style.width = (weight * 100) + '%'; | |
| }, 100); | |
| // Add node to lattice | |
| const colors = { Factual:'#C0514A', Logical:'#C4956A', Hallucination:'#7A3B3B', Contextual:'#8B5E3C', Overconfidence:'#C0514A' }; | |
| scarData.push({ | |
| id: ++scarCount, | |
| x: 10 + Math.random() * 80, | |
| y: 10 + Math.random() * 80, | |
| r: 8 + Math.random() * 14, | |
| domain, label: domain.split('.')[0].slice(0,4), | |
| type, weight: parseFloat(weight), | |
| color: colors[type] | |
| }); | |
| if (scarData.length > 2) { | |
| edges.push([scarData.length - 1, scarData.length - 3]); | |
| } | |
| renderLattice(); | |
| document.getElementById('claimInput').value = ''; | |
| document.getElementById('correctionInput').value = ''; | |
| }); | |
| // ── PRE-SCAN DEMO ── | |
| document.getElementById('scanBtn').addEventListener('click', () => { | |
| const query = document.getElementById('queryInput').value.trim(); | |
| if (!query) return; | |
| const out = document.getElementById('scanOutput'); | |
| out.innerHTML = '<span style="color:var(--scar-pale)">// scanning lattice...</span>'; | |
| setTimeout(() => { | |
| const matches = Math.floor(Math.random() * 4); | |
| const domain = domains[Math.floor(Math.random() * domains.length)]; | |
| const risk = (Math.random() * 0.9).toFixed(2); | |
| const suppression = (Math.min(0.3, Math.random() * 0.35)).toFixed(2); | |
| if (matches === 0) { | |
| out.innerHTML = `<span style="color:var(--text-dim)">// no relevant scars found</span> | |
| <span style="color:var(--nerve)">caution_prompt: null</span> | |
| <span style="color:var(--nerve)">suppressed_confidence: 0.00</span> | |
| <span style="color:var(--text-dim)">// proceeding with full confidence</span>`; | |
| } else { | |
| out.innerHTML = `<span style="color:var(--scar-bright)">// ${matches} scar${matches > 1 ? 's' : ''} matched</span> | |
| <span style="color:var(--nerve)">domain: "${domain}"</span> | |
| <span style="color:var(--nerve)">domain_risk: ${risk}</span> | |
| <span style="color:var(--nerve)">suppressed_confidence: -${suppression}</span> | |
| <span style="color:var(--scar-pale)">caution_prompt: "[ECHO WARNING] Similar</span> | |
| <span style="color:var(--scar-pale)"> mistakes in ${domain}. Be careful."</span>`; | |
| } | |
| document.getElementById('queryInput').value = ''; | |
| }, 600); | |
| }); | |
| // ── PIPELINE SCROLL ANIMATION ── | |
| const observer = new IntersectionObserver(entries => { | |
| entries.forEach((entry, i) => { | |
| if (entry.isIntersecting) { | |
| setTimeout(() => entry.target.classList.add('visible'), entry.target.dataset.delay || 0); | |
| } | |
| }); | |
| }, { threshold: 0.2 }); | |
| document.querySelectorAll('.pipeline-step').forEach((step, i) => { | |
| step.dataset.delay = i * 100; | |
| observer.observe(step); | |
| }); | |
| // ── DOMAIN BAR ANIMATION ── | |
| const barObserver = new IntersectionObserver(entries => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.querySelectorAll('.domain-bar-fill').forEach(bar => { | |
| setTimeout(() => { | |
| bar.style.width = bar.dataset.width + '%'; | |
| }, 200); | |
| }); | |
| barObserver.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.3 }); | |
| barObserver.observe(document.getElementById('domainBars')); | |
| // ── STAT COUNTER ANIMATION ── | |
| function animateCounter(el, target, duration = 1500) { | |
| const start = performance.now(); | |
| const update = now => { | |
| const t = Math.min((now - start) / duration, 1); | |
| const ease = 1 - Math.pow(1 - t, 3); | |
| const val = Math.floor(ease * target); | |
| el.textContent = val >= 1000 ? val.toLocaleString() : val; | |
| if (t < 1) requestAnimationFrame(update); | |
| }; | |
| requestAnimationFrame(update); | |
| } | |
| const statObserver = new IntersectionObserver(entries => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.querySelectorAll('[data-target]').forEach(el => { | |
| animateCounter(el, parseInt(el.dataset.target)); | |
| }); | |
| statObserver.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.4 }); | |
| statObserver.observe(document.querySelector('.stats-grid')); | |
| </script> | |
| </body> | |
| </html> |