Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Matrix Vexa — Crystalline Intelligence</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:wght@300;400;500&family=Fira+Code:wght@300;400&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #fdf8f5; | |
| --bg2: #faf3ee; | |
| --pink: #f4a7c3; | |
| --lavender: #c4b5f4; | |
| --mint: #a8e6cf; | |
| --peach: #ffcba4; | |
| --sky: #a8d8ea; | |
| --rose: #f9c6cf; | |
| --gold: #f7d794; | |
| --lilac: #dbb8f5; | |
| --text: #5a4a5a; | |
| --text-soft: #9a8a9a; | |
| --white: #fff; | |
| --panel: rgba(255,255,255,0.6); | |
| --border: rgba(196,181,244,0.25); | |
| } | |
| *{box-sizing:border-box;margin:0;padding:0;} | |
| html{scroll-behavior:smooth;} | |
| body{ | |
| background:var(--bg); | |
| font-family:'DM Sans',sans-serif; | |
| color:var(--text); | |
| overflow-x:hidden; | |
| cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpolygon points='10,1 13,8 20,8 14,13 16,20 10,16 4,20 6,13 0,8 7,8' fill='%23f4a7c3' opacity='0.8'/%3E%3C/svg%3E") 10 10, auto; | |
| } | |
| /* ── Dreamy gradient bg ── */ | |
| body::before { | |
| content:''; | |
| position:fixed;inset:0; | |
| background: | |
| radial-gradient(ellipse 70% 50% at 15% 20%, rgba(244,167,195,0.18) 0%, transparent 60%), | |
| radial-gradient(ellipse 60% 70% at 85% 80%, rgba(196,181,244,0.18) 0%, transparent 60%), | |
| radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,230,207,0.10) 0%, transparent 55%), | |
| radial-gradient(ellipse 40% 60% at 80% 15%, rgba(255,203,164,0.14) 0%, transparent 50%); | |
| pointer-events:none;z-index:0; | |
| animation:bgShift 12s ease-in-out infinite alternate; | |
| } | |
| @keyframes bgShift { | |
| 0%{filter:hue-rotate(0deg);} | |
| 100%{filter:hue-rotate(20deg);} | |
| } | |
| /* Rain canvas */ | |
| #rainCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.7;} | |
| ::-webkit-scrollbar{width:6px;} | |
| ::-webkit-scrollbar-track{background:var(--bg);} | |
| ::-webkit-scrollbar-thumb{background:var(--lavender);border-radius:3px;} | |
| .wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 36px 120px;} | |
| /* ── HERO ── */ | |
| .hero{ | |
| min-height:100vh; | |
| display:flex;flex-direction:column; | |
| justify-content:center;align-items:center; | |
| text-align:center; | |
| padding:100px 0 60px; | |
| position:relative; | |
| } | |
| .hero-crystal{ | |
| width:200px;height:200px; | |
| position:relative;margin-bottom:32px; | |
| animation:crystalFloat 4s ease-in-out infinite; | |
| } | |
| @keyframes crystalFloat{ | |
| 0%,100%{transform:translateY(0) rotate(0deg);} | |
| 50%{transform:translateY(-16px) rotate(8deg);} | |
| } | |
| .hero-badge{ | |
| display:inline-flex;align-items:center;gap:8px; | |
| padding:8px 20px; | |
| background:rgba(244,167,195,0.15); | |
| border:1px solid rgba(244,167,195,0.4); | |
| border-radius:100px; | |
| font-family:'Fira Code',monospace;font-size:10px; | |
| color:var(--pink);letter-spacing:3px; | |
| margin-bottom:24px; | |
| animation:badgePulse 3s ease-in-out infinite; | |
| } | |
| @keyframes badgePulse{ | |
| 0%,100%{box-shadow:0 0 0 0 rgba(244,167,195,0.3);} | |
| 50%{box-shadow:0 0 0 12px rgba(244,167,195,0);} | |
| } | |
| .hero-title{ | |
| font-family:'Playfair Display',serif; | |
| font-size:clamp(64px,12vw,140px); | |
| font-weight:900; | |
| line-height:0.9; | |
| margin-bottom:16px; | |
| background:linear-gradient(135deg, | |
| var(--pink) 0%, | |
| var(--lavender) 35%, | |
| var(--sky) 65%, | |
| var(--mint) 100%); | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent; | |
| background-clip:text; | |
| filter:drop-shadow(0 4px 24px rgba(196,181,244,0.4)); | |
| animation:titleGlow 3s ease-in-out infinite alternate; | |
| background-size:200% 200%; | |
| } | |
| @keyframes titleGlow{ | |
| 0%{filter:drop-shadow(0 4px 24px rgba(244,167,195,0.4));background-position:0% 50%;} | |
| 100%{filter:drop-shadow(0 4px 40px rgba(196,181,244,0.6));background-position:100% 50%;} | |
| } | |
| .hero-sub{ | |
| font-family:'Playfair Display',serif; | |
| font-size:clamp(14px,2vw,20px); | |
| font-style:italic; | |
| color:var(--text-soft); | |
| margin-bottom:32px; | |
| letter-spacing:1px; | |
| } | |
| .hero-desc{ | |
| font-size:15px;color:var(--text);line-height:1.9; | |
| max-width:580px;margin:0 auto 48px;font-weight:300; | |
| } | |
| .hero-desc strong{color:var(--lavender);font-weight:500;} | |
| .hero-pills{ | |
| display:flex;flex-wrap:wrap;gap:8px; | |
| justify-content:center;margin-bottom:56px; | |
| } | |
| .pill{ | |
| padding:7px 18px;border-radius:100px; | |
| font-size:11px;font-weight:500;letter-spacing:0.5px; | |
| backdrop-filter:blur(8px); | |
| transition:transform 0.2s,box-shadow 0.2s; | |
| } | |
| .pill:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.1);} | |
| .p1{background:rgba(244,167,195,0.2);border:1px solid rgba(244,167,195,0.4);color:#c4617f;} | |
| .p2{background:rgba(196,181,244,0.2);border:1px solid rgba(196,181,244,0.4);color:#7c5cbf;} | |
| .p3{background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75;} | |
| .p4{background:rgba(255,203,164,0.2);border:1px solid rgba(255,203,164,0.4);color:#c47a3a;} | |
| .p5{background:rgba(168,216,234,0.2);border:1px solid rgba(168,216,234,0.4);color:#3a7a9b;} | |
| .scroll-down{ | |
| font-family:'Fira Code',monospace;font-size:10px; | |
| color:var(--text-soft);letter-spacing:3px; | |
| animation:scrollHint 2s ease-in-out infinite; | |
| } | |
| @keyframes scrollHint{0%,100%{opacity:0.4;transform:translateY(0);}50%{opacity:1;transform:translateY(6px);}} | |
| /* ── SECTION SYSTEM ── */ | |
| .sec{margin-top:100px;opacity:0;transform:translateY(32px);transition:opacity 0.8s ease,transform 0.8s ease;} | |
| .sec.vis{opacity:1;transform:translateY(0);} | |
| .sec-label{ | |
| font-family:'Fira Code',monospace;font-size:10px; | |
| color:var(--pink);letter-spacing:4px; | |
| margin-bottom:8px;text-align:center; | |
| } | |
| .sec-title{ | |
| font-family:'Playfair Display',serif; | |
| font-size:clamp(32px,5vw,56px); | |
| font-weight:700;text-align:center; | |
| color:var(--text);margin-bottom:12px; | |
| } | |
| .sec-title em{ | |
| font-style:italic; | |
| background:linear-gradient(135deg,var(--pink),var(--lavender)); | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent; | |
| background-clip:text; | |
| } | |
| .sec-sub{ | |
| font-size:14px;color:var(--text-soft);text-align:center; | |
| max-width:560px;margin:0 auto 48px;line-height:1.8; | |
| } | |
| .sec-rule{ | |
| width:80px;height:2px;margin:16px auto 48px; | |
| background:linear-gradient(90deg,var(--pink),var(--lavender),var(--mint)); | |
| border-radius:1px; | |
| } | |
| /* ── GLASS CARDS ── */ | |
| .glass{ | |
| background:rgba(255,255,255,0.55); | |
| backdrop-filter:blur(16px); | |
| border:1px solid rgba(255,255,255,0.7); | |
| border-radius:20px; | |
| box-shadow:0 8px 32px rgba(196,181,244,0.12), 0 2px 8px rgba(244,167,195,0.08); | |
| transition:transform 0.3s,box-shadow 0.3s; | |
| } | |
| .glass:hover{ | |
| transform:translateY(-4px); | |
| box-shadow:0 16px 48px rgba(196,181,244,0.2), 0 4px 16px rgba(244,167,195,0.12); | |
| } | |
| /* ── GLYPH ANATOMY ── */ | |
| .anatomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;} | |
| .glyph-canvas-wrap{ | |
| border-radius:20px;overflow:hidden; | |
| background:rgba(255,255,255,0.4); | |
| border:1px solid rgba(255,255,255,0.7); | |
| height:440px;position:relative; | |
| } | |
| .glyph-canvas-wrap canvas{width:100%;height:100%;} | |
| .gc-label{ | |
| position:absolute;top:16px;left:16px; | |
| font-family:'Fira Code',monospace;font-size:9px; | |
| color:var(--lavender);letter-spacing:3px; | |
| } | |
| .fields-list{display:flex;flex-direction:column;gap:6px;} | |
| .field-row{ | |
| display:grid;grid-template-columns:110px 100px 1fr; | |
| align-items:center;gap:12px; | |
| padding:12px 16px; | |
| border-radius:12px; | |
| background:rgba(255,255,255,0.6); | |
| border:1px solid rgba(255,255,255,0.8); | |
| transition:all 0.2s; | |
| } | |
| .field-row:hover{background:rgba(255,255,255,0.9);transform:translateX(4px);} | |
| .fr-name{font-family:'Fira Code',monospace;font-size:10px;font-weight:400;} | |
| .fr-type{font-family:'Fira Code',monospace;font-size:9px;color:var(--text-soft);} | |
| .fr-desc{font-size:10px;color:var(--text);line-height:1.5;} | |
| .fr-c1 .fr-name{color:#c4617f;} | |
| .fr-c2 .fr-name{color:#7c5cbf;} | |
| .fr-c3 .fr-name{color:#4a9b75;} | |
| .fr-c4 .fr-name{color:#c47a3a;} | |
| .fr-c5 .fr-name{color:#3a7a9b;} | |
| /* ── EDGES ── */ | |
| .edges-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;} | |
| .edge-card{ | |
| padding:16px 14px;border-radius:16px; | |
| background:rgba(255,255,255,0.6); | |
| border:1px solid rgba(255,255,255,0.8); | |
| text-align:center; | |
| transition:all 0.2s; | |
| } | |
| .edge-card:hover{transform:translateY(-4px);background:rgba(255,255,255,0.9);} | |
| .ec-gem{font-size:24px;margin-bottom:8px;} | |
| .ec-name{font-family:'Fira Code',monospace;font-size:9px;letter-spacing:1px;margin-bottom:4px;} | |
| .ec-ex{font-size:9px;color:var(--text-soft);font-style:italic;margin-bottom:4px;} | |
| .ec-desc{font-size:9px;color:var(--text);line-height:1.5;} | |
| /* ── CRYSTALLIZATION ── */ | |
| .cryst-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;} | |
| .phase-list{display:flex;flex-direction:column;gap:8px;} | |
| .phase-card{ | |
| display:grid;grid-template-columns:64px 1fr; | |
| border-radius:16px;overflow:hidden; | |
| background:rgba(255,255,255,0.55); | |
| border:1px solid rgba(255,255,255,0.8); | |
| transition:all 0.2s; | |
| } | |
| .phase-card:hover{transform:translateX(4px);background:rgba(255,255,255,0.85);} | |
| .phase-left{ | |
| display:flex;flex-direction:column;align-items:center;justify-content:center; | |
| padding:16px 8px; | |
| font-family:'Playfair Display',serif; | |
| } | |
| .pl-num{font-size:28px;font-weight:900;line-height:1;} | |
| .pl-time{font-family:'Fira Code',monospace;font-size:7px;color:var(--text-soft);letter-spacing:1px;margin-top:2px;} | |
| .phase-right{padding:16px 20px;} | |
| .pr-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;} | |
| .pr-desc{font-size:10px;color:var(--text-soft);line-height:1.7;} | |
| .ph1 .phase-left{background:rgba(244,167,195,0.12);} .ph1 .pl-num{color:var(--pink);} | |
| .ph2 .phase-left{background:rgba(196,181,244,0.12);} .ph2 .pl-num{color:var(--lavender);} | |
| .ph3 .phase-left{background:rgba(168,230,207,0.12);} .ph3 .pl-num{color:var(--mint);} | |
| .ph4 .phase-left{background:rgba(255,203,164,0.12);} .ph4 .pl-num{color:var(--peach);} | |
| .ph5 .phase-left{background:rgba(168,216,234,0.12);} .ph5 .pl-num{color:var(--sky);} | |
| /* Crystal timer */ | |
| .crystal-timer{ | |
| border-radius:20px; | |
| background:rgba(255,255,255,0.6); | |
| border:1px solid rgba(255,255,255,0.8); | |
| padding:28px 24px; | |
| position:sticky;top:32px; | |
| text-align:center; | |
| } | |
| .ct-gem{font-size:48px;margin-bottom:8px;animation:gemSpin 6s linear infinite;} | |
| @keyframes gemSpin{0%{transform:rotateY(0);}100%{transform:rotateY(360deg);}} | |
| .ct-title{ | |
| font-family:'Playfair Display',serif;font-size:13px; | |
| color:var(--text-soft);margin-bottom:16px;letter-spacing:1px; | |
| } | |
| .ct-time{ | |
| font-family:'Playfair Display',serif; | |
| font-size:56px;font-weight:900; | |
| background:linear-gradient(135deg,var(--pink),var(--lavender)); | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent; | |
| background-clip:text; | |
| line-height:1;margin-bottom:4px; | |
| } | |
| .ct-unit{font-size:10px;color:var(--text-soft);letter-spacing:3px;margin-bottom:20px;font-family:'Fira Code',monospace;} | |
| .ct-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;} | |
| .cb-row{text-align:left;} | |
| .cb-labels{display:flex;justify-content:space-between;font-size:9px;margin-bottom:3px;} | |
| .cb-k{color:var(--text-soft);} | |
| .cb-v{font-family:'Fira Code',monospace;} | |
| .cb-track{height:6px;background:rgba(196,181,244,0.15);border-radius:3px;overflow:hidden;} | |
| .cb-fill{height:100%;border-radius:3px;transition:width 0.1s linear;} | |
| .cf1{background:linear-gradient(90deg,var(--pink),var(--rose));} | |
| .cf2{background:linear-gradient(90deg,var(--lavender),var(--lilac));} | |
| .cf3{background:linear-gradient(90deg,var(--mint),var(--sky));} | |
| .cf4{background:linear-gradient(90deg,var(--peach),var(--gold));} | |
| .cf5{background:linear-gradient(90deg,var(--sky),var(--mint));} | |
| .ct-btn{ | |
| width:100%;padding:12px;border-radius:12px; | |
| background:linear-gradient(135deg,var(--pink),var(--lavender)); | |
| border:none;color:white; | |
| font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500; | |
| cursor:pointer;letter-spacing:1px; | |
| transition:all 0.2s;box-shadow:0 4px 16px rgba(196,181,244,0.3); | |
| } | |
| .ct-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(196,181,244,0.4);} | |
| .ct-stats{margin-top:16px;display:flex;flex-direction:column;gap:4px;} | |
| .cs-row{display:flex;justify-content:space-between;font-size:10px;padding:5px 0;border-bottom:1px solid rgba(196,181,244,0.1);} | |
| .cs-k{color:var(--text-soft);} | |
| .cs-v{font-family:'Fira Code',monospace;color:var(--lavender);} | |
| /* ── LATTICE ── */ | |
| .lattice-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;} | |
| .lattice-canvas-box{ | |
| border-radius:20px;height:480px;overflow:hidden; | |
| background:rgba(255,255,255,0.4); | |
| border:1px solid rgba(255,255,255,0.7); | |
| position:relative; | |
| } | |
| .lattice-canvas-box canvas{width:100%;height:100%;} | |
| .lc-tag{ | |
| position:absolute;top:16px;left:16px; | |
| font-family:'Fira Code',monospace;font-size:9px; | |
| color:var(--lavender);letter-spacing:3px; | |
| } | |
| .lc-legend{ | |
| position:absolute;bottom:16px;left:16px; | |
| display:flex;flex-direction:column;gap:6px; | |
| } | |
| .ll{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--text-soft);} | |
| .ll-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} | |
| .density-cards{display:flex;flex-direction:column;gap:8px;} | |
| .dc{ | |
| display:grid;grid-template-columns:80px 1fr 70px 80px; | |
| align-items:center;gap:12px; | |
| padding:14px 16px;border-radius:14px; | |
| background:rgba(255,255,255,0.55); | |
| border:1px solid rgba(255,255,255,0.8); | |
| transition:all 0.2s; | |
| } | |
| .dc:hover{background:rgba(255,255,255,0.9);transform:translateX(4px);} | |
| .dc.header{ | |
| background:rgba(196,181,244,0.08); | |
| border-color:rgba(196,181,244,0.2); | |
| font-family:'Fira Code',monospace;font-size:9px; | |
| color:var(--lavender);letter-spacing:2px; | |
| } | |
| .dc-tier{font-weight:600;color:var(--text);} | |
| .dc-glyphs{font-family:'Fira Code',monospace;font-size:11px;color:var(--lavender);} | |
| .dc-ram{font-family:'Fira Code',monospace;font-size:11px;color:var(--mint);} | |
| .dc-use{font-size:10px;color:var(--text-soft);} | |
| .dc.max .dc-tier{color:var(--pink);} | |
| .dc.max .dc-glyphs{color:var(--pink);} | |
| /* ── LUME ── */ | |
| .lume-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;} | |
| .lume-box{ | |
| border-radius:20px;overflow:hidden; | |
| background:rgba(255,255,255,0.5); | |
| border:1px solid rgba(255,255,255,0.8); | |
| } | |
| .lume-tabbar{ | |
| display:flex;background:rgba(255,255,255,0.6); | |
| border-bottom:1px solid rgba(196,181,244,0.15); | |
| } | |
| .ltab{ | |
| padding:10px 18px;font-family:'Fira Code',monospace; | |
| font-size:9px;letter-spacing:2px;color:var(--text-soft); | |
| cursor:pointer;border-bottom:2px solid transparent; | |
| transition:all 0.15s; | |
| } | |
| .ltab:hover{color:var(--text);} | |
| .ltab.on{color:var(--lavender);border-bottom-color:var(--lavender);} | |
| .lume-code{ | |
| padding:24px;font-family:'Fira Code',monospace; | |
| font-size:11px;line-height:2;min-height:380px; | |
| overflow-x:auto; | |
| } | |
| .lc-b{display:none;} .lc-b.on{display:block;} | |
| .lkw{color:#c4617f;} .lid{color:#7c5cbf;} .lstr{color:#4a9b75;} | |
| .lnum{color:#c47a3a;} .lcm{color:#c0b4c0;font-style:italic;} .lprop{color:#3a7a9b;} | |
| .lume-explain{display:flex;flex-direction:column;gap:8px;} | |
| .le{ | |
| padding:16px 18px;border-radius:14px; | |
| background:rgba(255,255,255,0.55); | |
| border:1px solid rgba(255,255,255,0.8); | |
| border-left:3px solid; | |
| transition:all 0.2s; | |
| } | |
| .le:hover{transform:translateX(4px);background:rgba(255,255,255,0.9);} | |
| .le-n{font-family:'Fira Code',monospace;font-size:10px;margin-bottom:4px;} | |
| .le-d{font-size:10px;color:var(--text-soft);line-height:1.7;} | |
| .le.e1{border-left-color:var(--pink);} .le.e1 .le-n{color:#c4617f;} | |
| .le.e2{border-left-color:var(--lavender);} .le.e2 .le-n{color:#7c5cbf;} | |
| .le.e3{border-left-color:var(--mint);} .le.e3 .le-n{color:#4a9b75;} | |
| .le.e4{border-left-color:var(--peach);} .le.e4 .le-n{color:#c47a3a;} | |
| .le.e5{border-left-color:var(--sky);} .le.e5 .le-n{color:#3a7a9b;} | |
| .le.e6{border-left-color:var(--lilac);} .le.e6 .le-n{color:#9c5cbf;} | |
| .le.e7{border-left-color:var(--gold);} .le.e7 .le-n{color:#b47a2a;} | |
| /* ── THREADS ── */ | |
| .threads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} | |
| .thread-card{ | |
| padding:28px 24px;border-radius:20px; | |
| background:rgba(255,255,255,0.55); | |
| border:1px solid rgba(255,255,255,0.8); | |
| position:relative;overflow:hidden; | |
| transition:all 0.3s; | |
| } | |
| .thread-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.85);} | |
| .thread-card::before{ | |
| content:'';position:absolute;top:0;left:0;right:0;height:4px; | |
| } | |
| .tc1::before{background:linear-gradient(90deg,var(--pink),var(--rose));} | |
| .tc2::before{background:linear-gradient(90deg,var(--lavender),var(--lilac));} | |
| .tc3::before{background:linear-gradient(90deg,var(--gold),var(--peach));} | |
| .tc-pulse{ | |
| position:absolute;top:20px;right:20px; | |
| width:10px;height:10px;border-radius:50%; | |
| } | |
| .tcp1{background:var(--pink);animation:tcPulse 1.5s ease-in-out infinite;} | |
| .tcp2{background:var(--lavender);animation:tcPulse 1.5s ease-in-out infinite 0.5s;} | |
| .tcp3{background:var(--gold);animation:tcPulse 1.5s ease-in-out infinite 1s;} | |
| @keyframes tcPulse{ | |
| 0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 currentColor;} | |
| 50%{transform:scale(1.4);opacity:0.6;box-shadow:0 0 0 6px transparent;} | |
| } | |
| .tc-icon{font-size:32px;margin-bottom:12px;} | |
| .tc-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;} | |
| .tc-desc{font-size:11px;color:var(--text-soft);line-height:1.8;margin-bottom:16px;} | |
| .tc-stats{display:flex;flex-direction:column;gap:4px;} | |
| .ts{display:flex;justify-content:space-between;font-size:10px;padding:5px 0;border-bottom:1px solid rgba(196,181,244,0.1);} | |
| .ts-k{color:var(--text-soft);} | |
| .ts-v{font-family:'Fira Code',monospace;} | |
| .tc1 .ts-v{color:#c4617f;} .tc2 .ts-v{color:#7c5cbf;} .tc3 .ts-v{color:#b47a2a;} | |
| /* ── COMPARE ── */ | |
| .compare-table{width:100%;border-collapse:collapse;border-radius:16px;overflow:hidden;} | |
| .compare-table th{ | |
| font-size:10px;letter-spacing:2px;padding:14px 16px; | |
| text-align:left;background:rgba(196,181,244,0.12); | |
| color:var(--lavender);font-weight:500;font-family:'Fira Code',monospace; | |
| border-bottom:1px solid rgba(196,181,244,0.2); | |
| } | |
| .compare-table td{ | |
| padding:12px 16px;border-bottom:1px solid rgba(196,181,244,0.08); | |
| font-size:11px; | |
| background:rgba(255,255,255,0.5); | |
| } | |
| .compare-table tr:hover td{background:rgba(255,255,255,0.85);} | |
| .td-prop{color:var(--text);font-weight:500;} | |
| .td-llm{color:#c47a7a;} | |
| .td-vexa{color:#4a9b75;} | |
| /* ── BRIDGE ── */ | |
| .bridge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;} | |
| .bridge-card{ | |
| padding:18px 16px;border-radius:14px; | |
| background:rgba(255,255,255,0.55); | |
| border:1px solid rgba(255,255,255,0.8); | |
| transition:all 0.2s; | |
| } | |
| .bridge-card:hover{transform:translateY(-3px);background:rgba(255,255,255,0.9);} | |
| .bc-name{font-weight:600;color:var(--text);margin-bottom:4px;font-size:13px;} | |
| .bc-method{font-family:'Fira Code',monospace;font-size:9px;color:var(--text-soft);margin-bottom:10px;} | |
| .bc-badge{ | |
| display:inline-block;padding:3px 10px;border-radius:100px; | |
| font-size:8px;letter-spacing:1px; | |
| background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75; | |
| } | |
| .bridge-flow{ | |
| border-radius:16px;padding:24px; | |
| background:rgba(255,255,255,0.5); | |
| border:1px solid rgba(255,255,255,0.8); | |
| } | |
| .bf-row{ | |
| display:flex;align-items:flex-start;gap:14px; | |
| padding:10px 0;border-bottom:1px solid rgba(196,181,244,0.08); | |
| font-size:11px; | |
| } | |
| .bf-n{ | |
| width:24px;height:24px;border-radius:50%;flex-shrink:0; | |
| display:flex;align-items:center;justify-content:center; | |
| font-family:'Fira Code',monospace;font-size:9px;font-weight:500;color:white; | |
| } | |
| .bf-1 .bf-n{background:var(--pink);} | |
| .bf-2 .bf-n{background:var(--lavender);} | |
| .bf-3 .bf-n{background:var(--mint);} | |
| .bf-4 .bf-n{background:var(--peach);} | |
| .bf-5 .bf-n{background:var(--sky);} | |
| .bf-6 .bf-n{background:var(--lilac);} | |
| .bf-t{color:var(--text);line-height:1.6;} | |
| .bf-t strong{color:var(--lavender);} | |
| .bf-arr{text-align:center;color:var(--lavender);opacity:0.4;padding:4px 0;font-size:14px;} | |
| /* ── HF PLAN ── */ | |
| .hf-list{display:flex;flex-direction:column;gap:8px;} | |
| .hf-card{ | |
| display:grid;grid-template-columns:1fr auto; | |
| align-items:center;gap:16px; | |
| padding:16px 20px;border-radius:14px; | |
| background:rgba(255,255,255,0.55); | |
| border:1px solid rgba(255,255,255,0.8); | |
| transition:all 0.2s; | |
| } | |
| .hf-card:hover{transform:translateX(4px);background:rgba(255,255,255,0.9);} | |
| .hf-name{font-family:'Fira Code',monospace;font-size:11px;color:var(--lavender);margin-bottom:4px;} | |
| .hf-desc{font-size:10px;color:var(--text-soft);} | |
| .hf-badge{ | |
| padding:4px 12px;border-radius:100px; | |
| font-size:8px;letter-spacing:1px;white-space:nowrap; | |
| background:rgba(168,230,207,0.2);border:1px solid rgba(168,230,207,0.4);color:#4a9b75; | |
| } | |
| /* ── FOOTER ── */ | |
| .footer{ | |
| margin-top:100px;padding:32px 0; | |
| border-top:1px solid rgba(196,181,244,0.2); | |
| display:flex;justify-content:space-between;align-items:center; | |
| flex-wrap:wrap;gap:16px; | |
| } | |
| .footer-l{font-size:10px;color:var(--text-soft);line-height:2;font-family:'Fira Code',monospace;letter-spacing:2px;} | |
| .footer-r{ | |
| font-family:'Playfair Display',serif;font-size:22px;font-style:italic; | |
| background:linear-gradient(135deg,var(--pink),var(--lavender)); | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; | |
| } | |
| @media(max-width:900px){ | |
| .anatomy-grid,.lume-grid,.lattice-wrap,.cryst-grid{grid-template-columns:1fr;} | |
| .edges-wrap{grid-template-columns:repeat(2,1fr);} | |
| .threads-grid{grid-template-columns:1fr;} | |
| .bridge-grid{grid-template-columns:1fr 1fr;} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="rainCanvas"></canvas> | |
| <div class="wrap"> | |
| <!-- ══ HERO ══ --> | |
| <div class="hero"> | |
| <div class="hero-badge">✦ NOT AN AI — A NEW PARADIGM ✦</div> | |
| <div class="hero-crystal"> | |
| <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <linearGradient id="cg1" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#f4a7c3"/> | |
| <stop offset="50%" stop-color="#c4b5f4"/> | |
| <stop offset="100%" stop-color="#a8e6cf"/> | |
| </linearGradient> | |
| <linearGradient id="cg2" x1="100%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" stop-color="#ffcba4" stop-opacity="0.6"/> | |
| <stop offset="100%" stop-color="#a8d8ea" stop-opacity="0.6"/> | |
| </linearGradient> | |
| <filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter> | |
| </defs> | |
| <!-- Main crystal body --> | |
| <polygon points="100,10 160,60 170,130 100,190 30,130 40,60" fill="url(#cg1)" opacity="0.7" filter="url(#glow)"/> | |
| <polygon points="100,10 160,60 170,130 100,190 30,130 40,60" fill="none" stroke="white" stroke-width="1.5" opacity="0.8"/> | |
| <!-- Inner facets --> | |
| <polygon points="100,10 160,60 100,80" fill="white" opacity="0.2"/> | |
| <polygon points="100,10 40,60 100,80" fill="url(#cg2)" opacity="0.3"/> | |
| <polygon points="100,80 160,60 170,130 100,190" fill="url(#cg1)" opacity="0.4"/> | |
| <polygon points="100,80 40,60 30,130 100,190" fill="white" opacity="0.15"/> | |
| <!-- Center line --> | |
| <line x1="100" y1="10" x2="100" y2="190" stroke="white" stroke-width="0.5" opacity="0.5"/> | |
| <!-- Sparkles --> | |
| <circle cx="100" cy="80" r="4" fill="white" opacity="0.9" filter="url(#glow)"/> | |
| <circle cx="155" cy="65" r="2" fill="#f4a7c3" opacity="0.8"/> | |
| <circle cx="45" cy="65" r="2" fill="#c4b5f4" opacity="0.8"/> | |
| <circle cx="100" cy="185" r="2" fill="#a8e6cf" opacity="0.8"/> | |
| <!-- Outer glow ring --> | |
| <circle cx="100" cy="100" r="90" fill="none" stroke="url(#cg1)" stroke-width="0.5" opacity="0.4" stroke-dasharray="4 8"/> | |
| </svg> | |
| </div> | |
| <h1 class="hero-title">Vexa</h1> | |
| <div class="hero-sub">Crystalline Intelligence Substrate</div> | |
| <p class="hero-desc"> | |
| A living, self-updating lattice of <strong>Glyphs</strong> that understands because its structure <em>is</em> understanding. Not weights. Not tokens. Crystallizes knowledge in <strong>10 minutes on any laptop</strong> — and keeps learning forever. | |
| </p> | |
| <div class="hero-pills"> | |
| <span class="pill p1">✦ Glyph Lattice</span> | |
| <span class="pill p2">◈ Crystallization Engine</span> | |
| <span class="pill p3">⬡ Lume Language</span> | |
| <span class="pill p4">⟳ Real-Time Learning</span> | |
| <span class="pill p5">⬡ Ollama Compatible</span> | |
| <span class="pill p1">✦ Fully Open Source</span> | |
| <span class="pill p2">◈ No GPU Required</span> | |
| <span class="pill p3">⬡ Any Laptop</span> | |
| </div> | |
| <div class="scroll-down">scroll to explore ↓</div> | |
| </div> | |
| <!-- ══ SECTION 1 — GLYPH ══ --> | |
| <div class="sec" id="s1"> | |
| <div class="sec-label">// 01</div> | |
| <div class="sec-title">The <em>Glyph</em></div> | |
| <div class="sec-rule"></div> | |
| <div class="sec-sub">Not a weight. Not a vector. Not a symbol. A structured meaning object with identity, relations, confidence, and a soul.</div> | |
| <div class="anatomy-grid"> | |
| <div> | |
| <div class="glyph-canvas-wrap"> | |
| <div class="gc-label">LIVE GLYPH NETWORK</div> | |
| <canvas id="glyphCanvas"></canvas> | |
| </div> | |
| </div> | |
| <div class="fields-list"> | |
| <div class="field-row fr-c1"><span class="fr-name">id</span><span class="fr-type">UUID</span><span class="fr-desc">Permanent identity — always traceable</span></div> | |
| <div class="field-row fr-c2"><span class="fr-name">concept</span><span class="fr-type">Vector[512]</span><span class="fr-desc">Dense semantic meaning — what this Glyph represents</span></div> | |
| <div class="field-row fr-c3"><span class="fr-name">relations</span><span class="fr-type">Map<ID,Edge></span><span class="fr-desc">Typed connections — how it links to the world</span></div> | |
| <div class="field-row fr-c1"><span class="fr-name">tension</span><span class="fr-type">float</span><span class="fr-desc">How strongly it pulls toward certain outputs</span></div> | |
| <div class="field-row fr-c2"><span class="fr-name">resonance</span><span class="fr-type">float</span><span class="fr-desc">Activation strength — how it lights up neighbors</span></div> | |
| <div class="field-row fr-c4"><span class="fr-name">confidence</span><span class="fr-type">float[0,1]</span><span class="fr-desc">Structurally real certainty — not simulated</span></div> | |
| <div class="field-row fr-c5"><span class="fr-name">decay</span><span class="fr-type">DecayFn</span><span class="fr-desc">How fast it fades — fast for news, never for physics</span></div> | |
| <div class="field-row fr-c3"><span class="fr-name">source</span><span class="fr-type">SourceRef[]</span><span class="fr-desc">Every claim sourced. Always. No exceptions.</span></div> | |
| <div class="field-row fr-c1"><span class="fr-name">valence</span><span class="fr-type">float[-1,1]</span><span class="fr-desc">Semantic charge — positive or negative meaning</span></div> | |
| <div class="field-row fr-c2"><span class="fr-name">mutable</span><span class="fr-type">bool</span><span class="fr-desc">Can real-time learning update this Glyph?</span></div> | |
| </div> | |
| </div> | |
| <div style="margin-top:32px;"> | |
| <div style="font-family:'Fira Code',monospace;font-size:9px;color:var(--lavender);letter-spacing:3px;text-align:center;margin-bottom:20px;">10 EDGE TYPES — THE RELATION PRIMITIVES</div> | |
| <div class="edges-wrap"> | |
| <div class="edge-card"><div class="ec-gem">💎</div><div class="ec-name" style="color:#c4617f;">IS_A</div><div class="ec-ex">dog → animal</div><div class="ec-desc">Taxonomic hierarchy</div></div> | |
| <div class="edge-card"><div class="ec-gem">✨</div><div class="ec-name" style="color:#7c5cbf;">HAS_PROPERTY</div><div class="ec-ex">ice → cold</div><div class="ec-desc">Attribute assignment</div></div> | |
| <div class="edge-card"><div class="ec-gem">⚡</div><div class="ec-name" style="color:#4a9b75;">CAUSES</div><div class="ec-ex">rain → wet</div><div class="ec-desc">Causal chain</div></div> | |
| <div class="edge-card"><div class="ec-gem">🌸</div><div class="ec-name" style="color:#c47a3a;">CONTRADICTS</div><div class="ec-ex">hot ↔ cold</div><div class="ec-desc">Triggers the Arbiter</div></div> | |
| <div class="edge-card"><div class="ec-gem">🔮</div><div class="ec-name" style="color:#3a7a9b;">REQUIRES</div><div class="ec-ex">fire → oxygen</div><div class="ec-desc">Dependency</div></div> | |
| <div class="edge-card"><div class="ec-gem">🌙</div><div class="ec-name" style="color:#9c5cbf;">PRECEDES</div><div class="ec-ex">cause → effect</div><div class="ec-desc">Temporal ordering</div></div> | |
| <div class="edge-card"><div class="ec-gem">🦋</div><div class="ec-name" style="color:#b47a2a;">ANALOGOUS_TO</div><div class="ec-ex">brain → CPU</div><div class="ec-desc">Cross-domain bridge</div></div> | |
| <div class="edge-card"><div class="ec-gem">🌺</div><div class="ec-name" style="color:#c4617f;">PART_OF</div><div class="ec-ex">wheel → car</div><div class="ec-desc">Composition</div></div> | |
| <div class="edge-card"><div class="ec-gem">🌟</div><div class="ec-name" style="color:#7c5cbf;">GENERATES</div><div class="ec-ex">plant → O₂</div><div class="ec-desc">Production</div></div> | |
| <div class="edge-card"><div class="ec-gem">💫</div><div class="ec-name" style="color:#4a9b75;">RESOLVES</div><div class="ec-ex">key → lock</div><div class="ec-desc">Solution mapping</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ SECTION 2 — CRYSTALLIZATION ══ --> | |
| <div class="sec" id="s2"> | |
| <div class="sec-label">// 02</div> | |
| <div class="sec-title"><em>Crystallization</em> Replaces Training</div> | |
| <div class="sec-rule"></div> | |
| <div class="sec-sub">No gradient descent. No GPU cluster. No weeks. 5 phases, 10 minutes, any laptop. Knowledge folds into the Glyph Lattice directly.</div> | |
| <div class="cryst-grid"> | |
| <div class="phase-list"> | |
| <div class="phase-card ph1"> | |
| <div class="phase-left"><div class="pl-num">01</div><div class="pl-time">0–2 MIN</div></div> | |
| <div class="phase-right"> | |
| <div class="pr-name">Ingestion</div> | |
| <div class="pr-desc">Raw knowledge consumed — web pages, PDFs, code, JSON, RSS. Parsed into Concept Fragments across all CPU cores in parallel.</div> | |
| </div> | |
| </div> | |
| <div class="phase-card ph2"> | |
| <div class="phase-left"><div class="pl-num">02</div><div class="pl-time">2–4 MIN</div></div> | |
| <div class="phase-right"> | |
| <div class="pr-name">Concept Extraction</div> | |
| <div class="pr-desc">NLP pipeline extracts typed relation triples. Named entities, causal phrases, temporal expressions, dependency parsing.</div> | |
| </div> | |
| </div> | |
| <div class="phase-card ph3"> | |
| <div class="phase-left"><div class="pl-num">03</div><div class="pl-time">4–6 MIN</div></div> | |
| <div class="phase-right"> | |
| <div class="pr-name">Glyph Formation</div> | |
| <div class="pr-desc">Each concept becomes a Glyph via a tiny frozen encoder. Duplicates merged. Confidence scored. Sources attached permanently.</div> | |
| </div> | |
| </div> | |
| <div class="phase-card ph4"> | |
| <div class="phase-left"><div class="pl-num">04</div><div class="pl-time">6–8 MIN</div></div> | |
| <div class="phase-right"> | |
| <div class="pr-name">Lattice Integration</div> | |
| <div class="pr-desc">New Glyphs woven into the graph. Edges inferred. Conflicts detected — the Arbiter fires and resolves by evidence and recency.</div> | |
| </div> | |
| </div> | |
| <div class="phase-card ph5"> | |
| <div class="phase-left"><div class="pl-num">05</div><div class="pl-time">8–10 MIN</div></div> | |
| <div class="phase-right"> | |
| <div class="pr-name">Resonance Calibration</div> | |
| <div class="pr-desc">Tension and resonance tuned across all new Glyphs. Cluster coherence checked. Lattice integrity verified. Complete. ✦</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="crystal-timer"> | |
| <div class="ct-gem">💎</div> | |
| <div class="ct-title">Crystallization Timer</div> | |
| <div class="ct-time" id="timerDisp">10:00</div> | |
| <div class="ct-unit">MINUTES · ANY LAPTOP</div> | |
| <div class="ct-bars"> | |
| <div class="cb-row"><div class="cb-labels"><span class="cb-k">Ingestion</span><span class="cb-v" id="p1v" style="color:#c4617f;">0%</span></div><div class="cb-track"><div class="cb-fill cf1" id="b1" style="width:0%"></div></div></div> | |
| <div class="cb-row"><div class="cb-labels"><span class="cb-k">Extraction</span><span class="cb-v" id="p2v" style="color:#7c5cbf;">0%</span></div><div class="cb-track"><div class="cb-fill cf2" id="b2" style="width:0%"></div></div></div> | |
| <div class="cb-row"><div class="cb-labels"><span class="cb-k">Glyph Formation</span><span class="cb-v" id="p3v" style="color:#4a9b75;">0%</span></div><div class="cb-track"><div class="cb-fill cf3" id="b3" style="width:0%"></div></div></div> | |
| <div class="cb-row"><div class="cb-labels"><span class="cb-k">Integration</span><span class="cb-v" id="p4v" style="color:#c47a3a;">0%</span></div><div class="cb-track"><div class="cb-fill cf4" id="b4" style="width:0%"></div></div></div> | |
| <div class="cb-row"><div class="cb-labels"><span class="cb-k">Calibration</span><span class="cb-v" id="p5v" style="color:#3a7a9b;">0%</span></div><div class="cb-track"><div class="cb-fill cf5" id="b5" style="width:0%"></div></div></div> | |
| </div> | |
| <button class="ct-btn" id="cBtn" onclick="runCryst()">✦ Start Crystallization</button> | |
| <div class="ct-stats"> | |
| <div class="cs-row"><span class="cs-k">GPU Required</span><span class="cs-v">None — CPU only</span></div> | |
| <div class="cs-row"><span class="cs-k">Glyphs Formed</span><span class="cs-v" id="gStat">—</span></div> | |
| <div class="cs-row"><span class="cs-k">Edges Created</span><span class="cs-v" id="eStat">—</span></div> | |
| <div class="cs-row"><span class="cs-k">Conflicts</span><span class="cs-v" id="cStat">—</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ SECTION 3 — LATTICE ══ --> | |
| <div class="sec" id="s3"> | |
| <div class="sec-label">// 03</div> | |
| <div class="sec-title">The Glyph <em>Lattice</em></div> | |
| <div class="sec-rule"></div> | |
| <div class="sec-sub">The model itself. A living knowledge graph that scales by Glyph density — same architecture, same code, anywhere from 2GB RAM to 40GB.</div> | |
| <div class="lattice-wrap"> | |
| <div> | |
| <div class="lattice-canvas-box"> | |
| <div class="lc-tag">LIVE LATTICE</div> | |
| <canvas id="latticeCanvas"></canvas> | |
| <div class="lc-legend"> | |
| <div class="ll"><div class="ll-dot" style="background:var(--pink)"></div>Core concept</div> | |
| <div class="ll"><div class="ll-dot" style="background:var(--lavender)"></div>Relation node</div> | |
| <div class="ll"><div class="ll-dot" style="background:var(--mint)"></div>Freshly crystallized</div> | |
| <div class="ll"><div class="ll-dot" style="background:var(--peach)"></div>Conflict flagged</div> | |
| <div class="ll"><div class="ll-dot" style="background:rgba(150,140,160,0.4)"></div>Decaying</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <p style="font-size:13px;line-height:1.9;color:var(--text);margin-bottom:24px;font-weight:300;">Vexa scales not by model size but by <strong style="color:var(--lavender)">Glyph density</strong>. One architecture. One codebase. Dial up density for more knowledge.</p> | |
| <div class="density-cards"> | |
| <div class="dc header"><span>TIER</span><span>GLYPHS</span><span>RAM</span><span>EQUIV.</span></div> | |
| <div class="dc"><span class="dc-tier">Nano</span><span class="dc-glyphs">~1M</span><span class="dc-ram">2GB</span><span class="dc-use">IoT / edge</span></div> | |
| <div class="dc"><span class="dc-tier">Micro</span><span class="dc-glyphs">~10M</span><span class="dc-ram">4GB</span><span class="dc-use">Any laptop</span></div> | |
| <div class="dc"><span class="dc-tier">Core</span><span class="dc-glyphs">~100M</span><span class="dc-ram">8GB</span><span class="dc-use">Consumer GPU</span></div> | |
| <div class="dc"><span class="dc-tier">Dense</span><span class="dc-glyphs">~1B</span><span class="dc-ram">16GB</span><span class="dc-use">Workstation</span></div> | |
| <div class="dc max"><span class="dc-tier">Max ✦</span><span class="dc-glyphs">~10B</span><span class="dc-ram">40GB</span><span class="dc-use">A100 / p300a</span></div> | |
| </div> | |
| <div style="margin-top:12px;padding:14px;border-radius:12px;background:rgba(196,181,244,0.08);border:1px solid rgba(196,181,244,0.2);font-size:10px;color:var(--text-soft);line-height:1.7;"> | |
| ✦ Same crystallization process at every tier. Same Lume code. Same architecture. Just more Glyphs. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ SECTION 4 — LUME ══ --> | |
| <div class="sec" id="s4"> | |
| <div class="sec-label">// 04</div> | |
| <div class="sec-title">The <em>Lume</em> Language</div> | |
| <div class="sec-rule"></div> | |
| <div class="sec-sub">Not Python. Not SQL. A declarative-relational language where meaning is a first-class citizen. You describe intent — Lume resolves it through the Glyph Lattice.</div> | |
| <div class="lume-grid"> | |
| <div class="lume-box"> | |
| <div class="lume-tabbar"> | |
| <div class="ltab on" onclick="showLume('glyph',this)">glyph</div> | |
| <div class="ltab" onclick="showLume('ask',this)">ask</div> | |
| <div class="ltab" onclick="showLume('agent',this)">agent</div> | |
| <div class="ltab" onclick="showLume('flow',this)">flow</div> | |
| <div class="ltab" onclick="showLume('watch',this)">watch</div> | |
| </div> | |
| <div class="lume-code"> | |
| <div class="lc-b on" id="lc-glyph"> | |
| <span class="lcm">// Define a concept directly in the lattice</span><br> | |
| <span class="lkw">glyph</span> <span class="lid">QuantumEntanglement</span> {<br> | |
| <span class="lprop">IS_A</span>: <span class="lid">QuantumPhenomenon</span><br> | |
| <span class="lprop">HAS_PROPERTY</span>: <span class="lstr">"non-local correlation"</span><br> | |
| <span class="lprop">HAS_PROPERTY</span>: <span class="lstr">"instantaneous state sharing"</span><br> | |
| <span class="lprop">REQUIRES</span>: <span class="lid">QuantumSuperposition</span><br> | |
| <span class="lprop">CONTRADICTS</span>: <span class="lid">LocalRealism</span><br> | |
| <span class="lprop">confidence</span>: <span class="lnum">0.98</span><br> | |
| <span class="lprop">decay</span>: <span class="lkw">none</span> <span class="lcm">// physics never changes</span><br> | |
| } | |
| </div> | |
| <div class="lc-b" id="lc-ask"> | |
| <span class="lcm">// Traverse the Glyph Lattice to answer</span><br> | |
| <span class="lkw">ask</span> <span class="lstr">"What causes inflation?"</span> {<br> | |
| <span class="lprop">depth</span>: <span class="lnum">4</span> <span class="lcm">// glyph hops</span><br> | |
| <span class="lprop">confidence</span>: <span class="lnum">0.7</span> <span class="lcm">// min threshold</span><br> | |
| <span class="lprop">sources</span>: <span class="lkw">true</span> <span class="lcm">// show refs</span><br> | |
| <span class="lprop">recency</span>: <span class="lstr">"6h"</span> <span class="lcm">// prefer fresh</span><br> | |
| }<br><br> | |
| <span class="lcm">// Inspect any Glyph</span><br> | |
| <span class="lkw">inspect</span> <span class="lkw">glyph</span> <span class="lstr">"machine learning"</span> {<br> | |
| <span class="lprop">show</span>: <span class="lid">relations</span><br> | |
| <span class="lprop">show</span>: <span class="lid">confidence</span><br> | |
| <span class="lprop">show</span>: <span class="lid">sources</span><br> | |
| } | |
| </div> | |
| <div class="lc-b" id="lc-agent"> | |
| <span class="lcm">// Agentic task — lattice IS the memory</span><br> | |
| <span class="lkw">agent</span> <span class="lid">ResearchAssistant</span> {<br> | |
| <span class="lprop">goal</span>: <span class="lstr">"Summarize fusion breakthroughs"</span><br> | |
| <span class="lprop">tools</span>: [<span class="lid">web_search</span>, <span class="lid">glyph_writer</span>]<br> | |
| <span class="lprop">crystallize_findings</span>: <span class="lkw">true</span><br> | |
| <span class="lprop">recency</span>: <span class="lstr">"7d"</span><br> | |
| <span class="lprop">report</span>: <span class="lid">markdown</span><br> | |
| } | |
| </div> | |
| <div class="lc-b" id="lc-flow"> | |
| <span class="lcm">// Chain operations with |></span><br> | |
| <span class="lkw">flow</span> <span class="lid">MarketWatch</span> {<br> | |
| <span class="lkw">crystallize</span> <span class="lkw">from</span> <span class="lid">web</span> {<br> | |
| <span class="lprop">topic</span>: <span class="lstr">"AI stocks"</span><br> | |
| <span class="lprop">recency</span>: <span class="lstr">"1h"</span><br> | |
| }<br> | |
| |> <span class="lkw">ask</span> <span class="lstr">"Key trends?"</span> { <span class="lprop">depth</span>: <span class="lnum">4</span> }<br> | |
| |> <span class="lkw">agent</span> <span class="lid">Summarizer</span> {}<br> | |
| |> <span class="lkw">output</span> <span class="lid">markdown</span><br> | |
| } | |
| </div> | |
| <div class="lc-b" id="lc-watch"> | |
| <span class="lcm">// Reactive — fires when lattice shifts</span><br> | |
| <span class="lkw">watch</span> {<br> | |
| <span class="lprop">when</span>: <span class="lkw">glyph</span> changes <span class="lprop">near</span> <span class="lstr">"bitcoin"</span><br> | |
| <span class="lprop">confidence_delta</span>: <span class="lnum">0.2</span><br> | |
| <span class="lprop">trigger</span>: <span class="lkw">agent</span> <span class="lid">AlertBot</span> {<br> | |
| <span class="lprop">message</span>: <span class="lstr">"Crypto landscape shifted"</span><br> | |
| }<br> | |
| } | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lume-explain"> | |
| <div class="le e1"><div class="le-n">glyph { }</div><div class="le-d">Declare a concept directly into the lattice with typed edges, confidence, and decay — human-readable and inspectable forever.</div></div> | |
| <div class="le e2"><div class="le-n">ask " "</div><div class="le-d">Traverse the Glyph Lattice by semantic similarity. Specify traversal depth, confidence floor, source visibility, recency preference.</div></div> | |
| <div class="le e3"><div class="le-n">crystallize from</div><div class="le-d">Ingest new knowledge on demand from web, files, or APIs. Triggers the full 5-phase crystallization pipeline in the background.</div></div> | |
| <div class="le e4"><div class="le-n">agent { }</div><div class="le-d">Agentic tasks where the Glyph Lattice is memory. Everything the agent learns is crystallized permanently — no separate memory system.</div></div> | |
| <div class="le e5"><div class="le-n">flow { } with |></div><div class="le-d">Chain crystallize → ask → agent → output. Build complex intelligence pipelines in readable, composable steps.</div></div> | |
| <div class="le e6"><div class="le-n">watch { }</div><div class="le-d">Reactive intelligence. Fire agents when the lattice topology changes — breaking news, confidence shifts, conflict detection.</div></div> | |
| <div class="le e7"><div class="le-n">inspect glyph</div><div class="le-d">Peer inside any Glyph. See relations, cluster, confidence, decay rate, and every source. Full transparency by design.</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ SECTION 5 — THREADS ══ --> | |
| <div class="sec" id="s5"> | |
| <div class="sec-label">// 05</div> | |
| <div class="sec-title">Always <em>Learning</em></div> | |
| <div class="sec-rule"></div> | |
| <div class="sec-sub">Three threads run continuously after initial crystallization. The lattice is never frozen. Knowledge from 30 minutes ago is already there.</div> | |
| <div class="threads-grid"> | |
| <div class="thread-card tc1"><div class="tc-pulse tcp1"></div> | |
| <div class="tc-icon">🌐</div> | |
| <div class="tc-name">Web Crystallizer</div> | |
| <div class="tc-desc">Crawls the live web continuously. Priority queue: trending topics first. Auto-integrates findings into the lattice in real time.</div> | |
| <div class="tc-stats"> | |
| <div class="ts"><span class="ts-k">Rate</span><span class="ts-v">~10K Glyphs/hour</span></div> | |
| <div class="ts"><span class="ts-k">News decay</span><span class="ts-v">24–72 hours</span></div> | |
| <div class="ts"><span class="ts-k">Science decay</span><span class="ts-v">Years–decades</span></div> | |
| </div> | |
| </div> | |
| <div class="thread-card tc2"><div class="tc-pulse tcp2"></div> | |
| <div class="tc-icon">💬</div> | |
| <div class="tc-name">Interaction Crystallizer</div> | |
| <div class="tc-desc">Every conversation crystallizes new knowledge. User corrections instantly adjust confidence. Opt-in shared learning across instances.</div> | |
| <div class="tc-stats"> | |
| <div class="ts"><span class="ts-k">Trigger</span><span class="ts-v">Every novel query</span></div> | |
| <div class="ts"><span class="ts-k">Correction</span><span class="ts-v">Instant ±0.15 conf</span></div> | |
| <div class="ts"><span class="ts-k">Privacy</span><span class="ts-v">Ephemeral mode</span></div> | |
| </div> | |
| </div> | |
| <div class="thread-card tc3"><div class="tc-pulse tcp3"></div> | |
| <div class="tc-icon">⏳</div> | |
| <div class="tc-name">Decay Monitor</div> | |
| <div class="tc-desc">Scans for stale Glyphs every 15 minutes. Prunes below threshold. Fires the Arbiter on contradictions. Daily defragmentation.</div> | |
| <div class="tc-stats"> | |
| <div class="ts"><span class="ts-k">Scan interval</span><span class="ts-v">15 minutes</span></div> | |
| <div class="ts"><span class="ts-k">Prune floor</span><span class="ts-v">confidence < 0.1</span></div> | |
| <div class="ts"><span class="ts-k">Defrag</span><span class="ts-v">Daily</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══ SECTION 6 — COMPARE ══ --> | |
| <div class="sec" id="s6"> | |
| <div class="sec-label">// 06</div> | |
| <div class="sec-title">Vexa <em>vs</em> Every LLM</div> | |
| <div class="sec-rule"></div> | |
| <table class="compare-table"> | |
| <thead><tr><th>PROPERTY</th><th>EVERY LLM EVER BUILT</th><th>MATRIX VEXA</th></tr></thead> | |
| <tbody> | |
| <tr><td class="td-prop">Knowledge currency</td><td class="td-llm">Training cutoff — months/years old</td><td class="td-vexa">✦ Live — minutes old, always current</td></tr> | |
| <tr><td class="td-prop">Training cost</td><td class="td-llm">Weeks · $millions · GPU cluster</td><td class="td-vexa">✦ 10 min · free · any laptop · CPU only</td></tr> | |
| <tr><td class="td-prop">Interpretable</td><td class="td-llm">No — complete black box</td><td class="td-vexa">✦ Yes — every Glyph human-readable</td></tr> | |
| <tr><td class="td-prop">Self-updating</td><td class="td-llm">Never without retraining</td><td class="td-vexa">✦ Continuously — 3 live threads</td></tr> | |
| <tr><td class="td-prop">Remembers conversations</td><td class="td-llm">No — context window only</td><td class="td-vexa">✦ Yes — crystallized permanently</td></tr> | |
| <tr><td class="td-prop">Source tracking</td><td class="td-llm">Never — lost at training</td><td class="td-vexa">✦ Every claim sourced always</td></tr> | |
| <tr><td class="td-prop">Uncertainty</td><td class="td-llm">Simulated / hallucinated</td><td class="td-vexa">✦ Structurally real — Glyph.confidence</td></tr> | |
| <tr><td class="td-prop">Conflict resolution</td><td class="td-llm">Averages contradictions</td><td class="td-vexa">✦ Arbiter fires — resolves by evidence</td></tr> | |
| <tr><td class="td-prop">Runs on laptop</td><td class="td-llm">Barely — heavily quantized</td><td class="td-vexa">✦ Native — 4GB RAM, fast</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- ══ SECTION 7 — BRIDGE ══ --> | |
| <div class="sec" id="s7"> | |
| <div class="sec-label">// 07</div> | |
| <div class="sec-title">The Vexa <em>Bridge</em></div> | |
| <div class="sec-rule"></div> | |
| <div class="sec-sub">Vexa isn't an LLM. But the Bridge makes it look exactly like one to Ollama, vLLM, and HuggingFace. Drop it in anywhere.</div> | |
| <div class="bridge-grid"> | |
| <div class="bridge-card"><div class="bc-name">Ollama</div><div class="bc-method">GGUF-compatible bridge + Modelfile</div><div class="bc-badge">✦ Planned</div></div> | |
| <div class="bridge-card"><div class="bc-name">vLLM</div><div class="bc-method">OpenAI-compatible API shim</div><div class="bc-badge">✦ Planned</div></div> | |
| <div class="bridge-card"><div class="bc-name">HuggingFace</div><div class="bc-method">Custom model class</div><div class="bc-badge">✦ Planned</div></div> | |
| <div class="bridge-card"><div class="bc-name">LM Studio</div><div class="bc-method">GGUF bridge</div><div class="bc-badge">✦ Planned</div></div> | |
| <div class="bridge-card"><div class="bc-name">Kobold.cpp</div><div class="bc-method">API adapter</div><div class="bc-badge">✦ Planned</div></div> | |
| <div class="bridge-card"><div class="bc-name">llama.cpp</div><div class="bc-method">Custom backend</div><div class="bc-badge">◎ Stretch</div></div> | |
| </div> | |
| <div class="bridge-flow"> | |
| <div class="bf-row bf-1"><div class="bf-n">1</div><div class="bf-t"><strong>Ollama sends:</strong> { prompt: "What is quantum computing?" }</div></div> | |
| <div class="bf-arr">↓</div> | |
| <div class="bf-row bf-2"><div class="bf-n">2</div><div class="bf-t"><strong>Vexa Bridge intercepts</strong> — detects incoming LLM-format request</div></div> | |
| <div class="bf-arr">↓</div> | |
| <div class="bf-row bf-3"><div class="bf-n">3</div><div class="bf-t"><strong>Compiles to Lume:</strong> ask "quantum computing" { depth: 3 } |> output natural_language</div></div> | |
| <div class="bf-arr">↓</div> | |
| <div class="bf-row bf-4"><div class="bf-n">4</div><div class="bf-t"><strong>Lattice Executor</strong> traverses Glyph lattice, activates relevant clusters</div></div> | |
| <div class="bf-arr">↓</div> | |
| <div class="bf-row bf-5"><div class="bf-n">5</div><div class="bf-t"><strong>Response Synthesizer</strong> — tiny frozen LM converts Glyph activations → fluent text</div></div> | |
| <div class="bf-arr">↓</div> | |
| <div class="bf-row bf-6"><div class="bf-n">6</div><div class="bf-t"><strong>Ollama receives:</strong> { response: "Quantum computing is..." } — standard format</div></div> | |
| </div> | |
| </div> | |
| <!-- ══ SECTION 8 — HF PLAN ══ --> | |
| <div class="sec" id="s8"> | |
| <div class="sec-label">// 08</div> | |
| <div class="sec-title">Open Source <em>Release</em></div> | |
| <div class="sec-rule"></div> | |
| <div class="hf-list"> | |
| <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-V1</div><div class="hf-desc">Glyph Lattice — Max density (~10B Glyphs). Full capability.</div></div><div class="hf-badge">Open Source</div></div> | |
| <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-Micro-V1</div><div class="hf-desc">Glyph Lattice — Micro density (~10M Glyphs). 4GB RAM. Laptop-first.</div></div><div class="hf-badge">Open Source</div></div> | |
| <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Lume-Language-Spec</div><div class="hf-desc">Lume language specification, parser, and reference implementation.</div></div><div class="hf-badge">Open Source</div></div> | |
| <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-Bridge</div><div class="hf-desc">Ollama / vLLM / HuggingFace compatibility adapter.</div></div><div class="hf-badge">Open Source</div></div> | |
| <div class="hf-card"><div><div class="hf-name">Matrix-Corp/Vexa-Crystallizer</div><div class="hf-desc">Crystallization engine — ingest any knowledge source into Glyphs.</div></div><div class="hf-badge">Open Source</div></div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="footer-l">MATRIX.CORP — VEXA V1<br>CRYSTALLINE INTELLIGENCE · 🔴 PLANNED<br>FULLY OPEN SOURCE</div> | |
| <div class="footer-r">Matrix Vexa ✦</div> | |
| </div> | |
| </div><!-- /wrap --> | |
| <script> | |
| // ── PASTEL CRYSTAL RAIN ── | |
| const rain = document.getElementById('rainCanvas'); | |
| const rCtx = rain.getContext('2d'); | |
| let RW, RH; | |
| function resizeRain(){RW=rain.width=window.innerWidth;RH=rain.height=window.innerHeight;} | |
| resizeRain();window.addEventListener('resize',resizeRain); | |
| const PASTEL = ['#f4a7c3','#c4b5f4','#a8e6cf','#ffcba4','#a8d8ea','#f9c6cf','#f7d794','#dbb8f5']; | |
| const crystals = []; | |
| for(let i=0;i<60;i++){ | |
| crystals.push({ | |
| x:Math.random()*window.innerWidth, | |
| y:Math.random()*window.innerHeight-window.innerHeight, | |
| size:Math.random()*18+5, | |
| speed:Math.random()*0.8+0.3, | |
| rotation:Math.random()*Math.PI*2, | |
| rotSpeed:(Math.random()-0.5)*0.02, | |
| color:PASTEL[Math.floor(Math.random()*PASTEL.length)], | |
| alpha:Math.random()*0.5+0.1, | |
| type:Math.floor(Math.random()*3) // 0=diamond 1=hexagon 2=star | |
| }); | |
| } | |
| function drawCrystal(ctx, x, y, size, rotation, color, alpha, type){ | |
| ctx.save();ctx.translate(x,y);ctx.rotate(rotation);ctx.globalAlpha=alpha; | |
| ctx.strokeStyle=color;ctx.lineWidth=1;ctx.fillStyle=color+'33'; | |
| ctx.beginPath(); | |
| if(type===0){ | |
| // Diamond | |
| ctx.moveTo(0,-size);ctx.lineTo(size*0.5,0); | |
| ctx.lineTo(0,size);ctx.lineTo(-size*0.5,0);ctx.closePath(); | |
| } else if(type===1){ | |
| // Hexagon | |
| for(let i=0;i<6;i++){ | |
| const a=i*Math.PI/3; | |
| i===0?ctx.moveTo(Math.cos(a)*size,Math.sin(a)*size):ctx.lineTo(Math.cos(a)*size,Math.sin(a)*size); | |
| }ctx.closePath(); | |
| } else { | |
| // 4-point star | |
| for(let i=0;i<8;i++){ | |
| const a=i*Math.PI/4; | |
| const r=i%2===0?size:size*0.4; | |
| i===0?ctx.moveTo(Math.cos(a)*r,Math.sin(a)*r):ctx.lineTo(Math.cos(a)*r,Math.sin(a)*r); | |
| }ctx.closePath(); | |
| } | |
| ctx.fill();ctx.stroke(); | |
| // Sparkle | |
| ctx.globalAlpha=alpha*0.8; | |
| ctx.fillStyle='white'; | |
| ctx.beginPath();ctx.arc(0,-size*0.3,size*0.12,0,Math.PI*2);ctx.fill(); | |
| ctx.restore(); | |
| } | |
| function animateRain(){ | |
| rCtx.clearRect(0,0,RW,RH); | |
| crystals.forEach(c=>{ | |
| c.y+=c.speed;c.rotation+=c.rotSpeed; | |
| if(c.y>RH+c.size){c.y=-c.size*2;c.x=Math.random()*RW;} | |
| drawCrystal(rCtx,c.x,c.y,c.size,c.rotation,c.color,c.alpha,c.type); | |
| }); | |
| requestAnimationFrame(animateRain); | |
| } | |
| animateRain(); | |
| // ── GLYPH CANVAS ── | |
| const gc=document.getElementById('glyphCanvas'); | |
| gc.width=gc.offsetWidth*2;gc.height=gc.offsetHeight*2; | |
| const gCtx=gc.getContext('2d');gCtx.scale(2,2); | |
| const GW=gc.offsetWidth/2,GH=gc.offsetHeight/2; | |
| const glyphs=[]; | |
| const GCOLORS=['#f4a7c3','#c4b5f4','#a8e6cf','#ffcba4','#a8d8ea','#dbb8f5']; | |
| const LABELS=['CONCEPT','CAUSE','ENTITY','FACT','PLACE','TIME','EFFECT','BELIEF']; | |
| for(let i=0;i<16;i++){ | |
| glyphs.push({ | |
| x:40+Math.random()*(GW-80),y:40+Math.random()*(GH-80), | |
| r:Math.random()*10+5, | |
| color:GCOLORS[Math.floor(Math.random()*GCOLORS.length)], | |
| vx:(Math.random()-0.5)*0.4,vy:(Math.random()-0.5)*0.4, | |
| pulse:Math.random()*Math.PI*2, | |
| links:[],label:LABELS[Math.floor(Math.random()*LABELS.length)] | |
| }); | |
| } | |
| glyphs.forEach((g,i)=>{ | |
| const n=Math.floor(Math.random()*3)+1; | |
| for(let j=0;j<n;j++){ | |
| const t=Math.floor(Math.random()*glyphs.length); | |
| if(t!==i)g.links.push(t); | |
| } | |
| }); | |
| let hoverG=-1; | |
| gc.addEventListener('mousemove',e=>{ | |
| const r=gc.getBoundingClientRect(); | |
| const mx=(e.clientX-r.left)*(gc.width/r.width)/2; | |
| const my=(e.clientY-r.top)*(gc.height/r.height)/2; | |
| hoverG=-1; | |
| glyphs.forEach((g,i)=>{if(Math.hypot(g.x-mx,g.y-my)<g.r+8)hoverG=i;}); | |
| }); | |
| function animateGlyphs(){ | |
| gCtx.fillStyle='rgba(255,252,248,0.15)'; | |
| gCtx.fillRect(0,0,GW,GH); | |
| glyphs.forEach((g,i)=>{ | |
| g.links.forEach(j=>{ | |
| const t=glyphs[j]; | |
| const hot=i===hoverG||j===hoverG; | |
| gCtx.beginPath();gCtx.moveTo(g.x,g.y);gCtx.lineTo(t.x,t.y); | |
| gCtx.strokeStyle=g.color; | |
| gCtx.globalAlpha=hot?0.5:0.12; | |
| gCtx.lineWidth=hot?1.5:0.7; | |
| gCtx.stroke();gCtx.globalAlpha=1; | |
| }); | |
| }); | |
| glyphs.forEach((g,i)=>{ | |
| g.pulse+=0.035;g.x+=g.vx;g.y+=g.vy; | |
| if(g.x<g.r||g.x>GW-g.r)g.vx*=-1; | |
| if(g.y<g.r||g.y>GH-g.r)g.vy*=-1; | |
| const pr=g.r+Math.sin(g.pulse)*2; | |
| const hot=i===hoverG; | |
| // Glow | |
| const grad=gCtx.createRadialGradient(g.x,g.y,0,g.x,g.y,pr*3); | |
| grad.addColorStop(0,g.color+(hot?'80':'30'));grad.addColorStop(1,'transparent'); | |
| gCtx.beginPath();gCtx.arc(g.x,g.y,pr*3,0,Math.PI*2); | |
| gCtx.fillStyle=grad;gCtx.fill(); | |
| // Diamond | |
| gCtx.save();gCtx.translate(g.x,g.y);gCtx.rotate(Math.PI/4); | |
| gCtx.beginPath();gCtx.rect(-pr,-pr,pr*2,pr*2); | |
| gCtx.fillStyle=g.color+(hot?'50':'20'); | |
| gCtx.strokeStyle=g.color;gCtx.lineWidth=hot?2:1; | |
| gCtx.globalAlpha=hot?1:0.7; | |
| gCtx.fill();gCtx.stroke();gCtx.restore();gCtx.globalAlpha=1; | |
| if(hot){ | |
| gCtx.font='8px DM Sans';gCtx.fillStyle=g.color; | |
| gCtx.textAlign='center';gCtx.fillText(g.label,g.x,g.y-pr-6); | |
| } | |
| }); | |
| requestAnimationFrame(animateGlyphs); | |
| } | |
| animateGlyphs(); | |
| // ── LATTICE CANVAS ── | |
| const lc=document.getElementById('latticeCanvas'); | |
| lc.width=lc.offsetWidth*2;lc.height=lc.offsetHeight*2; | |
| const lCtx=lc.getContext('2d');lCtx.scale(2,2); | |
| const LW=lc.offsetWidth/2,LH=lc.offsetHeight/2; | |
| const LTYPES=[ | |
| {color:'#f4a7c3'},{color:'#c4b5f4'},{color:'#a8e6cf'}, | |
| {color:'#ffcba4'},{color:'rgba(180,165,185,0.5)'} | |
| ]; | |
| const lNodes=[]; | |
| for(let i=0;i<55;i++){ | |
| const t=Math.random()<0.35?0:Math.random()<0.3?1:Math.random()<0.1?3:Math.random()<0.1?4:2; | |
| lNodes.push({ | |
| x:30+Math.random()*(LW-60),y:30+Math.random()*(LH-60), | |
| r:t===0?6:t===3?5:3,type:t, | |
| vx:(Math.random()-0.5)*0.25,vy:(Math.random()-0.5)*0.25, | |
| pulse:Math.random()*Math.PI*2,links:[] | |
| }); | |
| } | |
| lNodes.forEach((n,i)=>{ | |
| const k=Math.floor(Math.random()*4)+1; | |
| for(let j=0;j<k;j++){ | |
| const t=Math.floor(Math.random()*lNodes.length); | |
| if(t!==i)n.links.push(t); | |
| } | |
| }); | |
| // Travelling packet | |
| let pkt={prog:0,from:0,to:3,spd:0.007}; | |
| function animateLattice(){ | |
| lCtx.fillStyle='rgba(255,252,248,0.1)';lCtx.fillRect(0,0,LW,LH); | |
| lNodes.forEach((n,i)=>{ | |
| n.links.forEach(j=>{ | |
| const t=lNodes[j]; | |
| lCtx.beginPath();lCtx.moveTo(n.x,n.y);lCtx.lineTo(t.x,t.y); | |
| lCtx.strokeStyle=LTYPES[n.type].color; | |
| lCtx.globalAlpha=0.1;lCtx.lineWidth=0.6;lCtx.stroke();lCtx.globalAlpha=1; | |
| }); | |
| }); | |
| // Packet | |
| pkt.prog+=pkt.spd; | |
| if(pkt.prog>=1){pkt.prog=0;pkt.from=pkt.to;pkt.to=Math.floor(Math.random()*lNodes.length);} | |
| const pf=lNodes[pkt.from],pt=lNodes[pkt.to]; | |
| const px=pf.x+(pt.x-pf.x)*pkt.prog,py=pf.y+(pt.y-pf.y)*pkt.prog; | |
| const pg=lCtx.createRadialGradient(px,py,0,px,py,10); | |
| pg.addColorStop(0,'rgba(244,167,195,0.9)');pg.addColorStop(1,'transparent'); | |
| lCtx.beginPath();lCtx.arc(px,py,10,0,Math.PI*2);lCtx.fillStyle=pg;lCtx.fill(); | |
| lNodes.forEach(n=>{ | |
| n.pulse+=0.025;n.x+=n.vx;n.y+=n.vy; | |
| if(n.x<n.r||n.x>LW-n.r)n.vx*=-1;if(n.y<n.r||n.y>LH-n.r)n.vy*=-1; | |
| const pr=n.r+Math.sin(n.pulse)*1.5; | |
| const c=LTYPES[n.type].color; | |
| const g=lCtx.createRadialGradient(n.x,n.y,0,n.x,n.y,pr*2.5); | |
| g.addColorStop(0,c.replace('rgba(','').replace(')','').split(',').length>3?c:c+'60'); | |
| g.addColorStop(1,'transparent'); | |
| lCtx.beginPath();lCtx.arc(n.x,n.y,pr*2.5,0,Math.PI*2);lCtx.fillStyle=g;lCtx.fill(); | |
| lCtx.beginPath();lCtx.arc(n.x,n.y,pr,0,Math.PI*2); | |
| lCtx.fillStyle=c+'30';lCtx.strokeStyle=c;lCtx.lineWidth=1;lCtx.fill();lCtx.stroke(); | |
| }); | |
| requestAnimationFrame(animateLattice); | |
| } | |
| animateLattice(); | |
| // ── CRYSTALLIZATION TIMER ── | |
| let cRunning=false,cTime=0,cIv; | |
| const TOTAL=600; | |
| function runCryst(){ | |
| if(cRunning)return; | |
| cRunning=true;cTime=0; | |
| document.getElementById('cBtn').textContent='✦ Crystallizing...'; | |
| document.getElementById('timerDisp').style.background='linear-gradient(135deg,#f4a7c3,#c4b5f4)'; | |
| document.getElementById('timerDisp').style.webkitBackgroundClip='text'; | |
| document.getElementById('timerDisp').style.webkitTextFillColor='transparent'; | |
| cIv=setInterval(()=>{ | |
| cTime++; | |
| const pct=cTime/TOTAL; | |
| const m=Math.floor((TOTAL-cTime)/60),s=(TOTAL-cTime)%60; | |
| document.getElementById('timerDisp').textContent=`${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; | |
| const phases=[ | |
| {b:'b1',v:'p1v',s:0,e:0.2}, | |
| {b:'b2',v:'p2v',s:0.2,e:0.4}, | |
| {b:'b3',v:'p3v',s:0.4,e:0.6}, | |
| {b:'b4',v:'p4v',s:0.6,e:0.8}, | |
| {b:'b5',v:'p5v',s:0.8,e:1.0}, | |
| ]; | |
| phases.forEach(p=>{ | |
| const local=Math.max(0,Math.min(1,(pct-p.s)/(p.e-p.s))); | |
| document.getElementById(p.b).style.width=Math.round(local*100)+'%'; | |
| document.getElementById(p.v).textContent=Math.round(local*100)+'%'; | |
| }); | |
| const g=Math.floor(pct*10000000); | |
| document.getElementById('gStat').textContent=g.toLocaleString(); | |
| document.getElementById('eStat').textContent=Math.floor(g*2.3).toLocaleString(); | |
| document.getElementById('cStat').textContent=Math.floor(pct*47); | |
| if(cTime>=TOTAL){ | |
| clearInterval(cIv);cRunning=false; | |
| document.getElementById('cBtn').textContent='✦ Complete!'; | |
| document.getElementById('timerDisp').textContent='00:00'; | |
| } | |
| },30); | |
| } | |
| // ── LUME TABS ── | |
| function showLume(tab,el){ | |
| document.querySelectorAll('.lc-b').forEach(b=>b.classList.remove('on')); | |
| document.querySelectorAll('.ltab').forEach(t=>t.classList.remove('on')); | |
| document.getElementById('lc-'+tab).classList.add('on'); | |
| el.classList.add('on'); | |
| } | |
| // ── SCROLL REVEALS ── | |
| const obs=new IntersectionObserver(entries=>{ | |
| entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('vis');}); | |
| },{threshold:0.05}); | |
| document.querySelectorAll('.sec').forEach((s,i)=>{s.style.transitionDelay=(i*0.04)+'s';obs.observe(s);}); | |
| // ── MOUSE SPARKLE TRAIL ── | |
| document.addEventListener('mousemove', e=>{ | |
| if(Math.random()>0.7) return; | |
| const s=document.createElement('div'); | |
| s.style.cssText=`position:fixed;left:${e.clientX}px;top:${e.clientY}px; | |
| width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:9999; | |
| background:${PASTEL[Math.floor(Math.random()*PASTEL.length)]}; | |
| transform:translate(-50%,-50%) scale(1); | |
| transition:all 0.6s ease;opacity:0.8;`; | |
| document.body.appendChild(s); | |
| requestAnimationFrame(()=>{ | |
| s.style.transform=`translate(${(Math.random()-0.5)*40-3}px,${-30+Math.random()*-20}px) scale(0)`; | |
| s.style.opacity='0'; | |
| }); | |
| setTimeout(()=>s.remove(),600); | |
| }); | |
| </script> | |
| </body> | |
| </html> |