Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Orenthal — Matrix.Corp | Frontier Intelligence</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Raleway:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300&family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ═══════════════════════════════════════ | |
| ROOT & RESET | |
| ═══════════════════════════════════════ */ | |
| :root { | |
| --void: #020308; | |
| --deep: #050812; | |
| --space: #080d1e; | |
| --panel: rgba(255,255,255,.025); | |
| --edge: rgba(255,255,255,.06); | |
| --edge2: rgba(255,255,255,.12); | |
| --text: #5a6880; | |
| --bright: #c8d8f0; | |
| --ghost: #2a3450; | |
| --echo: #00d4ff; | |
| --echo2: #0090cc; | |
| --vexa: #a855f7; | |
| --vexa2: #7c3aed; | |
| --gold: #fbbf24; | |
| --lime: #86efac; | |
| --rose: #f472b6; | |
| --crystal1: #50b4ff; | |
| --crystal2: #a080ff; | |
| --crystal3: #ffd050; | |
| } | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| html{scroll-behavior:smooth;font-size:16px} | |
| body{ | |
| background:var(--void); | |
| font-family:'Raleway',sans-serif; | |
| color:var(--text); | |
| overflow-x:hidden; | |
| cursor:none; | |
| } | |
| ::-webkit-scrollbar{width:2px} | |
| ::-webkit-scrollbar-track{background:var(--void)} | |
| ::-webkit-scrollbar-thumb{background:linear-gradient(var(--echo),var(--vexa))} | |
| /* ═══════════════════════════════════════ | |
| CUSTOM RETICLE CURSOR | |
| ═══════════════════════════════════════ */ | |
| #reticle{ | |
| position:fixed;pointer-events:none;z-index:99999; | |
| width:36px;height:36px; | |
| transform:translate(-50%,-50%); | |
| transition:width .2s,height .2s; | |
| } | |
| #reticle svg{width:100%;height:100%;animation:reticleSpin 8s linear infinite} | |
| @keyframes reticleSpin{to{transform:rotate(360deg)}} | |
| #reticle-dot{ | |
| position:fixed;pointer-events:none;z-index:99999; | |
| width:4px;height:4px;border-radius:50%; | |
| background:var(--echo); | |
| box-shadow:0 0 8px var(--echo); | |
| transform:translate(-50%,-50%); | |
| } | |
| /* ═══════════════════════════════════════ | |
| WARP INTRO SEQUENCE | |
| ═══════════════════════════════════════ */ | |
| #warp-overlay{ | |
| position:fixed;inset:0;z-index:9000; | |
| background:var(--void); | |
| display:flex;align-items:center;justify-content:center; | |
| flex-direction:column;gap:20px; | |
| animation:warpExit 0.6s ease 3.8s forwards; | |
| } | |
| @keyframes warpExit{ | |
| 0%{opacity:1;transform:scale(1)} | |
| 100%{opacity:0;transform:scale(1.08);pointer-events:none} | |
| } | |
| #warp-overlay.gone{display:none} | |
| #warp-canvas{position:absolute;inset:0;z-index:0} | |
| .warp-label{ | |
| position:relative;z-index:1; | |
| font-family:'Orbitron',monospace;font-size:11px;font-weight:500; | |
| letter-spacing:8px;color:rgba(0,212,255,.6); | |
| animation:labelPulse 1s ease-in-out infinite alternate; | |
| } | |
| @keyframes labelPulse{0%{opacity:.4}100%{opacity:1}} | |
| .warp-progress{ | |
| position:relative;z-index:1; | |
| width:200px;height:1px; | |
| background:rgba(255,255,255,.06); | |
| overflow:hidden; | |
| } | |
| .warp-bar{ | |
| height:100%;width:0%; | |
| background:linear-gradient(90deg,var(--echo),var(--vexa)); | |
| box-shadow:0 0 12px var(--echo); | |
| animation:warpLoad 3.5s cubic-bezier(.4,0,.6,1) forwards; | |
| } | |
| @keyframes warpLoad{0%{width:0%}100%{width:100%}} | |
| /* ═══════════════════════════════════════ | |
| SPACE BACKGROUND + PARALLAX | |
| ═══════════════════════════════════════ */ | |
| #space-canvas{ | |
| position:fixed;top:0;left:0;width:100%;height:100%; | |
| z-index:0;pointer-events:none; | |
| } | |
| /* Atmosphere entry glow — top of page */ | |
| .atmo-glow{ | |
| position:fixed;top:-80px;left:50%;transform:translateX(-50%); | |
| width:900px;height:260px; | |
| background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(0,212,255,.06) 0%,transparent 70%); | |
| pointer-events:none;z-index:1; | |
| animation:atmoBreath 6s ease-in-out infinite alternate; | |
| } | |
| @keyframes atmoBreath{ | |
| 0%{opacity:.7;transform:translateX(-50%) scaleX(1)} | |
| 100%{opacity:1;transform:translateX(-50%) scaleX(1.12)} | |
| } | |
| /* Planet glow far below — parallax anchor */ | |
| .planet-glow{ | |
| position:fixed;bottom:-300px;left:50%;transform:translateX(-50%); | |
| width:1400px;height:700px; | |
| background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(80,90,200,.08) 0%,rgba(0,212,255,.04) 40%,transparent 70%); | |
| pointer-events:none;z-index:1; | |
| } | |
| /* Noise */ | |
| body::after{ | |
| content:'';position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.025; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| } | |
| /* ═══════════════════════════════════════ | |
| PAGE LAYOUT | |
| ═══════════════════════════════════════ */ | |
| .page{position:relative;z-index:2;opacity:0;animation:pageReveal .8s ease 4.2s forwards} | |
| @keyframes pageReveal{to{opacity:1}} | |
| /* ═══════════════════════════════════════ | |
| NAV | |
| ═══════════════════════════════════════ */ | |
| nav{ | |
| position:fixed;top:0;left:0;right:0;z-index:500; | |
| padding:22px 52px; | |
| display:flex;align-items:center;justify-content:space-between; | |
| transition:all .4s; | |
| } | |
| nav.scrolled{ | |
| background:rgba(2,3,8,.88); | |
| backdrop-filter:blur(24px); | |
| border-bottom:1px solid var(--edge); | |
| } | |
| .nav-left{display:flex;align-items:center;gap:14px} | |
| .nav-badge{ | |
| font-family:'Fira Code',monospace;font-size:8px;letter-spacing:3px; | |
| color:rgba(0,212,255,.5);border:1px solid rgba(0,212,255,.2); | |
| padding:4px 10px; | |
| } | |
| .nav-brand{ | |
| font-family:'Orbitron',monospace;font-size:13px;font-weight:700; | |
| letter-spacing:5px; | |
| background:linear-gradient(135deg,var(--crystal1),var(--crystal2)); | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; | |
| } | |
| .nav-right{display:flex;gap:32px;align-items:center} | |
| .nav-links{display:flex;gap:28px;list-style:none} | |
| .nav-links a{ | |
| font-family:'Orbitron',monospace;font-size:8px;letter-spacing:3px; | |
| color:var(--ghost);text-decoration:none;transition:color .2s;text-transform:uppercase; | |
| } | |
| .nav-links a:hover{color:var(--echo)} | |
| .nav-hf{ | |
| font-family:'Fira Code',monospace;font-size:8px;letter-spacing:2px; | |
| color:var(--echo);border:1px solid rgba(0,212,255,.25); | |
| padding:8px 18px;text-decoration:none;transition:all .2s; | |
| } | |
| .nav-hf:hover{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.5)} | |
| /* ═══════════════════════════════════════ | |
| HERO — SPACE LANDING | |
| ═══════════════════════════════════════ */ | |
| .hero{ | |
| min-height:100vh; | |
| display:flex;flex-direction:column; | |
| align-items:center;justify-content:center; | |
| padding:140px 52px 80px; | |
| position:relative;text-align:center; | |
| overflow:hidden; | |
| } | |
| /* Descent grid lines — perspective grid rushing up */ | |
| .descent-grid{ | |
| position:absolute;inset:0;pointer-events:none;overflow:hidden; | |
| perspective:600px; | |
| } | |
| .grid-plane{ | |
| position:absolute;bottom:-60%;left:-40%;right:-40%;height:160%; | |
| background-image: | |
| linear-gradient(to right,rgba(0,212,255,.05) 1px,transparent 1px), | |
| linear-gradient(to bottom,rgba(0,212,255,.05) 1px,transparent 1px); | |
| background-size:80px 80px; | |
| transform:rotateX(72deg); | |
| animation:gridRush 8s linear infinite; | |
| } | |
| @keyframes gridRush{ | |
| from{background-position:0 0} | |
| to{background-position:0 160px} | |
| } | |
| /* Atmosphere rings coming up from below */ | |
| .atmo-ring{ | |
| position:absolute; | |
| border-radius:50%; | |
| border:1px solid; | |
| pointer-events:none; | |
| animation:ringAscend linear infinite; | |
| opacity:0; | |
| } | |
| @keyframes ringAscend{ | |
| 0% {transform:translateY(120vh) scale(.2);opacity:0} | |
| 10% {opacity:.4} | |
| 80% {opacity:.15} | |
| 100%{transform:translateY(-20vh) scale(2.5);opacity:0} | |
| } | |
| /* Logo wrapper */ | |
| .hero-logo-wrap{ | |
| position:relative; | |
| margin-bottom:52px; | |
| animation:logoLand 1.2s cubic-bezier(.22,1,.36,1) 4.4s both; | |
| } | |
| @keyframes logoLand{ | |
| from{opacity:0;transform:translateY(-60px) scale(.7)} | |
| to {opacity:1;transform:translateY(0) scale(1)} | |
| } | |
| /* Impact shockwave on land */ | |
| .hero-logo-wrap::after{ | |
| content:''; | |
| position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); | |
| width:0;height:0;border-radius:50%; | |
| border:2px solid rgba(0,212,255,.6); | |
| animation:shockwave 1.4s ease-out 5.4s forwards; | |
| pointer-events:none; | |
| } | |
| @keyframes shockwave{ | |
| 0% {width:0;height:0;opacity:.9} | |
| 100%{width:600px;height:600px;opacity:0} | |
| } | |
| .hero-eyebrow{ | |
| font-family:'Fira Code',monospace;font-size:9px;letter-spacing:6px; | |
| color:rgba(0,212,255,.55);margin-bottom:24px; | |
| display:flex;align-items:center;justify-content:center;gap:16px; | |
| animation:fadeUp .8s ease 4.8s both; | |
| } | |
| .hero-eyebrow::before,.hero-eyebrow::after{ | |
| content:'';width:40px;height:1px; | |
| background:linear-gradient(90deg,transparent,var(--echo)); | |
| } | |
| .hero-eyebrow::after{transform:scaleX(-1)} | |
| .hero-h1{ | |
| font-family:'Orbitron',monospace; | |
| font-size:clamp(48px,8vw,110px); | |
| font-weight:900;line-height:.95; | |
| letter-spacing:-2px; | |
| color:var(--bright); | |
| margin-bottom:18px; | |
| animation:fadeUp .9s ease 5s both; | |
| } | |
| .hero-h1 .o-glow{ | |
| background:linear-gradient(135deg,var(--crystal1) 0%,#fff 35%,var(--crystal2) 65%,var(--crystal3) 100%); | |
| background-size:300% 100%; | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; | |
| animation:nameShimmer 5s linear infinite 5.2s; | |
| filter:drop-shadow(0 0 30px rgba(80,180,255,.4)); | |
| } | |
| @keyframes nameShimmer{ | |
| 0%{background-position:300% 0}100%{background-position:-300% 0} | |
| } | |
| .hero-tagline{ | |
| font-family:'Raleway',sans-serif;font-size:clamp(13px,1.6vw,18px); | |
| font-weight:200;font-style:italic;letter-spacing:4px; | |
| color:var(--ghost);margin-bottom:56px; | |
| animation:fadeUp .8s ease 5.2s both; | |
| } | |
| .hero-pillars{ | |
| display:flex;gap:2px;margin-bottom:64px; | |
| animation:fadeUp .8s ease 5.4s both; | |
| } | |
| .pillar-chip{ | |
| padding:12px 32px; | |
| font-family:'Orbitron',monospace;font-size:10px;font-weight:600;letter-spacing:4px; | |
| border:1px solid;position:relative;overflow:hidden; | |
| transition:all .3s; | |
| } | |
| .pillar-chip::before{ | |
| content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s; | |
| } | |
| .pillar-chip:hover::before{opacity:1} | |
| .pillar-chip:hover{transform:translateY(-3px)} | |
| .chip-echo{ | |
| color:var(--echo);border-color:rgba(0,212,255,.3); | |
| background:rgba(0,212,255,.04); | |
| } | |
| .chip-echo::before{background:linear-gradient(135deg,rgba(0,212,255,.08),transparent)} | |
| .chip-echo:hover{box-shadow:0 0 30px rgba(0,212,255,.15),0 8px 32px rgba(0,212,255,.1)} | |
| .chip-vexa{ | |
| color:var(--vexa);border-color:rgba(168,85,247,.3); | |
| background:rgba(168,85,247,.04); | |
| } | |
| .chip-vexa::before{background:linear-gradient(135deg,rgba(168,85,247,.08),transparent)} | |
| .chip-vexa:hover{box-shadow:0 0 30px rgba(168,85,247,.15),0 8px 32px rgba(168,85,247,.1)} | |
| .hero-desc{ | |
| font-size:15px;font-weight:300;line-height:2.2;color:var(--text); | |
| max-width:620px;margin:0 auto 52px; | |
| animation:fadeUp .8s ease 5.6s both; | |
| } | |
| .hero-desc strong{color:var(--bright);font-weight:500} | |
| .hero-cta{ | |
| display:flex;gap:14px;justify-content:center; | |
| animation:fadeUp .8s ease 5.8s both; | |
| } | |
| .btn-primary{ | |
| padding:14px 40px; | |
| background:linear-gradient(135deg,var(--echo),var(--vexa)); | |
| border:none;cursor:none; | |
| font-family:'Orbitron',monospace;font-size:9px;font-weight:700;letter-spacing:4px; | |
| color:var(--void);text-transform:uppercase; | |
| position:relative;overflow:hidden;transition:all .3s; | |
| clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%); | |
| } | |
| .btn-primary::after{ | |
| content:'';position:absolute;inset:0; | |
| background:linear-gradient(135deg,var(--gold),var(--lime)); | |
| opacity:0;transition:opacity .3s; | |
| } | |
| .btn-primary span{position:relative;z-index:1} | |
| .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,212,255,.22)} | |
| .btn-primary:hover::after{opacity:1} | |
| .btn-ghost{ | |
| padding:14px 32px;background:transparent; | |
| border:1px solid var(--edge);cursor:none; | |
| font-family:'Orbitron',monospace;font-size:9px;font-weight:500;letter-spacing:3px; | |
| color:var(--ghost);text-transform:uppercase;transition:all .2s; | |
| } | |
| .btn-ghost:hover{border-color:var(--edge2);color:var(--bright)} | |
| /* Scroll indicator */ | |
| .scroll-ind{ | |
| position:absolute;bottom:40px;left:50%;transform:translateX(-50%); | |
| display:flex;flex-direction:column;align-items:center;gap:8px; | |
| animation:fadeUp .8s ease 6.2s both; | |
| } | |
| .scroll-line{ | |
| width:1px;height:48px; | |
| background:linear-gradient(to bottom,transparent,var(--echo),transparent); | |
| animation:scrollPulse 2s ease-in-out infinite; | |
| } | |
| @keyframes scrollPulse{ | |
| 0%,100%{opacity:.3;transform:scaleY(1)} | |
| 50%{opacity:.8;transform:scaleY(1.3)} | |
| } | |
| .scroll-txt{ | |
| font-family:'Fira Code',monospace;font-size:7px;letter-spacing:4px; | |
| color:var(--ghost);transform:rotate(90deg);white-space:nowrap;margin-top:8px; | |
| } | |
| @keyframes fadeUp{ | |
| from{opacity:0;transform:translateY(20px)} | |
| to{opacity:1;transform:translateY(0)} | |
| } | |
| /* ═══════════════════════════════════════ | |
| SECTION BASE | |
| ═══════════════════════════════════════ */ | |
| .wrap{max-width:1160px;margin:0 auto;padding:0 52px} | |
| .section{ | |
| padding:140px 0; | |
| opacity:0;transform:translateY(40px); | |
| transition:opacity .9s ease,transform .9s ease; | |
| } | |
| .section.vis{opacity:1;transform:translateY(0)} | |
| .s-tag{ | |
| font-family:'Fira Code',monospace;font-size:8.5px;letter-spacing:6px; | |
| color:var(--ghost);margin-bottom:14px;text-transform:uppercase; | |
| display:flex;align-items:center;gap:14px; | |
| } | |
| .s-tag::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--edge),transparent)} | |
| .s-title{ | |
| font-family:'Orbitron',monospace; | |
| font-size:clamp(32px,4vw,56px); | |
| font-weight:800;color:var(--bright); | |
| line-height:1.1;margin-bottom:20px;letter-spacing:-1px; | |
| } | |
| .s-title .acc-echo{color:var(--echo);text-shadow:0 0 30px rgba(0,212,255,.3)} | |
| .s-title .acc-vexa{color:var(--vexa);text-shadow:0 0 30px rgba(168,85,247,.3)} | |
| .s-intro{ | |
| font-size:14px;font-weight:300;line-height:2.1; | |
| color:var(--text);max-width:560px;margin-bottom:64px; | |
| } | |
| /* ═══════════════════════════════════════ | |
| ECHO SECTION | |
| ═══════════════════════════════════════ */ | |
| .echo-grid{ | |
| display:grid;grid-template-columns:1fr 440px; | |
| gap:80px;align-items:start; | |
| } | |
| .echo-visual{ | |
| position:relative;width:440px;height:440px; | |
| flex-shrink:0; | |
| } | |
| /* Waveform rings for Echo */ | |
| .echo-ring{ | |
| position:absolute;top:50%;left:50%; | |
| border-radius:50%;border:1px solid rgba(0,212,255,.2); | |
| transform:translate(-50%,-50%); | |
| animation:echoRingPulse linear infinite; | |
| } | |
| @keyframes echoRingPulse{ | |
| 0%{transform:translate(-50%,-50%) scale(.6);opacity:.6} | |
| 100%{transform:translate(-50%,-50%) scale(1.8);opacity:0} | |
| } | |
| .echo-core{ | |
| position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); | |
| width:140px;height:140px;border-radius:50%; | |
| background:radial-gradient(circle,rgba(0,212,255,.15) 0%,rgba(0,212,255,.04) 50%,transparent 70%); | |
| border:1px solid rgba(0,212,255,.35); | |
| display:flex;align-items:center;justify-content:center; | |
| animation:echoCorePulse 3s ease-in-out infinite; | |
| } | |
| @keyframes echoCorePulse{ | |
| 0%,100%{box-shadow:0 0 20px rgba(0,212,255,.15),0 0 60px rgba(0,212,255,.06)} | |
| 50%{box-shadow:0 0 40px rgba(0,212,255,.3),0 0 100px rgba(0,212,255,.12)} | |
| } | |
| .echo-waveform{ | |
| position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); | |
| width:300px;height:60px;overflow:hidden; | |
| } | |
| .echo-bars{ | |
| display:flex;gap:3px;align-items:center;justify-content:center;height:100%; | |
| } | |
| .echo-bar{ | |
| width:3px;border-radius:2px; | |
| background:linear-gradient(to top,rgba(0,212,255,.2),rgba(0,212,255,.8)); | |
| animation:barDance linear infinite; | |
| } | |
| @keyframes barDance{ | |
| 0%,100%{height:8px;opacity:.4} | |
| 50%{height:var(--h,30px);opacity:1} | |
| } | |
| .echo-features{display:flex;flex-direction:column;gap:2px} | |
| .feat-row{ | |
| display:grid;grid-template-columns:48px 1fr; | |
| gap:20px;align-items:start;padding:24px 28px; | |
| background:var(--panel);border:1px solid var(--edge); | |
| position:relative;overflow:hidden;transition:all .3s; | |
| } | |
| .feat-row::before{ | |
| content:'';position:absolute;left:0;top:0;bottom:0;width:2px; | |
| background:linear-gradient(to bottom,transparent,var(--echo),transparent); | |
| transform:scaleY(0);transform-origin:center;transition:transform .4s; | |
| } | |
| .feat-row::after{ | |
| content:'';position:absolute;inset:0; | |
| background:linear-gradient(90deg,rgba(0,212,255,.025),transparent 40%); | |
| opacity:0;transition:opacity .3s; | |
| } | |
| .feat-row:hover{border-color:rgba(0,212,255,.14)} | |
| .feat-row:hover::before{transform:scaleY(1)} | |
| .feat-row:hover::after{opacity:1} | |
| .feat-icon{ | |
| font-family:'Orbitron',monospace;font-size:22px;font-weight:700; | |
| color:rgba(0,212,255,.4);line-height:1;padding-top:2px; | |
| } | |
| .feat-title{ | |
| font-family:'Orbitron',monospace;font-size:12px;font-weight:700; | |
| color:var(--bright);letter-spacing:1px;margin-bottom:7px; | |
| } | |
| .feat-body{font-size:12px;font-weight:300;line-height:1.9;color:var(--text)} | |
| .feat-tag{ | |
| font-family:'Fira Code',monospace;font-size:7.5px;letter-spacing:3px; | |
| color:rgba(0,212,255,.5);margin-top:8px; | |
| } | |
| /* ═══════════════════════════════════════ | |
| VEXA SECTION | |
| ═══════════════════════════════════════ */ | |
| .vexa-grid{ | |
| display:grid;grid-template-columns:440px 1fr; | |
| gap:80px;align-items:start; | |
| } | |
| /* Crystal formation animation for Vexa */ | |
| .vexa-visual{ | |
| position:relative;width:440px;height:440px; | |
| display:flex;align-items:center;justify-content:center; | |
| } | |
| .vexa-crystal-wrap{ | |
| animation:vexaCrystalBreath 5s ease-in-out infinite; | |
| filter:drop-shadow(0 0 30px rgba(168,85,247,.2)) drop-shadow(0 0 80px rgba(168,85,247,.08)); | |
| } | |
| @keyframes vexaCrystalBreath{ | |
| 0%,100%{filter:drop-shadow(0 0 25px rgba(168,85,247,.18)) drop-shadow(0 0 70px rgba(168,85,247,.07))} | |
| 50%{filter:drop-shadow(0 0 50px rgba(168,85,247,.3)) drop-shadow(0 0 120px rgba(168,85,247,.12))} | |
| } | |
| /* Orbiting particle ring for Vexa (CSS not SVG) */ | |
| .vexa-orbit{ | |
| position:absolute;top:50%;left:50%; | |
| transform:translate(-50%,-50%); | |
| width:380px;height:380px; | |
| border-radius:50%; | |
| border:1px solid rgba(168,85,247,.08); | |
| animation:vexaOrbit 20s linear infinite; | |
| } | |
| @keyframes vexaOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}} | |
| .vexa-orbit-dot{ | |
| position:absolute;top:-3px;left:50%;transform:translateX(-50%); | |
| width:6px;height:6px;border-radius:50%; | |
| background:var(--vexa); | |
| box-shadow:0 0 10px var(--vexa),0 0 20px rgba(168,85,247,.4); | |
| } | |
| .vexa-orbit2{ | |
| position:absolute;top:50%;left:50%; | |
| transform:translate(-50%,-50%); | |
| width:310px;height:310px; | |
| border-radius:50%; | |
| border:1px solid rgba(168,85,247,.06); | |
| animation:vexaOrbit 14s linear infinite reverse; | |
| } | |
| .vexa-orbit2-dot{ | |
| position:absolute;bottom:-3px;left:50%;transform:translateX(-50%); | |
| width:5px;height:5px;border-radius:50%; | |
| background:var(--crystal3); | |
| box-shadow:0 0 8px var(--crystal3); | |
| } | |
| .vexa-phases{display:flex;flex-direction:column;gap:2px} | |
| .phase-row{ | |
| display:grid;grid-template-columns:80px 1fr; | |
| gap:20px;align-items:start;padding:22px 28px; | |
| background:var(--panel);border:1px solid var(--edge); | |
| position:relative;overflow:hidden;transition:all .3s; | |
| } | |
| .phase-row::before{ | |
| content:'';position:absolute;left:0;top:0;bottom:0;width:2px; | |
| background:linear-gradient(to bottom,transparent,var(--vexa),transparent); | |
| transform:scaleY(0);transform-origin:center;transition:transform .4s; | |
| } | |
| .phase-row::after{ | |
| content:'';position:absolute;inset:0; | |
| background:linear-gradient(90deg,rgba(168,85,247,.025),transparent 40%); | |
| opacity:0;transition:opacity .3s; | |
| } | |
| .phase-row:hover{border-color:rgba(168,85,247,.14)} | |
| .phase-row:hover::before{transform:scaleY(1)} | |
| .phase-row:hover::after{opacity:1} | |
| .phase-num{ | |
| font-family:'Orbitron',monospace;font-size:28px;font-weight:900; | |
| color:rgba(168,85,247,.25);line-height:1; | |
| } | |
| .phase-title{ | |
| font-family:'Orbitron',monospace;font-size:11px;font-weight:700; | |
| color:var(--bright);letter-spacing:1px;margin-bottom:7px; | |
| } | |
| .phase-body{font-size:12px;font-weight:300;line-height:1.9;color:var(--text)} | |
| .phase-meta{ | |
| font-family:'Fira Code',monospace;font-size:7.5px;letter-spacing:3px; | |
| color:rgba(168,85,247,.5);margin-top:8px; | |
| } | |
| /* ═══════════════════════════════════════ | |
| ORENTHAL VISION PANEL | |
| ═══════════════════════════════════════ */ | |
| .vision-wrap{ | |
| position:relative; | |
| background:var(--panel);border:1px solid var(--edge); | |
| overflow:hidden; | |
| } | |
| .vision-wrap::before{ | |
| content:'';position:absolute;top:0;left:0;right:0;height:1px; | |
| background:linear-gradient(90deg,transparent,var(--echo),var(--vexa),var(--crystal3),transparent); | |
| animation:topRuleShimmer 4s linear infinite; | |
| } | |
| @keyframes topRuleShimmer{ | |
| 0%{background-position:0% 0} | |
| 100%{background-position:200% 0} | |
| } | |
| /* Animated constellation bg */ | |
| .vision-wrap::after{ | |
| content:'';position:absolute;inset:0; | |
| background: | |
| radial-gradient(ellipse 45% 60% at 5% 50%,rgba(0,212,255,.03) 0%,transparent 60%), | |
| radial-gradient(ellipse 45% 60% at 95% 50%,rgba(168,85,247,.03) 0%,transparent 60%); | |
| pointer-events:none; | |
| } | |
| .vision-inner{ | |
| display:grid;grid-template-columns:1fr 1fr 1fr; | |
| gap:0; | |
| } | |
| .vision-col{ | |
| padding:60px 48px; | |
| position:relative; | |
| } | |
| .vision-col:not(:last-child)::after{ | |
| content:'';position:absolute;top:40px;right:0;bottom:40px;width:1px; | |
| background:linear-gradient(to bottom,transparent,var(--edge),transparent); | |
| } | |
| .v-icon{font-size:28px;margin-bottom:18px} | |
| .v-title{ | |
| font-family:'Orbitron',monospace;font-size:14px;font-weight:700; | |
| color:var(--bright);letter-spacing:1px;margin-bottom:12px; | |
| line-height:1.3; | |
| } | |
| .v-body{font-size:12.5px;font-weight:300;line-height:2;color:var(--text)} | |
| .v-stat{ | |
| font-family:'Orbitron',monospace;font-size:36px;font-weight:900; | |
| margin-top:18px;line-height:1; | |
| } | |
| /* ═══════════════════════════════════════ | |
| MATRIX.CORP LINEAGE | |
| ═══════════════════════════════════════ */ | |
| .lineage-table{ | |
| width:100%;border-collapse:separate;border-spacing:0 2px; | |
| } | |
| .lineage-row{ | |
| transition:all .2s; | |
| } | |
| .lineage-row td{ | |
| padding:16px 22px; | |
| background:var(--panel);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge); | |
| font-size:12px;font-weight:300;color:var(--text); | |
| transition:all .2s; | |
| } | |
| .lineage-row td:first-child{ | |
| border-left:1px solid var(--edge); | |
| font-family:'Orbitron',monospace;font-size:12px;font-weight:700;color:var(--bright); | |
| border-right:none; | |
| } | |
| .lineage-row td:last-child{border-right:1px solid var(--edge)} | |
| .lineage-row:hover td{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)} | |
| .lineage-row:hover td:first-child{color:var(--echo)} | |
| .badge{ | |
| display:inline-flex;align-items:center;gap:6px; | |
| font-family:'Fira Code',monospace;font-size:7.5px;letter-spacing:2px; | |
| padding:3px 10px;border:1px solid; | |
| } | |
| .b-live{color:var(--echo);border-color:rgba(0,212,255,.3)} | |
| .b-preview{color:var(--gold);border-color:rgba(251,191,36,.3)} | |
| .b-planned{color:var(--vexa);border-color:rgba(168,85,247,.3)} | |
| .b-road{color:var(--text);border-color:var(--edge)} | |
| .bdot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:bdot 2s ease-in-out infinite} | |
| @keyframes bdot{0%,100%{opacity:1}50%{opacity:.3}} | |
| /* ═══════════════════════════════════════ | |
| CLOSING | |
| ═══════════════════════════════════════ */ | |
| .closing{ | |
| padding:140px 0 120px;text-align:center; | |
| position:relative; | |
| } | |
| .closing::before{ | |
| content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); | |
| width:700px;height:700px; | |
| background:radial-gradient(circle,rgba(0,212,255,.035) 0%,rgba(168,85,247,.02) 40%,transparent 70%); | |
| pointer-events:none; | |
| } | |
| .closing-pre{ | |
| font-family:'Fira Code',monospace;font-size:9px;letter-spacing:6px; | |
| color:var(--ghost);margin-bottom:20px; | |
| } | |
| .closing-h{ | |
| font-family:'Orbitron',monospace; | |
| font-size:clamp(40px,5.5vw,72px); | |
| font-weight:900;color:var(--bright); | |
| line-height:1.05;margin-bottom:22px;letter-spacing:-1px; | |
| } | |
| .closing-h .ce{ | |
| background:linear-gradient(135deg,var(--echo),#fff 35%,var(--vexa)); | |
| background-size:200% 100%; | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; | |
| animation:nameShimmer 4s linear infinite; | |
| } | |
| .closing-sub{ | |
| font-size:14px;font-weight:300;line-height:2;color:var(--text); | |
| max-width:480px;margin:0 auto 52px; | |
| } | |
| .closing-acts{display:flex;gap:14px;justify-content:center} | |
| /* ═══════════════════════════════════════ | |
| FOOTER | |
| ═══════════════════════════════════════ */ | |
| footer{ | |
| border-top:1px solid var(--edge); | |
| padding:48px 52px; | |
| display:grid;grid-template-columns:220px 1fr auto; | |
| align-items:start;gap:48px; | |
| } | |
| .foot-name{ | |
| font-family:'Orbitron',monospace;font-size:13px;font-weight:800; | |
| letter-spacing:4px;color:var(--bright);margin-bottom:6px; | |
| } | |
| .foot-sub{font-family:'Fira Code',monospace;font-size:8px;letter-spacing:3px;color:var(--ghost);margin-bottom:14px} | |
| .foot-copy{font-family:'Fira Code',monospace;font-size:7.5px;color:var(--ghost);letter-spacing:1px;line-height:2} | |
| .foot-links{display:flex;gap:28px;flex-wrap:wrap;padding-top:3px} | |
| .foot-links a{font-size:9.5px;letter-spacing:2px;color:var(--ghost);text-decoration:none;font-weight:300;transition:color .2s} | |
| .foot-links a:hover{color:var(--bright)} | |
| .foot-hf{ | |
| font-family:'Fira Code',monospace;font-size:9px;letter-spacing:3px; | |
| color:var(--ghost);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .2s; | |
| } | |
| .foot-hf:hover{color:var(--echo)} | |
| @media(max-width:900px){ | |
| .echo-grid,.vexa-grid{grid-template-columns:1fr} | |
| .echo-visual,.vexa-visual{display:none} | |
| .vision-inner{grid-template-columns:1fr} | |
| .vision-col::after{display:none} | |
| footer{grid-template-columns:1fr} | |
| nav .nav-links{display:none} | |
| .closing-acts{flex-direction:column;align-items:center} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- RETICLE CURSOR --> | |
| <div id="reticle"> | |
| <svg viewBox="0 0 36 36" fill="none"> | |
| <circle cx="18" cy="18" r="14" stroke="rgba(0,212,255,.35)" stroke-width="1" stroke-dasharray="4 8"/> | |
| <line x1="18" y1="2" x2="18" y2="8" stroke="rgba(0,212,255,.7)" stroke-width="1"/> | |
| <line x1="18" y1="28" x2="18" y2="34" stroke="rgba(0,212,255,.7)" stroke-width="1"/> | |
| <line x1="2" y1="18" x2="8" y2="18" stroke="rgba(0,212,255,.7)" stroke-width="1"/> | |
| <line x1="28" y1="18" x2="34" y2="18" stroke="rgba(0,212,255,.7)" stroke-width="1"/> | |
| <circle cx="18" cy="18" r="1.5" fill="rgba(0,212,255,.6)"/> | |
| <polygon points="18,5 19.2,7.5 18,7 16.8,7.5" fill="rgba(0,212,255,.5)"/> | |
| </svg> | |
| </div> | |
| <div id="reticle-dot"></div> | |
| <!-- WARP INTRO --> | |
| <div id="warp-overlay"> | |
| <canvas id="warp-canvas"></canvas> | |
| <div class="warp-label">APPROACHING ORENTHAL SYSTEM</div> | |
| <div class="warp-progress"><div class="warp-bar"></div></div> | |
| </div> | |
| <!-- SPACE BACKGROUND --> | |
| <canvas id="space-canvas"></canvas> | |
| <div class="atmo-glow"></div> | |
| <div class="planet-glow"></div> | |
| <div class="page"> | |
| <!-- NAV --> | |
| <nav id="mainNav"> | |
| <div class="nav-left"> | |
| <div class="nav-badge">MATRIX.CORP</div> | |
| <div class="nav-brand">ORENTHAL</div> | |
| </div> | |
| <div class="nav-right"> | |
| <ul class="nav-links"> | |
| <li><a href="#echo">ECHO</a></li> | |
| <li><a href="#vexa">Vexa</a></li> | |
| <li><a href="#lineage">Models</a></li> | |
| <li><a href="#vision">Vision</a></li> | |
| </ul> | |
| <a class="nav-hf" href="https://huggingface.co/Matrix-Corp" target="_blank">HuggingFace ↗</a> | |
| </div> | |
| </nav> | |
| <!-- ═══════ HERO ═══════ --> | |
| <section class="hero" id="top"> | |
| <!-- Descent grid --> | |
| <div class="descent-grid"> | |
| <div class="grid-plane"></div> | |
| </div> | |
| <!-- Atmosphere rings rising up --> | |
| <div class="atmo-ring" style="width:300px;height:300px;border-color:rgba(0,212,255,.15);bottom:-10%;left:calc(50% - 150px);animation-duration:6s;animation-delay:0s"></div> | |
| <div class="atmo-ring" style="width:500px;height:500px;border-color:rgba(0,212,255,.1);bottom:-10%;left:calc(50% - 250px);animation-duration:7s;animation-delay:1.5s"></div> | |
| <div class="atmo-ring" style="width:700px;height:700px;border-color:rgba(168,85,247,.08);bottom:-10%;left:calc(50% - 350px);animation-duration:8s;animation-delay:3s"></div> | |
| <div class="atmo-ring" style="width:900px;height:900px;border-color:rgba(0,212,255,.05);bottom:-10%;left:calc(50% - 450px);animation-duration:9s;animation-delay:4.5s"></div> | |
| <!-- LOGO --> | |
| <div class="hero-logo-wrap"> | |
| <svg width="160" height="175" viewBox="0 0 500 520" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <linearGradient id="hcg1" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#50b4ff" stop-opacity=".95"/> | |
| <stop offset="28%" stop-color="#a080ff" stop-opacity=".85"/> | |
| <stop offset="62%" stop-color="#ffd050" stop-opacity=".75"/> | |
| <stop offset="100%" stop-color="#50b4ff" stop-opacity=".55"/> | |
| </linearGradient> | |
| <linearGradient id="hcg2" x1="100%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" stop-color="#f080a0" stop-opacity=".65"/> | |
| <stop offset="100%" stop-color="#a0d4ff" stop-opacity=".7"/> | |
| </linearGradient> | |
| <linearGradient id="hcg3" x1="50%" y1="0%" x2="50%" y2="100%"> | |
| <stop offset="0%" stop-color="#a0f0b0" stop-opacity=".48"/> | |
| <stop offset="100%" stop-color="#ffd050" stop-opacity=".22"/> | |
| </linearGradient> | |
| <linearGradient id="hcgE" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#50b4ff"/> | |
| <stop offset="100%" stop-color="#a080ff"/> | |
| </linearGradient> | |
| <radialGradient id="hcgA" cx="50%" cy="46%" r="48%"> | |
| <stop offset="0%" stop-color="#50b4ff" stop-opacity=".07"/> | |
| <stop offset="100%" stop-color="transparent"/> | |
| </radialGradient> | |
| <radialGradient id="hcgB" cx="50%" cy="44%" r="28%"> | |
| <stop offset="0%" stop-color="white" stop-opacity=".92"/> | |
| <stop offset="32%" stop-color="#50b4ff" stop-opacity=".42"/> | |
| <stop offset="100%" stop-color="transparent"/> | |
| </radialGradient> | |
| <radialGradient id="hcgP" cx="50%" cy="50%" r="50%"> | |
| <stop offset="0%" stop-color="#50b4ff" stop-opacity=".58"> | |
| <animate attributeName="stop-opacity" values=".58;1;.58" dur="3.8s" repeatCount="indefinite"/> | |
| </stop> | |
| <stop offset="100%" stop-color="transparent"/> | |
| <animate attributeName="r" values="35%;62%;35%" dur="3.8s" repeatCount="indefinite"/> | |
| </radialGradient> | |
| <filter id="hcglow" x="-40%" y="-40%" width="180%" height="180%"> | |
| <feGaussianBlur stdDeviation="5" result="b"/> | |
| <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge> | |
| </filter> | |
| <filter id="hcsoft" x="-18%" y="-18%" width="136%" height="136%"> | |
| <feGaussianBlur stdDeviation="4.5" result="b"/> | |
| <feComposite in="b" in2="SourceGraphic" operator="over"/> | |
| </filter> | |
| <filter id="hvg" x="-60%" y="-60%" width="220%" height="220%"> | |
| <feGaussianBlur stdDeviation="3" result="b"/> | |
| <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge> | |
| </filter> | |
| <linearGradient id="hshim" x1="0" y1="0" x2="500" y2="440" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values="-.35;1.15" dur="3.6s" repeatCount="indefinite"/></stop> | |
| <stop offset="20%" stop-color="white" stop-opacity=".2"><animate attributeName="offset" values="-.15;1.35" dur="3.6s" repeatCount="indefinite"/></stop> | |
| <stop offset="40%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values=".05;1.55" dur="3.6s" repeatCount="indefinite"/></stop> | |
| </linearGradient> | |
| <clipPath id="hcc"><polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90"/></clipPath> | |
| <style> | |
| .hlf-a{animation:hbf 4s ease-in-out infinite} | |
| .hlf-b{animation:hbf 4s ease-in-out infinite .7s} | |
| .hlf-c{animation:hbf 4s ease-in-out infinite 1.4s} | |
| .hlf-d{animation:hbf 4s ease-in-out infinite 2.1s} | |
| .hlf-e{animation:hbf 4s ease-in-out infinite 2.8s} | |
| .hlf-f{animation:hbf 4s ease-in-out infinite 3.5s} | |
| @keyframes hbf{0%,100%{opacity:.7}50%{opacity:1}} | |
| .hir{animation:hrf 5s ease-in-out infinite} | |
| @keyframes hrf{0%,100%{opacity:.28}40%{opacity:.55}70%{opacity:.22}} | |
| .hcd{animation:hcb 3.8s ease-in-out infinite} | |
| @keyframes hcb{0%,100%{r:5;opacity:.92}50%{r:7.5;opacity:1}} | |
| .hfa{animation:hfA 5.8s ease-in-out infinite} | |
| .hfb{animation:hfB 7.4s ease-in-out infinite} | |
| .hfc{animation:hfA 6.6s ease-in-out infinite 1.3s} | |
| .hfd{animation:hfB 8.2s ease-in-out infinite 2.2s} | |
| .hfe{animation:hfA 9.3s ease-in-out infinite .7s} | |
| .hff{animation:hfB 7.8s ease-in-out infinite 1.9s} | |
| @keyframes hfA{0%,100%{transform:translateY(0) rotate(0deg);opacity:.42}50%{transform:translateY(-9px) rotate(14deg);opacity:.72}} | |
| @keyframes hfB{0%,100%{transform:translateY(0) rotate(0deg);opacity:.36}50%{transform:translateY(8px) rotate(-11deg);opacity:.62}} | |
| .hsp{animation:hspf 6s ease-in-out infinite} | |
| .hsp2{animation:hspf 6s ease-in-out infinite 2s} | |
| @keyframes hspf{0%,100%{opacity:.14}50%{opacity:.28}} | |
| </style> | |
| </defs> | |
| <circle cx="250" cy="195" r="195" fill="url(#hcgA)" filter="url(#hcglow)"/> | |
| <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#hcg1)" opacity=".075"/> | |
| <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="none" stroke="url(#hcg1)" stroke-width="1.6" filter="url(#hcglow)"/> | |
| <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#hshim)" opacity=".55" clip-path="url(#hcc)"/> | |
| <line x1="250" y1="18" x2="250" y2="354" stroke="rgba(80,180,255,.22)" stroke-width=".7"/> | |
| <line x1="90" y1="198" x2="410" y2="198" stroke="rgba(255,255,255,.075)" stroke-width=".65"/> | |
| <line x1="118" y1="90" x2="372" y2="308" stroke="rgba(255,255,255,.06)" stroke-width=".6"/> | |
| <line x1="382" y1="90" x2="128" y2="308" stroke="rgba(255,255,255,.06)" stroke-width=".6"/> | |
| <polygon points="250,52 338,100 360,198 330,294 250,328 170,294 140,198 162,100" fill="url(#hcg2)" opacity=".06"/> | |
| <polygon points="250,52 338,100 360,198 330,294 250,328 170,294 140,198 162,100" fill="none" stroke="url(#hcg2)" stroke-width="1" opacity=".44" class="hir"/> | |
| <polygon points="250,88 318,126 338,198 314,268 250,290 186,268 162,198 182,126" fill="none" stroke="rgba(255,210,80,.16)" stroke-width=".8" class="hir"/> | |
| <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="url(#hcg3)" opacity=".32"/> | |
| <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="none" stroke="white" stroke-width=".8" opacity=".26" class="hir"/> | |
| <polygon points="250,122 304,154 250,193" fill="white" opacity=".065" class="hlf-a"/> | |
| <polygon points="250,122 196,154 250,193" fill="rgba(80,180,255,.13)" class="hlf-b"/> | |
| <polygon points="250,193 304,154 304,232" fill="rgba(160,128,255,.08)" class="hlf-c"/> | |
| <polygon points="250,193 196,154 196,232" fill="rgba(255,210,80,.065)" class="hlf-d"/> | |
| <polygon points="250,193 304,232 250,264" fill="rgba(240,128,160,.07)" class="hlf-e"/> | |
| <polygon points="250,193 196,232 250,264" fill="rgba(160,240,176,.065)" class="hlf-f"/> | |
| <line x1="250" y1="122" x2="250" y2="264" stroke="rgba(80,180,255,.3)" stroke-width=".65"/> | |
| <line x1="196" y1="154" x2="304" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/> | |
| <line x1="304" y1="154" x2="196" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/> | |
| <circle cx="250" cy="193" r="46" fill="url(#hcgP)" filter="url(#hcglow)"/> | |
| <circle cx="250" cy="193" r="60" fill="url(#hcgB)" filter="url(#hcsoft)" opacity=".75"/> | |
| <circle cx="250" cy="193" fill="white" opacity=".97" filter="url(#hcglow)" class="hcd"> | |
| <animate attributeName="r" values="5;7.5;5" dur="3.8s" repeatCount="indefinite"/> | |
| </circle> | |
| <circle cx="250" cy="18" r="4.2" fill="#50b4ff" opacity=".95" filter="url(#hvg)"/> | |
| <circle cx="382" cy="90" r="3.2" fill="#a080ff" opacity=".84"/> | |
| <circle cx="410" cy="198" r="3.2" fill="#ffd050" opacity=".8"/> | |
| <circle cx="372" cy="308" r="3.2" fill="#f080a0" opacity=".76"/> | |
| <circle cx="250" cy="354" r="4.2" fill="#50b4ff" opacity=".9" filter="url(#hvg)"/> | |
| <circle cx="128" cy="308" r="3.2" fill="#a0f0b0" opacity=".72"/> | |
| <circle cx="90" cy="198" r="3.2" fill="#a0d4ff" opacity=".78"/> | |
| <circle cx="118" cy="90" r="3.2" fill="#a080ff" opacity=".74"/> | |
| <line x1="250" y1="18" x2="382" y2="90" stroke="#50b4ff" stroke-width="2.2" opacity=".54" filter="url(#hvg)"/> | |
| <line x1="250" y1="18" x2="118" y2="90" stroke="#a0d4ff" stroke-width="1.3" opacity=".38"/> | |
| <g class="hfa"><polygon points="406,58 412,67 406,76 400,67" fill="none" stroke="#50b4ff" stroke-width=".85" opacity=".44"/></g> | |
| <g class="hfb"><polygon points="40,68 46,77 40,86 34,77" fill="none" stroke="#a080ff" stroke-width=".85" opacity=".38"/></g> | |
| <g class="hfc"><polygon points="424,308 430,317 424,326 418,317" fill="none" stroke="#ffd050" stroke-width=".75" opacity=".35"/></g> | |
| <g class="hfd"><polygon points="24,300 30,309 24,318 18,309" fill="none" stroke="#f080a0" stroke-width=".75" opacity=".32"/></g> | |
| <g class="hfe"><polygon points="200,4 206,13 200,22 194,13" fill="none" stroke="#a0f0b0" stroke-width=".75" opacity=".36"/></g> | |
| <g class="hff"><polygon points="296,375 302,384 296,393 290,384" fill="none" stroke="#a0d4ff" stroke-width=".75" opacity=".3"/></g> | |
| <text x="250" y="408" text-anchor="middle" font-family="'Orbitron', monospace" font-size="26" font-weight="800" letter-spacing="10" fill="url(#hcgE)" opacity=".9">ORENTHAL</text> | |
| <text x="250" y="430" text-anchor="middle" font-family="monospace" font-size="8" font-weight="300" letter-spacing="6" fill="rgba(160,180,255,.28)">FRONTIER INTELLIGENCE</text> | |
| </svg> | |
| </div> | |
| <div class="hero-eyebrow">MATRIX.CORP PRESENTS</div> | |
| <h1 class="hero-h1"> | |
| <span class="o-glow">ORENTHAL</span> | |
| </h1> | |
| <div class="hero-tagline">specialised intelligence · built from the frontier up</div> | |
| <div class="hero-pillars"> | |
| <div class="pillar-chip chip-echo">🩸 ECHO — Living Error Memory</div> | |
| <div class="pillar-chip chip-vexa">◈ VEXA — Crystalline Substrate</div> | |
| </div> | |
| <p class="hero-desc"> | |
| Orenthal is a <strong>closed-source frontier AI lab</strong> and API platform — the commercial flagship of Matrix.Corp. | |
| Where Matrix.Corp publishes open research, Orenthal ships the edge. | |
| Built on <strong>Matrix Lattice</strong> — shipped. Powered by <strong>ECHO</strong> — the model that learns from its own mistakes. | |
| </p> | |
| <div class="hero-cta"> | |
| <button class="btn-primary"><span>Request API Access</span></button> | |
| <button class="btn-ghost">Read the Docs</button> | |
| </div> | |
| <div class="scroll-ind"> | |
| <div class="scroll-line"></div> | |
| <div class="scroll-txt">SCROLL TO DESCEND</div> | |
| </div> | |
| </section> | |
| <!-- ═══════ ECHO ═══════ --> | |
| <div class="wrap"> | |
| <section class="section" id="echo"> | |
| <div class="s-tag">// PRODUCT ONE · BUILD IN PROGRESS</div> | |
| <h2 class="s-title"><span class="acc-echo">ECHO</span> — Living Error Memory</h2> | |
| <p class="s-intro">ECHO is not a code assistant. It is a 27B coding LLM that remembers every mistake it has ever made — and gets harder to fool with every correction. Built entirely in Rust. Running on <code style="font-family:'Fira Code',monospace;font-size:12px;color:var(--echo)">candle</code>. The model that learns from its own scars.</p> | |
| <div class="echo-grid"> | |
| <div class="echo-features"> | |
| <div class="feat-row"> | |
| <div class="feat-icon">🩸</div> | |
| <div> | |
| <div class="feat-title">Scars — Crystallised Mistakes</div> | |
| <div class="feat-body">Every correction ECHO receives forms a <strong style="color:var(--bright)">Scar</strong> — a typed, weighted memory object stored in a live petgraph lattice. Factual. Logical. Contextual. Hallucination. Overconfidence. Mistakes are not erased. They become assets.</div> | |
| <div class="feat-tag">SCAR TYPES: FACTUAL · LOGICAL · CONTEXTUAL · HALLUCINATION · OVERCONFIDENCE</div> | |
| </div> | |
| </div> | |
| <div class="feat-row"> | |
| <div class="feat-icon">⟡</div> | |
| <div> | |
| <div class="feat-title">Pre-Scan Before Every Response</div> | |
| <div class="feat-body">Before generating a single token, ECHO scans its Scar lattice for similar past mistakes and injects caution context into the prompt. The core loop: <strong style="color:var(--bright)">prompt → scan lattice → inject caution → generate → correction → new Scar</strong>.</div> | |
| <div class="feat-tag">PRE-SCAN · CAUTION INJECTION · LATTICE LOOKUP</div> | |
| </div> | |
| </div> | |
| <div class="feat-row"> | |
| <div class="feat-icon">◎</div> | |
| <div> | |
| <div class="feat-title">Domain Weakness Map</div> | |
| <div class="feat-body">ECHO tracks which topics it is systematically weak in and automatically suppresses confidence in high-risk domains. The more it's corrected in a domain, the more it warns before it speaks. Intelligence that knows its own limits.</div> | |
| <div class="feat-tag">DOMAIN RISK TRACKING · AUTO CONFIDENCE SUPPRESSION</div> | |
| </div> | |
| </div> | |
| <div class="feat-row"> | |
| <div class="feat-icon">▲</div> | |
| <div> | |
| <div class="feat-title">Built in Rust · Runs on Candle</div> | |
| <div class="feat-body">ECHO is built entirely in Rust using HuggingFace <code style="font-family:'Fira Code',monospace;font-size:11px;color:var(--echo)">candle</code> for inference. No Python. No PyTorch overhead. Fast, safe, and statically compiled. Base model: Qwen3.5-27B distilled from Claude Opus 4.6.</div> | |
| <div class="feat-tag">RUST · CANDLE · 27B · QWEN3.5 BASE · OPUS 4.6 DISTILLED</div> | |
| </div> | |
| </div> | |
| <div class="feat-row"> | |
| <div class="feat-icon">⬡</div> | |
| <div> | |
| <div class="feat-title">OpenAI-Compatible API</div> | |
| <div class="feat-body">Drop-in replacement via <code style="font-family:'Fira Code',monospace;font-size:11px;color:var(--echo)">POST /v1/chat/completions</code>. Corrections submitted via <code style="font-family:'Fira Code',monospace;font-size:11px;color:var(--echo)">POST /v1/echo/correct</code>. Every correction you send makes ECHO permanently smarter — for you and the model.</div> | |
| <div class="feat-tag">OPENAI-COMPATIBLE · /v1/chat/completions · /v1/echo/correct</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Echo visual --> | |
| <div class="echo-visual"> | |
| <!-- Rings --> | |
| <div class="echo-ring" style="width:380px;height:380px;animation-duration:5s;animation-delay:0s"></div> | |
| <div class="echo-ring" style="width:300px;height:300px;animation-duration:5s;animation-delay:1.5s"></div> | |
| <div class="echo-ring" style="width:220px;height:220px;animation-duration:5s;animation-delay:3s"></div> | |
| <div class="echo-ring" style="width:160px;height:160px;animation-duration:5s;animation-delay:4.2s"></div> | |
| <!-- Waveform --> | |
| <div class="echo-waveform"> | |
| <div class="echo-bars" id="echoBars"></div> | |
| </div> | |
| <!-- Core --> | |
| <div class="echo-core"> | |
| <svg width="60" height="60" viewBox="0 0 60 60" fill="none"> | |
| <text x="30" y="38" text-anchor="middle" font-family="'Orbitron',monospace" font-size="11" font-weight="800" fill="rgba(0,212,255,.8)" letter-spacing="2">ECHO</text> | |
| </svg> | |
| </div> | |
| <!-- Floating code tokens --> | |
| <div style="position:absolute;inset:0;pointer-events:none;overflow:hidden"> | |
| <div style="position:absolute;font-family:'Fira Code',monospace;font-size:9px;color:rgba(0,212,255,.25);animation:floatToken 7s ease-in-out infinite;top:15%;left:5%">async fn</div> | |
| <div style="position:absolute;font-family:'Fira Code',monospace;font-size:8px;color:rgba(0,212,255,.2);animation:floatToken 9s ease-in-out infinite 2s;top:25%;right:8%">import {</div> | |
| <div style="position:absolute;font-family:'Fira Code',monospace;font-size:9px;color:rgba(80,180,255,.2);animation:floatToken 6s ease-in-out infinite 1s;bottom:20%;left:8%">useState</div> | |
| <div style="position:absolute;font-family:'Fira Code',monospace;font-size:8px;color:rgba(0,212,255,.18);animation:floatToken 8s ease-in-out infinite 3s;bottom:30%;right:5%">class Model</div> | |
| <div style="position:absolute;font-family:'Fira Code',monospace;font-size:7px;color:rgba(0,212,255,.15);animation:floatToken 10s ease-in-out infinite .5s;top:10%;left:30%">return</div> | |
| <div style="position:absolute;font-family:'Fira Code',monospace;font-size:8px;color:rgba(80,180,255,.18);animation:floatToken 7.5s ease-in-out infinite 4s;bottom:12%;left:35%">def train</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════ VEXA ═══════ --> | |
| <section class="section" id="vexa"> | |
| <div class="s-tag">// PARADIGM · PAUSED — WILL RESUME</div> | |
| <h2 class="s-title"><span class="acc-vexa">Vexa</span> — Crystalline Intelligence</h2> | |
| <p class="s-intro">Vexa is not a language model. It is a completely new computational paradigm — a crystalline intelligence substrate that acquires knowledge through crystallisation, not training. No gradients. No backprop. No GPU required. Build paused. The idea is intact. It will resume.</p> | |
| <div class="vexa-grid"> | |
| <!-- Vexa visual --> | |
| <div class="vexa-visual"> | |
| <div class="vexa-orbit"><div class="vexa-orbit-dot"></div></div> | |
| <div class="vexa-orbit2"><div class="vexa-orbit2-dot"></div></div> | |
| <div class="vexa-crystal-wrap"> | |
| <svg width="260" height="280" viewBox="0 0 500 520" fill="none"> | |
| <defs> | |
| <linearGradient id="vcg1" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#a855f7" stop-opacity=".95"/> | |
| <stop offset="40%" stop-color="#7c3aed" stop-opacity=".85"/> | |
| <stop offset="80%" stop-color="#fbbf24" stop-opacity=".6"/> | |
| <stop offset="100%" stop-color="#a855f7" stop-opacity=".5"/> | |
| </linearGradient> | |
| <linearGradient id="vcg2" x1="100%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" stop-color="#f472b6" stop-opacity=".6"/> | |
| <stop offset="100%" stop-color="#818cf8" stop-opacity=".65"/> | |
| </linearGradient> | |
| <linearGradient id="vcgE" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#a855f7"/> | |
| <stop offset="100%" stop-color="#7c3aed"/> | |
| </linearGradient> | |
| <radialGradient id="vcgB" cx="50%" cy="44%" r="28%"> | |
| <stop offset="0%" stop-color="white" stop-opacity=".88"/> | |
| <stop offset="35%" stop-color="#a855f7" stop-opacity=".4"/> | |
| <stop offset="100%" stop-color="transparent"/> | |
| </radialGradient> | |
| <radialGradient id="vcgP" cx="50%" cy="50%" r="50%"> | |
| <stop offset="0%" stop-color="#a855f7" stop-opacity=".58"> | |
| <animate attributeName="stop-opacity" values=".58;1;.58" dur="4.2s" repeatCount="indefinite"/> | |
| </stop> | |
| <stop offset="100%" stop-color="transparent"/> | |
| <animate attributeName="r" values="30%;58%;30%" dur="4.2s" repeatCount="indefinite"/> | |
| </radialGradient> | |
| <filter id="vglow" x="-40%" y="-40%" width="180%" height="180%"> | |
| <feGaussianBlur stdDeviation="5" result="b"/> | |
| <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge> | |
| </filter> | |
| <filter id="vsoft" x="-18%" y="-18%" width="136%" height="136%"> | |
| <feGaussianBlur stdDeviation="4" result="b"/> | |
| <feComposite in="b" in2="SourceGraphic" operator="over"/> | |
| </filter> | |
| <linearGradient id="vshim" x1="0" y1="0" x2="500" y2="440" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values="-.35;1.15" dur="4s" repeatCount="indefinite"/></stop> | |
| <stop offset="20%" stop-color="white" stop-opacity=".18"><animate attributeName="offset" values="-.15;1.35" dur="4s" repeatCount="indefinite"/></stop> | |
| <stop offset="40%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values=".05;1.55" dur="4s" repeatCount="indefinite"/></stop> | |
| </linearGradient> | |
| <clipPath id="vcc"><polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90"/></clipPath> | |
| </defs> | |
| <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#vcg1)" opacity=".075"/> | |
| <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="none" stroke="url(#vcg1)" stroke-width="1.6" filter="url(#vglow)"/> | |
| <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#vshim)" opacity=".5" clip-path="url(#vcc)"/> | |
| <line x1="250" y1="18" x2="250" y2="354" stroke="rgba(168,85,247,.22)" stroke-width=".7"/> | |
| <line x1="90" y1="198" x2="410" y2="198" stroke="rgba(255,255,255,.075)" stroke-width=".65"/> | |
| <line x1="118" y1="90" x2="372" y2="308" stroke="rgba(255,255,255,.055)" stroke-width=".6"/> | |
| <line x1="382" y1="90" x2="128" y2="308" stroke="rgba(255,255,255,.055)" stroke-width=".6"/> | |
| <polygon points="250,52 338,100 360,198 330,294 250,328 170,294 140,198 162,100" fill="none" stroke="url(#vcg2)" stroke-width="1" opacity=".4"/> | |
| <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="rgba(168,85,247,.06)"/> | |
| <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="none" stroke="white" stroke-width=".8" opacity=".22"/> | |
| <polygon points="250,122 304,154 250,193" fill="rgba(168,85,247,.12)"/> | |
| <polygon points="250,122 196,154 250,193" fill="white" opacity=".055"/> | |
| <polygon points="250,193 304,154 304,232" fill="rgba(124,58,237,.08)"/> | |
| <polygon points="250,193 196,154 196,232" fill="rgba(251,191,36,.055)"/> | |
| <polygon points="250,193 304,232 250,264" fill="rgba(244,114,182,.07)"/> | |
| <polygon points="250,193 196,232 250,264" fill="rgba(129,140,248,.06)"/> | |
| <line x1="250" y1="122" x2="250" y2="264" stroke="rgba(168,85,247,.3)" stroke-width=".65"/> | |
| <line x1="196" y1="154" x2="304" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/> | |
| <line x1="304" y1="154" x2="196" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/> | |
| <circle cx="250" cy="193" r="46" fill="url(#vcgP)" filter="url(#vglow)"/> | |
| <circle cx="250" cy="193" r="60" fill="url(#vcgB)" filter="url(#vsoft)" opacity=".72"/> | |
| <circle cx="250" cy="193" fill="white" opacity=".97" filter="url(#vglow)"> | |
| <animate attributeName="r" values="5;7.5;5" dur="4.2s" repeatCount="indefinite"/> | |
| </circle> | |
| <circle cx="250" cy="18" r="4.2" fill="#a855f7" opacity=".95" filter="url(#vglow)"/> | |
| <circle cx="382" cy="90" r="3.2" fill="#7c3aed" opacity=".84"/> | |
| <circle cx="410" cy="198" r="3.2" fill="#fbbf24" opacity=".8"/> | |
| <circle cx="372" cy="308" r="3.2" fill="#f472b6" opacity=".76"/> | |
| <circle cx="250" cy="354" r="4.2" fill="#a855f7" opacity=".9" filter="url(#vglow)"/> | |
| <circle cx="128" cy="308" r="3.2" fill="#86efac" opacity=".72"/> | |
| <circle cx="90" cy="198" r="3.2" fill="#818cf8" opacity=".78"/> | |
| <circle cx="118" cy="90" r="3.2" fill="#7c3aed" opacity=".74"/> | |
| <line x1="250" y1="18" x2="382" y2="90" stroke="#a855f7" stroke-width="2.2" opacity=".52" filter="url(#vglow)"/> | |
| <line x1="250" y1="18" x2="118" y2="90" stroke="#818cf8" stroke-width="1.3" opacity=".38"/> | |
| <text x="250" y="408" text-anchor="middle" font-family="'Orbitron', monospace" font-size="26" font-weight="800" letter-spacing="10" fill="url(#vcgE)" opacity=".9">VEXA</text> | |
| <text x="250" y="430" text-anchor="middle" font-family="monospace" font-size="8" font-weight="300" letter-spacing="6" fill="rgba(180,160,255,.28)">CRYSTALLINE SUBSTRATE</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="vexa-phases"> | |
| <div class="phase-row"> | |
| <div class="phase-num">01</div> | |
| <div> | |
| <div class="phase-title">Crystallisation, not Training</div> | |
| <div class="phase-body">Vexa acquires knowledge through a 5-phase crystallisation process — 10 minutes, CPU only, no GPU, no gradient descent. Knowledge forms into Glyphs: structured meaning objects that replace weights. The paradigm is different at the root.</div> | |
| <div class="phase-meta">10 MIN CRYSTALLISE · CPU ONLY · NO BACKPROP</div> | |
| </div> | |
| </div> | |
| <div class="phase-row"> | |
| <div class="phase-num">02</div> | |
| <div> | |
| <div class="phase-title">Glyphs — Structured Meaning</div> | |
| <div class="phase-body">The primitive unit of Vexa intelligence is the Glyph — a structured meaning object, not a weight. Glyphs encode relationships, context, and semantics explicitly. No hallucination from interpolation. No forgetting from compression.</div> | |
| <div class="phase-meta">NANO ~1M GLYPHS · MAX ~10B GLYPHS · 5 DENSITY TIERS</div> | |
| </div> | |
| </div> | |
| <div class="phase-row"> | |
| <div class="phase-num">03</div> | |
| <div> | |
| <div class="phase-title">Live Learning Threads</div> | |
| <div class="phase-body">Three persistent threads run continuously: the Web Crystalliser, the Interaction Crystalliser, and the Decay Monitor. Vexa grows in real time. Knowledge that stops being referenced fades. Knowledge that is reinforced deepens. Intelligence that actually lives.</div> | |
| <div class="phase-meta">WEB CRYSTALLISER · INTERACTION CRYSTALLISER · DECAY MONITOR</div> | |
| </div> | |
| </div> | |
| <div class="phase-row"> | |
| <div class="phase-num">04</div> | |
| <div> | |
| <div class="phase-title">Lume — The Substrate Language</div> | |
| <div class="phase-body">Vexa operates through Lume, a declarative-relational language built for crystalline knowledge systems. Not Python. Not SQL. Something built specifically for the way Vexa thinks — and expressive enough for you to shape it.</div> | |
| <div class="phase-meta">DECLARATIVE · RELATIONAL · LUME LANGUAGE SPEC ON HF</div> | |
| </div> | |
| </div> | |
| <div class="phase-row"> | |
| <div class="phase-num">05</div> | |
| <div> | |
| <div class="phase-title">Full Inference Bridge</div> | |
| <div class="phase-body">Vexa ships with a bridge layer compatible with Ollama, vLLM, and HuggingFace pipelines. Drop it into any existing inference stack. Nano tier (2GB) runs on any laptop. Max tier (40GB) runs on a single workstation.</div> | |
| <div class="phase-meta">OLLAMA · vLLM · HUGGINGFACE · FASTAPI · 2GB–40GB</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════ VISION PANEL ═══════ --> | |
| <section class="section" id="vision"> | |
| <div class="s-tag">// THE ORENTHAL THESIS</div> | |
| <h2 class="s-title">Why Orenthal<br>exists.</h2> | |
| <p class="s-intro">The general intelligence race is already won by the labs with billions. Orenthal plays a different game — and wins it.</p> | |
| <div class="vision-wrap"> | |
| <div class="vision-inner"> | |
| <div class="vision-col"> | |
| <div class="v-icon">🩸</div> | |
| <div class="v-title">A model that grows from its mistakes</div> | |
| <div class="v-body">Every other model forgets its failures. ECHO crystallises them into Scars — typed, weighted memory objects in a live lattice. The more you correct it, the harder it is to fool. Intelligence that doesn't just learn — it remembers how it was wrong.</div> | |
| <div class="v-stat" style="background:linear-gradient(135deg,var(--echo),var(--crystal2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">ECHO</div> | |
| </div> | |
| <div class="vision-col"> | |
| <div class="v-icon">◈</div> | |
| <div class="v-title">The next paradigm is not another transformer</div> | |
| <div class="v-body">Every major lab is scaling the same architecture. Vexa bets that the next leap isn't scale — it's structure. Crystalline knowledge that doesn't hallucinate because it doesn't interpolate. The idea is early. The build is paused. The bet is permanent.</div> | |
| <div class="v-stat" style="background:linear-gradient(135deg,var(--vexa),var(--rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Vexa</div> | |
| </div> | |
| <div class="vision-col"> | |
| <div class="v-icon">◎</div> | |
| <div class="v-title">Southeast Asia is the next frontier</div> | |
| <div class="v-body">Singapore-based. SEA-first. The developer ecosystem in Southeast Asia is underserved by every major AI lab. Orenthal is built by the region, for the region first — then the world. Boutique, focused, and operating where the incumbents aren't looking.</div> | |
| <div class="v-stat" style="background:linear-gradient(135deg,var(--gold),var(--lime));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">SEA↗</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════ MATRIX.CORP LINEAGE ═══════ --> | |
| <section class="section" id="lineage"> | |
| <div class="s-tag">// THE RESEARCH FOUNDATION</div> | |
| <h2 class="s-title">Built on<br><span style="color:var(--bright);opacity:.5">Matrix.Corp</span></h2> | |
| <p class="s-intro">Orenthal's closed systems sit above a full open-source research stack. Matrix Lattice is shipped. ECHO is building. The entire foundation is public, auditable, and open.</p> | |
| <table class="lineage-table"> | |
| <tr class="lineage-row"> | |
| <td>Matrix Lattice</td> | |
| <td>120B · 430B · 671B — Frontier MoE · 17 modules · 1M context · EQ Engine V2 · MACL · HCCE</td> | |
| <td><span class="badge b-live"><span class="bdot"></span>RELEASED</span></td> | |
| <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟣 Closed Source</td> | |
| </tr> | |
| <tr class="lineage-row"> | |
| <td>Matrix ECHO</td> | |
| <td>27B · Rust + candle · Scar lattice · Living Error Memory · OpenAI-compatible API</td> | |
| <td><span class="badge b-preview"><span class="bdot"></span>BUILD IN PROGRESS</span></td> | |
| <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Open Source</td> | |
| </tr> | |
| <tr class="lineage-row"> | |
| <td>Zenith</td> | |
| <td>7B · 28B · 32B · 70B — Reasoning + EQ Engine · Ring Attention 32K · MoE 12 experts · Tenstorrent Blackhole p300a</td> | |
| <td><span class="badge b-preview"><span class="bdot"></span>PREVIEW</span></td> | |
| <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td> | |
| </tr> | |
| <tr class="lineage-row"> | |
| <td>Vortex Scientific</td> | |
| <td>7B · 13B — Built from scratch · Custom 50K science tokeniser · Hybrid SSM+Attention · 4 domain modules</td> | |
| <td><span class="badge b-preview"><span class="bdot"></span>PREVIEW</span></td> | |
| <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td> | |
| </tr> | |
| <tr class="lineage-row"> | |
| <td>Touch Grass</td> | |
| <td>3B · 7B — Music AI · Tab & Chord · Music Theory · Ear Training · EQ Adapter · Songwriting · Qwen3.5 base</td> | |
| <td><span class="badge b-preview"><span class="bdot"></span>PREVIEW</span></td> | |
| <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td> | |
| </tr> | |
| <tr class="lineage-row"> | |
| <td>Matrix Voxel</td> | |
| <td>3D generation · Flow-matching DiT ~2.3B · Atlas · Forge · Cast · Lens · Prime · A100 40GB target</td> | |
| <td><span class="badge b-road">PLANNED</span></td> | |
| <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Open / 🟣 Prime closed</td> | |
| </tr> | |
| <tr class="lineage-row"> | |
| <td>Matrix Vexa</td> | |
| <td>Crystalline Intelligence Substrate · Glyph knowledge objects · Lume language · CPU only · No training</td> | |
| <td><span class="badge b-road">PAUSED</span></td> | |
| <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td> | |
| </tr> | |
| </table> | |
| </section> | |
| <!-- ═══════ CLOSING ═══════ --> | |
| <section class="section closing"> | |
| <div class="closing-pre">// ORENTHAL · MATRIX.CORP · SINGAPORE</div> | |
| <h2 class="closing-h"> | |
| The frontier<br><span class="ce">just landed.</span> | |
| </h2> | |
| <p class="closing-sub">Matrix Lattice is shipped — 120B, 430B, 671B, closed source, live now. ECHO is building. The frontier didn't wait. Neither should you.</p> | |
| <div class="closing-acts"> | |
| <button class="btn-primary"><span>Request Early Access</span></button> | |
| <a class="btn-ghost" href="https://huggingface.co/Matrix-Corp" target="_blank">Matrix.Corp on HuggingFace</a> | |
| </div> | |
| </section> | |
| </div><!-- /wrap --> | |
| <footer> | |
| <div> | |
| <div class="foot-name">ORENTHAL</div> | |
| <div class="foot-sub">A MATRIX.CORP COMPANY · SINGAPORE</div> | |
| <div class="foot-copy"> | |
| © 2026 Orenthal / Matrix.Corp<br> | |
| All rights reserved<br> | |
| ECHO and Matrix Lattice are Orenthal products | |
| </div> | |
| </div> | |
| <div class="foot-links"> | |
| <a href="#">ECHO API</a> | |
| <a href="#">Lattice Docs</a> | |
| <a href="#">Pricing</a> | |
| <a href="#">Status</a> | |
| <a href="#">Blog</a> | |
| <a href="#">Careers</a> | |
| <a href="https://huggingface.co/Matrix-Corp">Research</a> | |
| <a href="#">Privacy</a> | |
| </div> | |
| <div> | |
| <a class="foot-hf" href="https://huggingface.co/Matrix-Corp" target="_blank"> | |
| Matrix-Corp on HuggingFace ↗ | |
| </a> | |
| </div> | |
| </footer> | |
| </div><!-- /page --> | |
| <style> | |
| @keyframes floatToken{ | |
| 0%,100%{transform:translateY(0);opacity:.18} | |
| 50%{transform:translateY(-12px);opacity:.4} | |
| } | |
| </style> | |
| <script> | |
| /* ═══════════════════════ | |
| CURSOR | |
| ═══════════════════════ */ | |
| const ret = document.getElementById('reticle'); | |
| const dot = document.getElementById('reticle-dot'); | |
| let mx=0,my=0,rx=0,ry=0; | |
| document.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY}); | |
| (function animCursor(){ | |
| ret.style.left=mx+'px';ret.style.top=my+'px'; | |
| rx+=(mx-rx)*.1;ry+=(my-ry)*.1; | |
| dot.style.left=rx+'px';dot.style.top=ry+'px'; | |
| requestAnimationFrame(animCursor); | |
| })(); | |
| document.querySelectorAll('button,a,.pillar-chip,.feat-row,.phase-row,.lineage-row').forEach(el=>{ | |
| el.addEventListener('mouseenter',()=>{ | |
| ret.style.width='52px';ret.style.height='52px'; | |
| dot.style.background='var(--vexa)'; | |
| dot.style.boxShadow='0 0 10px var(--vexa)'; | |
| }); | |
| el.addEventListener('mouseleave',()=>{ | |
| ret.style.width='36px';ret.style.height='36px'; | |
| dot.style.background='var(--echo)'; | |
| dot.style.boxShadow='0 0 8px var(--echo)'; | |
| }); | |
| }); | |
| /* ═══════════════════════ | |
| WARP CANVAS | |
| ═══════════════════════ */ | |
| const wc=document.getElementById('warp-canvas'); | |
| const wctx=wc.getContext('2d'); | |
| wc.width=window.innerWidth;wc.height=window.innerHeight; | |
| const stars=[]; | |
| for(let i=0;i<400;i++){ | |
| stars.push({ | |
| x:(Math.random()-.5)*wc.width, | |
| y:(Math.random()-.5)*wc.height, | |
| z:Math.random()*wc.width, | |
| pz:0 | |
| }); | |
| } | |
| let warpRunning=true; | |
| function drawWarp(){ | |
| if(!warpRunning)return; | |
| wctx.fillStyle='rgba(2,3,8,.25)'; | |
| wctx.fillRect(0,0,wc.width,wc.height); | |
| const cx=wc.width/2,cy=wc.height/2; | |
| const speed=18; | |
| for(const s of stars){ | |
| s.pz=s.z; | |
| s.z-=speed; | |
| if(s.z<=0){s.z=wc.width;s.x=(Math.random()-.5)*wc.width;s.y=(Math.random()-.5)*wc.height;s.pz=s.z} | |
| const sx=(s.x/s.z)*wc.width+cx; | |
| const sy=(s.y/s.z)*wc.height+cy; | |
| const px=(s.x/s.pz)*wc.width+cx; | |
| const py=(s.y/s.pz)*wc.height+cy; | |
| const sz=Math.max(.3,(1-s.z/wc.width)*3.5); | |
| const op=Math.min(1,(1-s.z/wc.width)*1.8); | |
| const hue=180+Math.random()*60; | |
| wctx.beginPath(); | |
| wctx.moveTo(px,py);wctx.lineTo(sx,sy); | |
| wctx.strokeStyle=`hsla(${hue},90%,75%,${op*0.8})`; | |
| wctx.lineWidth=sz;wctx.stroke(); | |
| } | |
| requestAnimationFrame(drawWarp); | |
| } | |
| drawWarp(); | |
| setTimeout(()=>{ | |
| warpRunning=false; | |
| document.getElementById('warp-overlay').classList.add('gone'); | |
| },4500); | |
| /* ═══════════════════════ | |
| SPACE BACKGROUND | |
| ═══════════════════════ */ | |
| const sc=document.getElementById('space-canvas'); | |
| const sctx=sc.getContext('2d'); | |
| let SW=sc.width=window.innerWidth,SH=sc.height=window.innerHeight; | |
| window.addEventListener('resize',()=>{SW=sc.width=window.innerWidth;SH=sc.height=window.innerHeight}); | |
| const bgStars=[]; | |
| for(let i=0;i<280;i++){ | |
| bgStars.push({ | |
| x:Math.random()*SW,y:Math.random()*SH, | |
| r:Math.random()*1.1+.15, | |
| a:Math.random()*.6+.1, | |
| p:Math.random()*Math.PI*2, | |
| sp:Math.random()*.008+.003, | |
| c:['#a0d4ff','#ffffff','#ffd080','#c0a0ff','#a0ffcc'][Math.floor(Math.random()*5)] | |
| }); | |
| } | |
| // Nebula nodes for connection lines | |
| const nebNodes=[]; | |
| for(let i=0;i<50;i++){ | |
| nebNodes.push({ | |
| x:Math.random()*SW,y:Math.random()*SH, | |
| vx:(Math.random()-.5)*.12,vy:(Math.random()-.5)*.12, | |
| c:['#00d4ff','#a855f7','#fbbf24','#86efac','#f472b6'][Math.floor(Math.random()*5)], | |
| r:Math.random()*.8+.3, | |
| a:Math.random()*.25+.06 | |
| }); | |
| } | |
| let mouseX=-999,mouseY=-999; | |
| document.addEventListener('mousemove',e=>{mouseX=e.clientX;mouseY=e.clientY}); | |
| function hex2(v){return Math.round(Math.min(v,1)*255).toString(16).padStart(2,'0')} | |
| function drawSpace(){ | |
| sctx.clearRect(0,0,SW,SH); | |
| // Stars | |
| bgStars.forEach(s=>{ | |
| s.p+=s.sp; | |
| const a=s.a+Math.sin(s.p)*.06; | |
| sctx.beginPath();sctx.arc(s.x,s.y,s.r,0,Math.PI*2); | |
| sctx.fillStyle=s.c+hex2(a);sctx.fill(); | |
| }); | |
| // Nebula node connections | |
| for(let i=0;i<nebNodes.length;i++){ | |
| const n=nebNodes[i]; | |
| n.x+=n.vx;n.y+=n.vy; | |
| if(n.x<0||n.x>SW)n.vx*=-1; | |
| if(n.y<0||n.y>SH)n.vy*=-1; | |
| for(let j=i+1;j<nebNodes.length;j++){ | |
| const m=nebNodes[j]; | |
| const dx=n.x-m.x,dy=n.y-m.y,d=Math.sqrt(dx*dx+dy*dy); | |
| if(d<160){ | |
| const a=(1-d/160)*.06; | |
| const g=sctx.createLinearGradient(n.x,n.y,m.x,m.y); | |
| g.addColorStop(0,n.c+hex2(a));g.addColorStop(1,m.c+hex2(a)); | |
| sctx.beginPath();sctx.moveTo(n.x,n.y);sctx.lineTo(m.x,m.y); | |
| sctx.strokeStyle=g;sctx.lineWidth=.5;sctx.stroke(); | |
| } | |
| } | |
| // Mouse connection | |
| const mdx=n.x-mouseX,mdy=n.y-mouseY,md=Math.sqrt(mdx*mdx+mdy*mdy); | |
| if(md<200){ | |
| const a=(1-md/200)*.25; | |
| sctx.beginPath();sctx.moveTo(n.x,n.y);sctx.lineTo(mouseX,mouseY); | |
| sctx.strokeStyle=n.c+hex2(a);sctx.lineWidth=.7;sctx.stroke(); | |
| } | |
| // Node dot | |
| const g2=sctx.createRadialGradient(n.x,n.y,0,n.x,n.y,n.r*3); | |
| g2.addColorStop(0,n.c+hex2(n.a));g2.addColorStop(1,'transparent'); | |
| sctx.beginPath();sctx.arc(n.x,n.y,n.r*3,0,Math.PI*2);sctx.fillStyle=g2;sctx.fill(); | |
| } | |
| requestAnimationFrame(drawSpace); | |
| } | |
| drawSpace(); | |
| /* ═══════════════════════ | |
| ECHO WAVEFORM BARS | |
| ═══════════════════════ */ | |
| const barsWrap=document.getElementById('echoBars'); | |
| for(let i=0;i<38;i++){ | |
| const b=document.createElement('div'); | |
| b.className='echo-bar'; | |
| const h=8+Math.random()*44; | |
| b.style.setProperty('--h',h+'px'); | |
| b.style.animationDuration=(0.4+Math.random()*0.8)+'s'; | |
| b.style.animationDelay=(Math.random()*1.2)+'s'; | |
| barsWrap.appendChild(b); | |
| } | |
| /* ═══════════════════════ | |
| SCROLL REVEALS | |
| ═══════════════════════ */ | |
| const obs=new IntersectionObserver(entries=>{ | |
| entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('vis')}); | |
| },{threshold:.06}); | |
| document.querySelectorAll('.section').forEach(s=>obs.observe(s)); | |
| /* ═══════════════════════ | |
| NAV SCROLL | |
| ═══════════════════════ */ | |
| window.addEventListener('scroll',()=>{ | |
| document.getElementById('mainNav').classList.toggle('scrolled',window.scrollY>60); | |
| }); | |
| /* ═══════════════════════ | |
| PARALLAX PLANET GLOW | |
| ═══════════════════════ */ | |
| window.addEventListener('scroll',()=>{ | |
| const y=window.scrollY; | |
| document.querySelector('.planet-glow').style.transform= | |
| `translateX(-50%) translateY(${-y*.15}px)`; | |
| document.querySelector('.atmo-glow').style.transform= | |
| `translateX(-50%) translateY(${y*.08}px)`; | |
| }); | |
| </script> | |
| </body> | |
| </html> |