Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Matrix Voxel — Architecture Spec</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Barlow+Condensed:wght@300;400;600;700;900&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #06080a; | |
| --bg2: #090c10; | |
| --panel: #0b1018; | |
| --border: #14202e; | |
| --border2: #1c2d40; | |
| --amber: #f5a623; | |
| --amber2: #ffcc5c; | |
| --amber-dim: rgba(245,166,35,0.08); | |
| --blue: #1e90ff; | |
| --blue-dim: rgba(30,144,255,0.08); | |
| --teal: #00d4aa; | |
| --red: #ff4757; | |
| --green: #2ed573; | |
| --purple: #a855f7; | |
| --text: #8fa8c0; | |
| --text-bright: #c8dce8; | |
| --white: #eaf2f8; | |
| --atlas: #f5a623; | |
| --forge: #ff6b35; | |
| --cast: #00d4aa; | |
| --lens: #7b8fff; | |
| --prime: #a855f7; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--bg); | |
| font-family: 'DM Mono', monospace; | |
| color: var(--text); | |
| overflow-x: hidden; | |
| cursor: crosshair; | |
| } | |
| /* ── Blueprint grid bg ── */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(245,166,35,0.025) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(245,166,35,0.025) 1px, transparent 1px), | |
| linear-gradient(rgba(245,166,35,0.008) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(245,166,35,0.008) 1px, transparent 1px); | |
| background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* ── Scanline overlay ── */ | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0,0,0,0.08) 2px, | |
| rgba(0,0,0,0.08) 4px | |
| ); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .wrap { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0 40px 120px; | |
| } | |
| /* ─────────────── HERO ─────────────── */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: flex-start; | |
| padding: 80px 0 60px; | |
| position: relative; | |
| } | |
| /* Rotating wireframe cube */ | |
| .cube-wrap { | |
| position: absolute; | |
| right: -40px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 520px; | |
| height: 520px; | |
| opacity: 0.18; | |
| } | |
| .cube-svg { | |
| width: 100%; | |
| height: 100%; | |
| animation: rotateCube 20s linear infinite; | |
| transform-origin: center center; | |
| } | |
| @keyframes rotateCube { | |
| 0% { transform: rotateY(0deg) rotateX(15deg); } | |
| 100% { transform: rotateY(360deg) rotateX(15deg); } | |
| } | |
| .cube-svg line { | |
| stroke: var(--amber); | |
| stroke-width: 1; | |
| } | |
| .hero-eyebrow { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 10px; | |
| color: var(--amber); | |
| letter-spacing: 6px; | |
| text-transform: uppercase; | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .hero-eyebrow::before { | |
| content: ''; | |
| display: block; | |
| width: 40px; | |
| height: 1px; | |
| background: var(--amber); | |
| } | |
| .hero-title { | |
| font-family: 'Orbitron', monospace; | |
| font-size: clamp(56px, 8vw, 112px); | |
| font-weight: 900; | |
| line-height: 0.9; | |
| letter-spacing: -2px; | |
| margin-bottom: 8px; | |
| } | |
| .hero-title .matrix { | |
| color: var(--border2); | |
| display: block; | |
| font-size: 0.45em; | |
| letter-spacing: 8px; | |
| font-weight: 400; | |
| margin-bottom: 4px; | |
| } | |
| .hero-title .voxel { | |
| background: linear-gradient(135deg, var(--amber) 0%, var(--amber2) 50%, var(--forge) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| display: block; | |
| filter: drop-shadow(0 0 40px rgba(245,166,35,0.3)); | |
| } | |
| .hero-sub { | |
| font-family: 'Barlow Condensed', sans-serif; | |
| font-size: 16px; | |
| color: var(--text); | |
| letter-spacing: 3px; | |
| margin-bottom: 48px; | |
| font-weight: 300; | |
| text-transform: uppercase; | |
| } | |
| .hero-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 56px; | |
| max-width: 700px; | |
| } | |
| .tag { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 9px; | |
| letter-spacing: 2px; | |
| padding: 5px 14px; | |
| border: 1px solid var(--border2); | |
| color: var(--text); | |
| text-transform: uppercase; | |
| } | |
| .tag.a { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); } | |
| .tag.b { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); } | |
| .tag.g { border-color: var(--green); color: var(--green); background: rgba(46,213,115,0.06); } | |
| .tag.p { border-color: var(--purple); color: var(--purple); background: rgba(168,85,247,0.06); } | |
| /* Scroll indicator */ | |
| .scroll-hint { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 9px; | |
| color: var(--border2); | |
| letter-spacing: 3px; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .scroll-hint::after { | |
| content: '↓'; | |
| font-size: 14px; | |
| animation: bounce 1.5s ease-in-out infinite; | |
| } | |
| @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} } | |
| @keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} } | |
| /* Hero bottom rule */ | |
| .hero-rule { | |
| width: 100%; | |
| height: 1px; | |
| background: linear-gradient(90deg, var(--amber), var(--border), transparent); | |
| margin-top: 60px; | |
| } | |
| /* ─────────────── SECTION SYSTEM ─────────────── */ | |
| .section { | |
| margin-top: 100px; | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.7s ease, transform 0.7s ease; | |
| } | |
| .section.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 20px; | |
| margin-bottom: 36px; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--border); | |
| position: relative; | |
| } | |
| .section-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 80px; | |
| height: 1px; | |
| background: var(--amber); | |
| } | |
| .section-num { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 11px; | |
| color: var(--border2); | |
| letter-spacing: 3px; | |
| } | |
| .section-title { | |
| font-family: 'Barlow Condensed', sans-serif; | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--white); | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| /* ─────────────── MODEL FAMILY TABLE ─────────────── */ | |
| .model-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 2px; | |
| } | |
| .model-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| padding: 0; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.2s, border-color 0.2s; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-4px); | |
| z-index: 2; | |
| } | |
| .model-card-top { | |
| height: 4px; | |
| } | |
| .mc-atlas .model-card-top { background: var(--atlas); } | |
| .mc-forge .model-card-top { background: var(--forge); } | |
| .mc-cast .model-card-top { background: var(--cast); } | |
| .mc-lens .model-card-top { background: var(--lens); } | |
| .mc-prime .model-card-top { background: var(--prime); } | |
| .mc-atlas:hover { border-color: var(--atlas); } | |
| .mc-forge:hover { border-color: var(--forge); } | |
| .mc-cast:hover { border-color: var(--cast); } | |
| .mc-lens:hover { border-color: var(--lens); } | |
| .mc-prime:hover { border-color: var(--prime); } | |
| .model-card-body { padding: 20px; } | |
| .mc-icon { font-size: 28px; margin-bottom: 12px; } | |
| .mc-name { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 13px; | |
| font-weight: 700; | |
| color: var(--white); | |
| margin-bottom: 4px; | |
| letter-spacing: 1px; | |
| } | |
| .mc-atlas .mc-name { color: var(--atlas); } | |
| .mc-forge .mc-name { color: var(--forge); } | |
| .mc-cast .mc-name { color: var(--cast); } | |
| .mc-lens .mc-name { color: var(--lens); } | |
| .mc-prime .mc-name { color: var(--prime); } | |
| .mc-task { | |
| font-size: 10px; | |
| color: var(--text); | |
| line-height: 1.6; | |
| margin-bottom: 14px; | |
| } | |
| .mc-formats { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .mc-fmt { | |
| font-size: 9px; | |
| letter-spacing: 1px; | |
| color: var(--text); | |
| padding: 3px 8px; | |
| background: rgba(255,255,255,0.03); | |
| border-left: 2px solid var(--border2); | |
| } | |
| .mc-atlas .mc-fmt { border-left-color: rgba(245,166,35,0.4); } | |
| .mc-forge .mc-fmt { border-left-color: rgba(255,107,53,0.4); } | |
| .mc-cast .mc-fmt { border-left-color: rgba(0,212,170,0.4); } | |
| .mc-lens .mc-fmt { border-left-color: rgba(123,143,255,0.4); } | |
| .mc-prime .mc-fmt { border-left-color: rgba(168,85,247,0.4); } | |
| .mc-badges { | |
| display: flex; | |
| gap: 5px; | |
| margin-top: 14px; | |
| flex-wrap: wrap; | |
| } | |
| .mc-badge { | |
| font-size: 8px; | |
| letter-spacing: 1px; | |
| padding: 2px 7px; | |
| border: 1px solid; | |
| text-transform: uppercase; | |
| } | |
| .badge-open { border-color: var(--green); color: var(--green); } | |
| .badge-closed { border-color: var(--purple); color: var(--purple); } | |
| .badge-planned { border-color: var(--amber); color: var(--amber); } | |
| /* ─────────────── INPUT MODALITIES ─────────────── */ | |
| .input-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 2px; | |
| } | |
| .input-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| padding: 24px 20px; | |
| position: relative; | |
| transition: border-color 0.2s; | |
| } | |
| .input-card:hover { border-color: var(--amber); } | |
| .input-icon { font-size: 32px; margin-bottom: 14px; } | |
| .input-name { | |
| font-family: 'Barlow Condensed', sans-serif; | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--white); | |
| letter-spacing: 1px; | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .input-enc { | |
| font-size: 9px; | |
| color: var(--amber); | |
| letter-spacing: 1px; | |
| margin-bottom: 10px; | |
| } | |
| .input-desc { | |
| font-size: 10px; | |
| color: var(--text); | |
| line-height: 1.7; | |
| } | |
| /* Arrow between inputs */ | |
| .input-grid-wrap { | |
| position: relative; | |
| } | |
| .fusion-arrow { | |
| text-align: center; | |
| padding: 20px 0; | |
| font-size: 11px; | |
| color: var(--amber); | |
| letter-spacing: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| } | |
| .fusion-arrow::before, | |
| .fusion-arrow::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--amber)); | |
| } | |
| .fusion-arrow::after { | |
| background: linear-gradient(90deg, var(--amber), transparent); | |
| } | |
| .fusion-box { | |
| background: linear-gradient(135deg, rgba(245,166,35,0.1), rgba(255,107,53,0.05)); | |
| border: 1px solid var(--amber); | |
| padding: 20px 28px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .fusion-box::before, | |
| .fusion-box::after { | |
| content: '◆'; | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--amber); | |
| font-size: 10px; | |
| } | |
| .fusion-box::before { left: -6px; } | |
| .fusion-box::after { right: -6px; } | |
| .fusion-label { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 11px; | |
| color: var(--amber); | |
| letter-spacing: 4px; | |
| margin-bottom: 4px; | |
| } | |
| .fusion-desc { font-size: 10px; color: var(--text); letter-spacing: 1px; } | |
| /* ─────────────── ARCHITECTURE ─────────────── */ | |
| .arch-diagram { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 32px; | |
| align-items: start; | |
| } | |
| .arch-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .arch-layer { | |
| padding: 14px 20px; | |
| border: 1px solid var(--border); | |
| background: var(--panel); | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| position: relative; | |
| transition: all 0.15s; | |
| } | |
| .arch-layer:hover { | |
| border-color: var(--amber); | |
| background: rgba(245,166,35,0.04); | |
| padding-left: 28px; | |
| } | |
| .arch-layer-connector { | |
| position: absolute; | |
| left: 50%; | |
| bottom: -2px; | |
| width: 1px; | |
| height: 2px; | |
| background: var(--amber); | |
| z-index: 1; | |
| } | |
| .arch-dot { | |
| width: 8px; | |
| height: 8px; | |
| border: 1px solid; | |
| border-radius: 0; | |
| transform: rotate(45deg); | |
| flex-shrink: 0; | |
| } | |
| .arch-label { | |
| font-size: 11px; | |
| color: var(--text-bright); | |
| letter-spacing: 0.5px; | |
| flex: 1; | |
| } | |
| .arch-sub { | |
| font-size: 9px; | |
| color: var(--text); | |
| margin-top: 2px; | |
| letter-spacing: 0.5px; | |
| } | |
| .arch-param { | |
| font-size: 9px; | |
| color: var(--amber); | |
| letter-spacing: 1px; | |
| flex-shrink: 0; | |
| } | |
| .arch-layer.backbone { border-color: var(--amber); } | |
| .arch-layer.backbone .arch-dot { border-color: var(--amber); background: rgba(245,166,35,0.3); } | |
| .arch-layer.decoder { } | |
| .arch-layer.decoder .arch-dot { border-color: var(--blue); } | |
| .arch-layer.input .arch-dot { border-color: var(--teal); } | |
| .arch-layer.fuse .arch-dot { border-color: var(--amber2); background: rgba(255,204,92,0.2); } | |
| .arch-aside { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .arch-stat-box { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| padding: 20px; | |
| } | |
| .asb-label { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 9px; | |
| color: var(--amber); | |
| letter-spacing: 3px; | |
| margin-bottom: 12px; | |
| } | |
| .asb-row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 7px 0; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 10px; | |
| } | |
| .asb-row:last-child { border-bottom: none; } | |
| .asb-k { color: var(--text); } | |
| .asb-v { color: var(--white); font-weight: 500; } | |
| .asb-v.amber { color: var(--amber); } | |
| .asb-v.green { color: var(--green); } | |
| /* ─────────────── DECODER HEADS ─────────────── */ | |
| .decoder-tabs { | |
| display: flex; | |
| gap: 2px; | |
| margin-bottom: 2px; | |
| } | |
| .dtab { | |
| padding: 10px 24px; | |
| font-family: 'DM Mono', monospace; | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| cursor: pointer; | |
| border: 1px solid var(--border); | |
| background: var(--panel); | |
| color: var(--text); | |
| transition: all 0.15s; | |
| text-transform: uppercase; | |
| } | |
| .dtab:hover { color: var(--white); } | |
| .dtab.active-atlas { border-color: var(--atlas); color: var(--atlas); background: rgba(245,166,35,0.06); } | |
| .dtab.active-forge { border-color: var(--forge); color: var(--forge); background: rgba(255,107,53,0.06); } | |
| .dtab.active-cast { border-color: var(--cast); color: var(--cast); background: rgba(0,212,170,0.06); } | |
| .dtab.active-lens { border-color: var(--lens); color: var(--lens); background: rgba(123,143,255,0.06); } | |
| .decoder-panel { | |
| display: none; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| padding: 32px; | |
| } | |
| .decoder-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } | |
| .dp-title { | |
| font-family: 'Barlow Condensed', sans-serif; | |
| font-size: 26px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| margin-bottom: 8px; | |
| } | |
| .dp-title.atlas { color: var(--atlas); } | |
| .dp-title.forge { color: var(--forge); } | |
| .dp-title.cast { color: var(--cast); } | |
| .dp-title.lens { color: var(--lens); } | |
| .dp-task { | |
| font-size: 11px; | |
| color: var(--text); | |
| line-height: 1.7; | |
| margin-bottom: 20px; | |
| } | |
| .dp-outputs { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-bottom: 24px; | |
| } | |
| .dp-fmt { | |
| font-size: 9px; | |
| letter-spacing: 2px; | |
| padding: 4px 12px; | |
| border: 1px solid var(--border2); | |
| color: var(--text); | |
| text-transform: uppercase; | |
| } | |
| .dp-modules { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .dp-module { | |
| padding: 10px 14px; | |
| border-left: 2px solid var(--border2); | |
| background: rgba(255,255,255,0.02); | |
| } | |
| .dp-mod-name { font-size: 10px; color: var(--text-bright); margin-bottom: 3px; letter-spacing: 0.5px; } | |
| .dp-mod-desc { font-size: 9px; color: var(--text); line-height: 1.6; } | |
| .dp-stats { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .dp-stat { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 14px; | |
| background: rgba(255,255,255,0.02); | |
| border: 1px solid var(--border); | |
| font-size: 10px; | |
| } | |
| .dp-stat-k { color: var(--text); } | |
| .dp-stat-v { color: var(--white); font-family: 'Orbitron', monospace; font-size: 9px; } | |
| /* Atlas border color */ | |
| .decoder-panel[data-model="atlas"] { border-top: 2px solid var(--atlas); } | |
| .decoder-panel[data-model="forge"] { border-top: 2px solid var(--forge); } | |
| .decoder-panel[data-model="cast"] { border-top: 2px solid var(--cast); } | |
| .decoder-panel[data-model="lens"] { border-top: 2px solid var(--lens); } | |
| /* ─────────────── SHARED MODULES ─────────────── */ | |
| .modules-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 2px; | |
| } | |
| .mod-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| padding: 20px 16px; | |
| position: relative; | |
| transition: all 0.15s; | |
| } | |
| .mod-card:hover { | |
| border-color: var(--amber); | |
| background: var(--amber-dim); | |
| } | |
| .mod-num { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 20px; | |
| font-weight: 900; | |
| color: var(--border2); | |
| line-height: 1; | |
| margin-bottom: 10px; | |
| } | |
| .mod-card:hover .mod-num { color: var(--amber); } | |
| .mod-name { | |
| font-size: 10px; | |
| color: var(--text-bright); | |
| letter-spacing: 0.5px; | |
| margin-bottom: 8px; | |
| line-height: 1.4; | |
| font-weight: 500; | |
| } | |
| .mod-desc { | |
| font-size: 9px; | |
| color: var(--text); | |
| line-height: 1.7; | |
| } | |
| /* ─────────────── VRAM TABLE ─────────────── */ | |
| .vram-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 2px; | |
| } | |
| .vram-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| padding: 24px 20px; | |
| } | |
| .vc-name { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| margin-bottom: 16px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .mc-atlas .vc-name { color: var(--atlas); } | |
| .mc-forge .vc-name { color: var(--forge); } | |
| .mc-cast .vc-name { color: var(--cast); } | |
| .mc-lens .vc-name { color: var(--lens); } | |
| .mc-prime .vc-name { color: var(--prime); } | |
| .vc-row { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 10px; | |
| padding: 6px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .vc-row:last-child { border-bottom: none; } | |
| .vc-k { color: var(--text); } | |
| .vc-v { color: var(--white); font-weight: 500; } | |
| .vc-v.green { color: var(--green); } | |
| /* ─────────────── TRAINING ─────────────── */ | |
| .training-phases { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 2px; | |
| position: relative; | |
| } | |
| .training-phases::before { | |
| content: ''; | |
| position: absolute; | |
| top: 40px; | |
| left: 12%; | |
| right: 12%; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--amber), var(--amber), var(--amber), transparent); | |
| z-index: 0; | |
| } | |
| .phase-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| padding: 28px 20px; | |
| position: relative; | |
| z-index: 1; | |
| transition: all 0.15s; | |
| } | |
| .phase-card:hover { | |
| border-color: var(--amber); | |
| transform: translateY(-3px); | |
| } | |
| .phase-num { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 36px; | |
| font-weight: 900; | |
| color: var(--border2); | |
| line-height: 1; | |
| margin-bottom: 12px; | |
| transition: color 0.15s; | |
| } | |
| .phase-card:hover .phase-num { color: var(--amber); } | |
| .phase-title { | |
| font-family: 'Barlow Condensed', sans-serif; | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--white); | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| margin-bottom: 10px; | |
| } | |
| .phase-steps { | |
| font-size: 10px; | |
| color: var(--text); | |
| line-height: 1.8; | |
| } | |
| .phase-steps li { | |
| list-style: none; | |
| padding-left: 14px; | |
| position: relative; | |
| margin-bottom: 4px; | |
| } | |
| .phase-steps li::before { | |
| content: '—'; | |
| position: absolute; | |
| left: 0; | |
| color: var(--amber); | |
| font-size: 8px; | |
| } | |
| /* ─────────────── PRIME ─────────────── */ | |
| .prime-panel { | |
| background: var(--panel); | |
| border: 1px solid var(--purple); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .prime-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--prime), var(--blue), var(--prime)); | |
| background-size: 200% 100%; | |
| animation: shimmer 3s linear infinite; | |
| } | |
| @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } | |
| .prime-inner { padding: 40px; } | |
| .prime-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| margin-bottom: 32px; | |
| } | |
| .prime-title { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 36px; | |
| font-weight: 900; | |
| color: var(--prime); | |
| filter: drop-shadow(0 0 20px rgba(168,85,247,0.4)); | |
| letter-spacing: 2px; | |
| } | |
| .prime-subtitle { font-size: 11px; color: var(--text); margin-top: 6px; letter-spacing: 2px; } | |
| .prime-badges { display: flex; gap: 8px; flex-direction: column; align-items: flex-end; } | |
| .prime-badge { | |
| font-size: 9px; | |
| letter-spacing: 2px; | |
| padding: 4px 14px; | |
| border: 1px solid; | |
| text-transform: uppercase; | |
| } | |
| .pb-closed { border-color: var(--purple); color: var(--purple); background: rgba(168,85,247,0.08); } | |
| .pb-api { border-color: var(--blue); color: var(--blue); background: rgba(30,144,255,0.08); } | |
| .prime-modules { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2px; | |
| margin-bottom: 32px; | |
| } | |
| .pm-card { | |
| background: rgba(168,85,247,0.04); | |
| border: 1px solid rgba(168,85,247,0.2); | |
| padding: 16px; | |
| transition: all 0.15s; | |
| } | |
| .pm-card:hover { | |
| background: rgba(168,85,247,0.08); | |
| border-color: var(--purple); | |
| } | |
| .pm-name { font-size: 10px; color: var(--prime); margin-bottom: 5px; letter-spacing: 0.5px; } | |
| .pm-desc { font-size: 9px; color: var(--text); line-height: 1.6; } | |
| .prime-api { | |
| background: #020608; | |
| border: 1px solid var(--border); | |
| padding: 24px 28px; | |
| font-family: 'DM Mono', monospace; | |
| font-size: 11px; | |
| line-height: 2; | |
| overflow-x: auto; | |
| } | |
| .kw { color: var(--prime); } | |
| .str { color: #86efac; } | |
| .key { color: var(--amber); } | |
| .cm { color: var(--border2); } | |
| .num { color: var(--lens); } | |
| /* ─────────────── TRAINING DATA ─────────────── */ | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 11px; | |
| } | |
| .data-table th { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 9px; | |
| letter-spacing: 3px; | |
| color: var(--amber); | |
| text-transform: uppercase; | |
| padding: 10px 16px; | |
| border-bottom: 1px solid var(--amber); | |
| text-align: left; | |
| background: rgba(245,166,35,0.04); | |
| } | |
| .data-table td { | |
| padding: 10px 16px; | |
| border-bottom: 1px solid var(--border); | |
| color: var(--text); | |
| vertical-align: top; | |
| } | |
| .data-table tr:hover td { background: rgba(255,255,255,0.02); color: var(--text-bright); } | |
| .td-dataset { color: var(--white); font-weight: 500; } | |
| .td-size { color: var(--amber); font-family: 'Orbitron', monospace; font-size: 9px; } | |
| .td-used { display: flex; gap: 4px; flex-wrap: wrap; } | |
| .td-chip { | |
| font-size: 8px; | |
| letter-spacing: 1px; | |
| padding: 2px 7px; | |
| border: 1px solid var(--border2); | |
| color: var(--text); | |
| } | |
| .chip-atlas { border-color: rgba(245,166,35,0.4); color: var(--atlas); } | |
| .chip-forge { border-color: rgba(255,107,53,0.4); color: var(--forge); } | |
| .chip-cast { border-color: rgba(0,212,170,0.4); color: var(--cast); } | |
| .chip-lens { border-color: rgba(123,143,255,0.4); color: var(--lens); } | |
| .chip-prime { border-color: rgba(168,85,247,0.4); color: var(--prime); } | |
| /* ─────────────── FOOTER ─────────────── */ | |
| .footer { | |
| margin-top: 100px; | |
| padding: 32px 0; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: gap; | |
| gap: 16px; | |
| } | |
| .footer-left { | |
| font-size: 9px; | |
| color: var(--border2); | |
| letter-spacing: 3px; | |
| line-height: 1.8; | |
| } | |
| .footer-models { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .fm-dot { | |
| font-size: 9px; | |
| letter-spacing: 2px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .fm-dot::before { content: '◆'; font-size: 7px; } | |
| .fm-atlas::before { color: var(--atlas); } | |
| .fm-forge::before { color: var(--forge); } | |
| .fm-cast::before { color: var(--cast); } | |
| .fm-lens::before { color: var(--lens); } | |
| .fm-prime::before { color: var(--prime); } | |
| /* ─────────────── SCROLLBAR ─────────────── */ | |
| ::-webkit-scrollbar { width: 4px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--border2); } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--amber); } | |
| /* ─────────────── RESPONSIVE ─────────────── */ | |
| @media (max-width: 1100px) { | |
| .model-grid { grid-template-columns: repeat(3, 1fr); } | |
| .vram-grid { grid-template-columns: repeat(3, 1fr); } | |
| .arch-diagram { grid-template-columns: 1fr; } | |
| .prime-modules { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 800px) { | |
| .wrap { padding: 0 20px 80px; } | |
| .model-grid { grid-template-columns: 1fr 1fr; } | |
| .input-grid { grid-template-columns: 1fr 1fr; } | |
| .modules-grid { grid-template-columns: 1fr 1fr; } | |
| .training-phases { grid-template-columns: 1fr 1fr; } | |
| .training-phases::before { display: none; } | |
| .decoder-panel.active { grid-template-columns: 1fr; } | |
| .decoder-tabs { flex-wrap: wrap; } | |
| .prime-modules { grid-template-columns: 1fr; } | |
| .cube-wrap { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <!-- ══════ HERO ══════ --> | |
| <div class="hero"> | |
| <!-- Wireframe cube SVG (CSS 3D simulated) --> | |
| <div class="cube-wrap"> | |
| <svg class="cube-svg" viewBox="0 0 520 520" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Outer cube --> | |
| <line x1="130" y1="130" x2="390" y2="130"/> | |
| <line x1="390" y1="130" x2="390" y2="390"/> | |
| <line x1="390" y1="390" x2="130" y2="390"/> | |
| <line x1="130" y1="390" x2="130" y2="130"/> | |
| <!-- Inner cube (depth illusion) --> | |
| <line x1="180" y1="180" x2="340" y2="180"/> | |
| <line x1="340" y1="180" x2="340" y2="340"/> | |
| <line x1="340" y1="340" x2="180" y2="340"/> | |
| <line x1="180" y1="340" x2="180" y2="180"/> | |
| <!-- Connectors --> | |
| <line x1="130" y1="130" x2="180" y2="180" stroke-dasharray="4 4"/> | |
| <line x1="390" y1="130" x2="340" y2="180" stroke-dasharray="4 4"/> | |
| <line x1="390" y1="390" x2="340" y2="340" stroke-dasharray="4 4"/> | |
| <line x1="130" y1="390" x2="180" y2="340" stroke-dasharray="4 4"/> | |
| <!-- Diagonals --> | |
| <line x1="130" y1="130" x2="390" y2="390" stroke-opacity="0.15"/> | |
| <line x1="390" y1="130" x2="130" y2="390" stroke-opacity="0.15"/> | |
| <!-- Cross hairs --> | |
| <line x1="260" y1="80" x2="260" y2="440" stroke-opacity="0.1" stroke-dasharray="2 6"/> | |
| <line x1="80" y1="260" x2="440" y2="260" stroke-opacity="0.1" stroke-dasharray="2 6"/> | |
| <!-- Corner dots --> | |
| <circle cx="130" cy="130" r="4" fill="#f5a623"/> | |
| <circle cx="390" cy="130" r="4" fill="#f5a623"/> | |
| <circle cx="390" cy="390" r="4" fill="#f5a623"/> | |
| <circle cx="130" cy="390" r="4" fill="#f5a623"/> | |
| <circle cx="180" cy="180" r="3" fill="#f5a623" fill-opacity="0.5"/> | |
| <circle cx="340" cy="180" r="3" fill="#f5a623" fill-opacity="0.5"/> | |
| <circle cx="340" cy="340" r="3" fill="#f5a623" fill-opacity="0.5"/> | |
| <circle cx="180" cy="340" r="3" fill="#f5a623" fill-opacity="0.5"/> | |
| <!-- Center --> | |
| <circle cx="260" cy="260" r="6" fill="none" stroke="#f5a623" stroke-opacity="0.6"/> | |
| <circle cx="260" cy="260" r="2" fill="#f5a623"/> | |
| <!-- Measurement lines --> | |
| <line x1="80" y1="130" x2="110" y2="130" stroke-opacity="0.3"/> | |
| <line x1="80" y1="390" x2="110" y2="390" stroke-opacity="0.3"/> | |
| <line x1="80" y1="130" x2="80" y2="390" stroke-opacity="0.3"/> | |
| <line x1="130" y1="440" x2="130" y2="410" stroke-opacity="0.3"/> | |
| <line x1="390" y1="440" x2="390" y2="410" stroke-opacity="0.3"/> | |
| <line x1="130" y1="440" x2="390" y2="440" stroke-opacity="0.3"/> | |
| </svg> | |
| </div> | |
| <div class="hero-eyebrow">MATRIX.CORP — 3D GENERATION SERIES</div> | |
| <h1 class="hero-title"> | |
| <span class="matrix">MATRIX</span> | |
| <span class="voxel">VOXEL</span> | |
| </h1> | |
| <p class="hero-sub">Flow Matching · Multi-Modal Input · Task-Specific Decoders · A100 40GB</p> | |
| <div class="hero-tags"> | |
| <span class="tag a">5 Models</span> | |
| <span class="tag a">Shared Backbone ~2.3B</span> | |
| <span class="tag b">Flow Matching (DiT)</span> | |
| <span class="tag b">Triplane Latent Space</span> | |
| <span class="tag g">4 Open Source</span> | |
| <span class="tag p">1 Closed Source (Prime)</span> | |
| <span class="tag">Text + Image + Video + 3D Input</span> | |
| <span class="tag">OBJ · GLB · STL · NeRF · 3DGS · USD</span> | |
| <span class="tag">A100 40GB Target</span> | |
| </div> | |
| <div class="scroll-hint">SCROLL TO EXPLORE</div> | |
| <div class="hero-rule"></div> | |
| </div> | |
| <!-- ══════ SECTION 1 — MODEL FAMILY ══════ --> | |
| <div class="section" id="s1"> | |
| <div class="section-header"> | |
| <span class="section-num">01 —</span> | |
| <span class="section-title">Model Family</span> | |
| </div> | |
| <div class="model-grid"> | |
| <!-- Atlas --> | |
| <div class="model-card mc-atlas"> | |
| <div class="model-card-top"></div> | |
| <div class="model-card-body"> | |
| <div class="mc-icon">🗺️</div> | |
| <div class="mc-name">Voxel Atlas</div> | |
| <div class="mc-task">World & environment generation. Terrain, buildings, biomes, interiors.</div> | |
| <div class="mc-formats"> | |
| <div class="mc-fmt">.vox — Voxel Grid</div> | |
| <div class="mc-fmt">.obj — Scene</div> | |
| <div class="mc-fmt">.usd — Stage</div> | |
| </div> | |
| <div class="mc-badges"> | |
| <span class="mc-badge badge-open">Open Source</span> | |
| <span class="mc-badge badge-planned">Planned</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Forge --> | |
| <div class="model-card mc-forge"> | |
| <div class="model-card-top"></div> | |
| <div class="model-card-body"> | |
| <div class="mc-icon">⚒️</div> | |
| <div class="mc-name">Voxel Forge</div> | |
| <div class="mc-task">Game-ready mesh & asset generation with PBR textures.</div> | |
| <div class="mc-formats"> | |
| <div class="mc-fmt">.obj / .glb</div> | |
| <div class="mc-fmt">.fbx — Game Engine</div> | |
| <div class="mc-fmt">.usdz — Apple AR</div> | |
| </div> | |
| <div class="mc-badges"> | |
| <span class="mc-badge badge-open">Open Source</span> | |
| <span class="mc-badge badge-planned">Planned</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cast --> | |
| <div class="model-card mc-cast"> | |
| <div class="model-card-top"></div> | |
| <div class="model-card-body"> | |
| <div class="mc-icon">🖨️</div> | |
| <div class="mc-name">Voxel Cast</div> | |
| <div class="mc-task">3D printable generation. Watertight, manifold, structurally valid.</div> | |
| <div class="mc-formats"> | |
| <div class="mc-fmt">.stl — Universal</div> | |
| <div class="mc-fmt">.step — CAD</div> | |
| <div class="mc-fmt">.3mf — Modern</div> | |
| </div> | |
| <div class="mc-badges"> | |
| <span class="mc-badge badge-open">Open Source</span> | |
| <span class="mc-badge badge-planned">Planned</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lens --> | |
| <div class="model-card mc-lens"> | |
| <div class="model-card-top"></div> | |
| <div class="model-card-body"> | |
| <div class="mc-icon">🔭</div> | |
| <div class="mc-name">Voxel Lens</div> | |
| <div class="mc-task">NeRF & Gaussian Splatting. Photorealistic scenes for VR/AR & cinema.</div> | |
| <div class="mc-formats"> | |
| <div class="mc-fmt">.ply — 3DGS</div> | |
| <div class="mc-fmt">NeRF weights</div> | |
| <div class="mc-fmt">.mp4 — Render</div> | |
| </div> | |
| <div class="mc-badges"> | |
| <span class="mc-badge badge-open">Open Source</span> | |
| <span class="mc-badge badge-planned">Planned</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prime --> | |
| <div class="model-card mc-prime"> | |
| <div class="model-card-top"></div> | |
| <div class="model-card-body"> | |
| <div class="mc-icon">⭐</div> | |
| <div class="mc-name">Voxel Prime</div> | |
| <div class="mc-task">All-in-one unified generation. All output types in a single API call.</div> | |
| <div class="mc-formats"> | |
| <div class="mc-fmt">All formats</div> | |
| <div class="mc-fmt">Pipeline mode</div> | |
| <div class="mc-fmt">Style transfer</div> | |
| </div> | |
| <div class="mc-badges"> | |
| <span class="mc-badge badge-closed">Closed Source</span> | |
| <span class="mc-badge badge-planned">Planned</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══════ SECTION 2 — INPUTS ══════ --> | |
| <div class="section" id="s2"> | |
| <div class="section-header"> | |
| <span class="section-num">02 —</span> | |
| <span class="section-title">Input Modalities</span> | |
| </div> | |
| <div class="input-grid"> | |
| <div class="input-card"> | |
| <div class="input-icon">💬</div> | |
| <div class="input-name">Text</div> | |
| <div class="input-enc">CLIP-ViT-L + T5-XXL</div> | |
| <div class="input-desc">Natural language prompt. Primary conditioning signal. Supports detailed descriptions, style directives, material specs.</div> | |
| </div> | |
| <div class="input-card"> | |
| <div class="input-icon">🖼️</div> | |
| <div class="input-name">Image</div> | |
| <div class="input-enc">DINOv2-L + Depth Encoder</div> | |
| <div class="input-desc">Single reference image lifted to 3D. Infers geometry from visual cues, shading, perspective.</div> | |
| </div> | |
| <div class="input-card"> | |
| <div class="input-icon">📷</div> | |
| <div class="input-name">Multi-View</div> | |
| <div class="input-enc">Multi-View Transformer</div> | |
| <div class="input-desc">2–12 images from different angles. Best geometry accuracy. Triangulates structure from multiple perspectives.</div> | |
| </div> | |
| <div class="input-card"> | |
| <div class="input-icon">🎬</div> | |
| <div class="input-name">Video</div> | |
| <div class="input-enc">Video-MAE + Temporal Pool</div> | |
| <div class="input-desc">Extracts frames, infers 3D from camera motion. Enables dynamic / animated 3D scene generation (Lens).</div> | |
| </div> | |
| <div class="input-card"> | |
| <div class="input-icon">🗿</div> | |
| <div class="input-name">3D Model</div> | |
| <div class="input-enc">PointNet++</div> | |
| <div class="input-desc">Existing mesh or point cloud as conditioning. Enables retexturing, restyling, format conversion, remeshing.</div> | |
| </div> | |
| </div> | |
| <div class="fusion-arrow">ALL INPUTS → CROSS-MODAL ATTENTION FUSION → 1024-DIM CONDITIONING VECTOR</div> | |
| </div> | |
| <!-- ══════ SECTION 3 — ARCHITECTURE ══════ --> | |
| <div class="section" id="s3"> | |
| <div class="section-header"> | |
| <span class="section-num">03 —</span> | |
| <span class="section-title">Core Architecture</span> | |
| </div> | |
| <div class="arch-diagram"> | |
| <div class="arch-stack"> | |
| <!-- Input encoders --> | |
| <div class="arch-layer input"> | |
| <div class="arch-dot"></div> | |
| <div><div class="arch-label">Text Encoder (T5-XXL + CLIP-ViT-L)</div><div class="arch-sub">→ 1024-dim text embedding</div></div> | |
| <div class="arch-param">~4.7B</div> | |
| </div> | |
| <div class="arch-layer input"> | |
| <div class="arch-dot"></div> | |
| <div><div class="arch-label">Image / MultiView / Video / 3D Encoders</div><div class="arch-sub">DINOv2 · MultiViewTX · VideoMAE · PointNet++</div></div> | |
| <div class="arch-param">~1.2B</div> | |
| </div> | |
| <!-- Fusion --> | |
| <div class="arch-layer fuse" style="border-color:rgba(255,204,92,0.4); margin-top:2px;"> | |
| <div class="arch-dot"></div> | |
| <div><div class="arch-label">Cross-Modal Conditioning Fusion</div><div class="arch-sub">Fuses all active input modalities → unified conditioning</div></div> | |
| <div class="arch-param">Module 01</div> | |
| </div> | |
| <!-- Backbone --> | |
| <div style="margin-top:2px;"> | |
| <div class="arch-layer backbone"> | |
| <div class="arch-dot"></div> | |
| <div><div class="arch-label">Flow Matching DiT Backbone</div><div class="arch-sub">24 blocks · hidden 1536 · 24 heads · AdaLN-Zero · 3D RoPE</div></div> | |
| <div class="arch-param">~2.3B</div> | |
| </div> | |
| <div class="arch-layer backbone" style="opacity:0.7"> | |
| <div class="arch-dot"></div> | |
| <div><div class="arch-label">Triplane Latent Space</div><div class="arch-sub">3 × 256 × 256 × 32 channels · XY / XZ / YZ planes</div></div> | |
| <div class="arch-param">SHARED</div> | |
| </div> | |
| </div> | |
| <!-- Decoders --> | |
| <div style="margin-top:2px; display:grid; grid-template-columns:1fr 1fr; gap:2px;"> | |
| <div class="arch-layer decoder" style="border-color:rgba(245,166,35,0.3)"> | |
| <div class="arch-dot" style="border-color:var(--atlas)"></div> | |
| <div><div class="arch-label">Atlas Decoder</div><div class="arch-sub">Scene layout + voxelizer</div></div> | |
| </div> | |
| <div class="arch-layer decoder" style="border-color:rgba(255,107,53,0.3)"> | |
| <div class="arch-dot" style="border-color:var(--forge)"></div> | |
| <div><div class="arch-label">Forge Decoder</div><div class="arch-sub">Occupancy + mesh refinement</div></div> | |
| </div> | |
| <div class="arch-layer decoder" style="border-color:rgba(0,212,170,0.3)"> | |
| <div class="arch-dot" style="border-color:var(--cast)"></div> | |
| <div><div class="arch-label">Cast Decoder</div><div class="arch-sub">SDF → watertight mesh</div></div> | |
| </div> | |
| <div class="arch-layer decoder" style="border-color:rgba(123,143,255,0.3)"> | |
| <div class="arch-dot" style="border-color:var(--lens)"></div> | |
| <div><div class="arch-label">Lens Decoder</div><div class="arch-sub">Gaussian param predictor</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats aside --> | |
| <div class="arch-aside"> | |
| <div class="arch-stat-box"> | |
| <div class="asb-label">Flow Matching Config</div> | |
| <div class="asb-row"><span class="asb-k">Method</span><span class="asb-v amber">Optimal Transport FM</span></div> | |
| <div class="asb-row"><span class="asb-k">Inference Steps</span><span class="asb-v">20 – 50 NFE</span></div> | |
| <div class="asb-row"><span class="asb-k">vs DDPM</span><span class="asb-v green">~50× faster sampling</span></div> | |
| <div class="asb-row"><span class="asb-k">CFG Scale</span><span class="asb-v">5.0 – 10.0</span></div> | |
| <div class="asb-row"><span class="asb-k">CFG Dropout</span><span class="asb-v">10% during train</span></div> | |
| <div class="asb-row"><span class="asb-k">Scheduler</span><span class="asb-v">RF (Rectified Flow)</span></div> | |
| </div> | |
| <div class="arch-stat-box"> | |
| <div class="asb-label">Triplane Latent</div> | |
| <div class="asb-row"><span class="asb-k">Planes</span><span class="asb-v">XY · XZ · YZ</span></div> | |
| <div class="asb-row"><span class="asb-k">Resolution</span><span class="asb-v">256 × 256</span></div> | |
| <div class="asb-row"><span class="asb-k">Channels</span><span class="asb-v">32 per plane</span></div> | |
| <div class="asb-row"><span class="asb-k">Total values</span><span class="asb-v">~6M latents</span></div> | |
| <div class="asb-row"><span class="asb-k">Point query</span><span class="asb-v">Project → 3 planes → sum</span></div> | |
| </div> | |
| <div class="arch-stat-box"> | |
| <div class="asb-label">Backbone Stats</div> | |
| <div class="asb-row"><span class="asb-k">Architecture</span><span class="asb-v amber">DiT (Diffusion Transformer)</span></div> | |
| <div class="asb-row"><span class="asb-k">Layers</span><span class="asb-v">24 transformer blocks</span></div> | |
| <div class="asb-row"><span class="asb-k">Hidden dim</span><span class="asb-v">1536</span></div> | |
| <div class="asb-row"><span class="asb-k">Attention heads</span><span class="asb-v">24</span></div> | |
| <div class="asb-row"><span class="asb-k">Conditioning</span><span class="asb-v">AdaLN-Zero</span></div> | |
| <div class="asb-row"><span class="asb-k">Parameters</span><span class="asb-v green">~2.3B</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══════ SECTION 4 — DECODER HEADS ══════ --> | |
| <div class="section" id="s4"> | |
| <div class="section-header"> | |
| <span class="section-num">04 —</span> | |
| <span class="section-title">Task-Specific Decoder Heads</span> | |
| </div> | |
| <div class="decoder-tabs"> | |
| <div class="dtab active-atlas" onclick="showDecoder('atlas', this)">🗺️ Atlas</div> | |
| <div class="dtab" onclick="showDecoder('forge', this)">⚒️ Forge</div> | |
| <div class="dtab" onclick="showDecoder('cast', this)">🖨️ Cast</div> | |
| <div class="dtab" onclick="showDecoder('lens', this)">🔭 Lens</div> | |
| </div> | |
| <!-- Atlas --> | |
| <div class="decoder-panel active" id="dp-atlas" data-model="atlas"> | |
| <div> | |
| <div class="dp-title atlas">Voxel Atlas</div> | |
| <div class="dp-task">World & environment generation. Generates complete 3D scenes — terrain, structures, vegetation, sky. Supports infinite world tiling with seamless chunk stitching and biome-aware generation across 8 biome types.</div> | |
| <div class="dp-outputs"> | |
| <span class="dp-fmt">.vox</span><span class="dp-fmt">.obj scene</span><span class="dp-fmt">.usd stage</span> | |
| </div> | |
| <div class="dp-modules"> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Scene Layout Transformer</div> | |
| <div class="dp-mod-desc">6-layer transformer over 32×32 spatial grid. Divides space into semantic regions: terrain, structures, vegetation, sky, water.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Region-wise NeRF Decoder</div> | |
| <div class="dp-mod-desc">Per-region MLP: 3D coords + triplane → density + RGB + semantic label. Marching cubes extraction per region.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Infinite World Tiling</div> | |
| <div class="dp-mod-desc">Generates seamless adjacent chunks. Tiling latent conditioning ensures consistent biome transitions at borders.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">LOD Generator</div> | |
| <div class="dp-mod-desc">Auto-generates 4 levels of detail per scene object. Compatible with Unity/Unreal LOD systems.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dp-stats"> | |
| <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~400M</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.7B</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~22GB</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Small scene</span><span class="dp-stat-v">~8s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Large chunk (256³)</span><span class="dp-stat-v">~35s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Biome types</span><span class="dp-stat-v">8</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">LOD levels</span><span class="dp-stat-v">4</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Max world resolution</span><span class="dp-stat-v">256×256×128 voxels</span></div> | |
| </div> | |
| </div> | |
| <!-- Forge --> | |
| <div class="decoder-panel" id="dp-forge" data-model="forge"> | |
| <div> | |
| <div class="dp-title forge">Voxel Forge</div> | |
| <div class="dp-task">Game-ready 3D asset generation with clean topology and full PBR texture maps. Supports characters, objects, props, vehicles, and architectural elements. Topology-optimized for animation rigging.</div> | |
| <div class="dp-outputs"> | |
| <span class="dp-fmt">.obj + .mtl</span><span class="dp-fmt">.glb / .gltf</span><span class="dp-fmt">.fbx</span><span class="dp-fmt">.usdz</span> | |
| </div> | |
| <div class="dp-modules"> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Occupancy Network + Marching Cubes</div> | |
| <div class="dp-mod-desc">MLP: 3D point + triplane → occupancy probability. Differentiable marching cubes produces initial raw mesh.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Mesh Refinement GNN</div> | |
| <div class="dp-mod-desc">Graph neural network over mesh vertices/edges. 8 message-passing rounds. Predicts vertex position offsets for clean quad-dominant topology.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">UV Unwrapper + Texture Diffusion</div> | |
| <div class="dp-mod-desc">Learned UV unwrapping (SeamlessUV lineage). 2D flow matching in UV space generates albedo, roughness, metallic, normal maps at 1K–2K resolution.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Topology & Animation Optimizer</div> | |
| <div class="dp-mod-desc">Enforces edge loops for rigging. Optional bilateral symmetry. Scale normalized to real-world meters.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dp-stats"> | |
| <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~350M</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.65B</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~21GB</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Low poly (≤5K tris)</span><span class="dp-stat-v">~6s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Mid poly (≤50K tris)</span><span class="dp-stat-v">~15s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">High poly (≤500K)</span><span class="dp-stat-v">~45s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Texture resolution</span><span class="dp-stat-v">1024 or 2048px</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">LOD levels</span><span class="dp-stat-v">4 (100/50/25/10%)</span></div> | |
| </div> | |
| </div> | |
| <!-- Cast --> | |
| <div class="decoder-panel" id="dp-cast" data-model="cast"> | |
| <div> | |
| <div class="dp-title cast">Voxel Cast</div> | |
| <div class="dp-task">Physically valid 3D printable model generation. Every Cast output is guaranteed watertight, manifold, zero self-intersections, minimum wall thickness enforced. Supports FDM, SLA, and resin printing workflows.</div> | |
| <div class="dp-outputs"> | |
| <span class="dp-fmt">.stl</span><span class="dp-fmt">.obj (watertight)</span><span class="dp-fmt">.step (CAD)</span><span class="dp-fmt">.3mf</span> | |
| </div> | |
| <div class="dp-modules"> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">SDF Decoder → Dual Marching Cubes</div> | |
| <div class="dp-mod-desc">MLP outputs signed distance field. Dual marching cubes guarantees watertight topology — no holes by construction.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Printability Validator (hard constraints)</div> | |
| <div class="dp-mod-desc">Wall thickness ≥ 1.2mm enforced. Overhang > 45° flagged. Manifold checker + auto-repair. All outputs pass validation before delivery.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Hollowing Engine</div> | |
| <div class="dp-mod-desc">Auto-hollows solid objects with configurable wall thickness. Adds drain holes. Reduces material use by up to 80%.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Interlocking Part Splitter</div> | |
| <div class="dp-mod-desc">Splits large objects into printable parts with generated snap-fit joints. Scale validates against Bambu, Prusa, Ender bed sizes.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dp-stats"> | |
| <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~200M</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.5B</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~20GB</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Guaranteed</span><span class="dp-stat-v">Watertight + Manifold</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Min wall thickness</span><span class="dp-stat-v">1.2mm</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Hollowing saving</span><span class="dp-stat-v">up to 80% material</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Supported printers</span><span class="dp-stat-v">Bambu · Prusa · Ender</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Non-manifold edges</span><span class="dp-stat-v">0 (guaranteed)</span></div> | |
| </div> | |
| </div> | |
| <!-- Lens --> | |
| <div class="decoder-panel" id="dp-lens" data-model="lens"> | |
| <div> | |
| <div class="dp-title lens">Voxel Lens</div> | |
| <div class="dp-task">Photorealistic 3D scene generation via Neural Radiance Fields and 3D Gaussian Splatting. Optimized for VR/AR visualization, cinematic rendering, and dynamic animated scenes from video input.</div> | |
| <div class="dp-outputs"> | |
| <span class="dp-fmt">.ply (3DGS)</span><span class="dp-fmt">NeRF weights</span><span class="dp-fmt">.mp4 render</span><span class="dp-fmt">depth maps</span> | |
| </div> | |
| <div class="dp-modules"> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Gaussian Parameter Decoder</div> | |
| <div class="dp-mod-desc">Per-Gaussian: position (3) + rotation (4) + scale (3) + opacity (1) + SH coefficients (48). Targets 500K–3M Gaussians per scene. Adaptive densification + pruning.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">NeRF Branch (Instant-NGP style)</div> | |
| <div class="dp-mod-desc">Hash-grid encoder + tiny MLP. Runs in parallel with 3DGS branch. Used for scenes requiring higher photometric accuracy.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Dynamic Scene Support</div> | |
| <div class="dp-mod-desc">Temporal Gaussian sequences for animated scenes. Accepts video input → extracts motion → generates temporally consistent 3DGS.</div> | |
| </div> | |
| <div class="dp-module"> | |
| <div class="dp-mod-name">Compression Module</div> | |
| <div class="dp-mod-desc">Reduces 3DGS file size by 60–80% with minimal quality loss. Critical for web and mobile delivery of Gaussian scenes.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dp-stats"> | |
| <div class="dp-stat"><span class="dp-stat-k">Decoder params</span><span class="dp-stat-v">~500M</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Total model size</span><span class="dp-stat-v">~2.8B</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">VRAM (BF16)</span><span class="dp-stat-v">~22GB</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Object-centric</span><span class="dp-stat-v">~12s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Indoor scene</span><span class="dp-stat-v">~40s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Outdoor scene</span><span class="dp-stat-v">~90s on A100</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">Max Gaussians</span><span class="dp-stat-v">3M per scene</span></div> | |
| <div class="dp-stat"><span class="dp-stat-k">File compression</span><span class="dp-stat-v">60–80% reduction</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══════ SECTION 5 — SHARED MODULES ══════ --> | |
| <div class="section" id="s5"> | |
| <div class="section-header"> | |
| <span class="section-num">05 —</span> | |
| <span class="section-title">10 Shared Custom Modules</span> | |
| </div> | |
| <div class="modules-grid"> | |
| <div class="mod-card"><div class="mod-num">01</div><div class="mod-name">Cross-Modal Conditioning Fusion</div><div class="mod-desc">CrossModalAttention over all active input types. Unified 1024-dim conditioning vector fed to backbone.</div></div> | |
| <div class="mod-card"><div class="mod-num">02</div><div class="mod-name">3D RoPE Encoder</div><div class="mod-desc">RoPE adapted for triplane 3D spatial positions. Encodes XYZ coordinates with rotary positional embeddings.</div></div> | |
| <div class="mod-card"><div class="mod-num">03</div><div class="mod-name">Geometry Quality Scorer</div><div class="mod-desc">Rates generated geometry [0–1] before output. Flags low-quality generations for re-sampling at higher NFE.</div></div> | |
| <div class="mod-card"><div class="mod-num">04</div><div class="mod-name">Semantic Label Head</div><div class="mod-desc">Per-voxel/vertex semantic class prediction: wall, floor, ceiling, tree, water, metal, glass, fabric, etc.</div></div> | |
| <div class="mod-card"><div class="mod-num">05</div><div class="mod-name">Scale & Unit Manager</div><div class="mod-desc">Enforces consistent real-world scale. All outputs tagged with unit metadata (meters). Validates print scale.</div></div> | |
| <div class="mod-card"><div class="mod-num">06</div><div class="mod-name">Material Property Head</div><div class="mod-desc">Predicts PBR properties: roughness, metallic, IOR, subsurface scattering. Compatible with Blender/UE material graphs.</div></div> | |
| <div class="mod-card"><div class="mod-num">07</div><div class="mod-name">Confidence & Uncertainty Head</div><div class="mod-desc">Per-region generation confidence. Flags uncertain areas in output metadata. Drives re-sampling priority.</div></div> | |
| <div class="mod-card"><div class="mod-num">08</div><div class="mod-name">Prompt Adherence Scorer</div><div class="mod-desc">CLIP-based similarity score: how well the 3D output matches the input text prompt. Exposed in API response.</div></div> | |
| <div class="mod-card"><div class="mod-num">09</div><div class="mod-name">Multi-Resolution Decoder</div><div class="mod-desc">Coarse-to-fine generation: 64³ → 128³ → 256³. Each stage refines the previous. Enables fast previews at 64³.</div></div> | |
| <div class="mod-card"><div class="mod-num">10</div><div class="mod-name">Style Embedding Module</div><div class="mod-desc">Encodes style reference images into conditioning vector. Transfers art style, material aesthetic, and visual language to 3D output.</div></div> | |
| </div> | |
| </div> | |
| <!-- ══════ SECTION 6 — VOXEL PRIME ══════ --> | |
| <div class="section" id="s6"> | |
| <div class="section-header"> | |
| <span class="section-num">06 —</span> | |
| <span class="section-title">Voxel Prime — All-In-One</span> | |
| </div> | |
| <div class="prime-panel"> | |
| <div class="prime-inner"> | |
| <div class="prime-header"> | |
| <div> | |
| <div class="prime-title">VOXEL PRIME</div> | |
| <div class="prime-subtitle">CLOSED SOURCE · API ONLY · ALL DECODER HEADS · 6 EXCLUSIVE MODULES</div> | |
| </div> | |
| <div class="prime-badges"> | |
| <span class="prime-badge pb-closed">🟣 Closed Source</span> | |
| <span class="prime-badge pb-api">API Access Only</span> | |
| </div> | |
| </div> | |
| <div class="prime-modules"> | |
| <div class="pm-card"><div class="pm-name">Cross-Task Consistency</div><div class="pm-desc">Ensures Atlas world + Forge assets + Lens scene all match visually when generated together in one call.</div></div> | |
| <div class="pm-card"><div class="pm-name">Scene Population Engine</div><div class="pm-desc">Generates a world (Atlas) then auto-populates it with fitting assets (Forge). One prompt → full scene.</div></div> | |
| <div class="pm-card"><div class="pm-name">Pipeline Orchestrator</div><div class="pm-desc">Chains Atlas → Forge → Cast → Lens in a single API request. Manages inter-model dependencies automatically.</div></div> | |
| <div class="pm-card"><div class="pm-name">4× Texture Upscaler</div><div class="pm-desc">Photorealistic super-resolution on all generated textures. 512px base → 2048px final via flow matching in UV space.</div></div> | |
| <div class="pm-card"><div class="pm-name">Style Transfer Module</div><div class="pm-desc">Apply artistic styles (Studio Ghibli, cyberpunk, brutalist, etc.) consistently across all output types in one generation.</div></div> | |
| <div class="pm-card"><div class="pm-name">Iterative Refinement</div><div class="pm-desc">Text-guided editing of already-generated 3D content. "Make the roof taller" → re-runs only affected regions.</div></div> | |
| </div> | |
| <div class="prime-api"> | |
| <span class="cm">POST /v1/voxel/generate</span><br> | |
| {<br> | |
| <span class="key">"prompt"</span>: <span class="str">"A medieval castle on a cliff at sunset"</span>,<br> | |
| <span class="key">"output_types"</span>: [<span class="str">"world"</span>, <span class="str">"mesh"</span>, <span class="str">"nerf"</span>],<br> | |
| <span class="key">"inputs"</span>: {<br> | |
| <span class="key">"image"</span>: <span class="str">"base64..."</span>, <span class="cm">// optional reference</span><br> | |
| <span class="key">"video"</span>: <span class="str">"base64..."</span> <span class="cm">// optional for dynamic scenes</span><br> | |
| },<br> | |
| <span class="key">"settings"</span>: {<br> | |
| <span class="key">"quality"</span>: <span class="str">"high"</span>, <span class="cm">// draft | standard | high</span><br> | |
| <span class="key">"style"</span>: <span class="str">"realistic"</span>, <span class="cm">// realistic | stylized | low-poly | ...</span><br> | |
| <span class="key">"scale_meters"</span>: <span class="num">100.0</span>,<br> | |
| <span class="key">"populate_scene"</span>: <span class="kw">true</span> <span class="cm">// Atlas → auto-populate with Forge assets</span><br> | |
| }<br> | |
| } | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ══════ SECTION 7 — TRAINING DATA ══════ --> | |
| <div class="section" id="s7"> | |
| <div class="section-header"> | |
| <span class="section-num">07 —</span> | |
| <span class="section-title">Training Data</span> | |
| </div> | |
| <table class="data-table"> | |
| <thead> | |
| <tr><th>Dataset</th><th>Size</th><th>Content</th><th>Used by</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td class="td-dataset">Objaverse-XL</td><td class="td-size">10M+</td><td>Massive diverse 3D objects</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr> | |
| <tr><td class="td-dataset">Objaverse</td><td class="td-size">800K+</td><td>Diverse annotated 3D assets</td><td class="td-used"><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr> | |
| <tr><td class="td-dataset">ShapeNet</td><td class="td-size">55K</td><td>Common object categories</td><td class="td-used"><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span></td></tr> | |
| <tr><td class="td-dataset">ScanNet / ScanNet++</td><td class="td-size">1.5K scenes</td><td>Indoor 3D scans (RGB-D)</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-lens">Lens</span></td></tr> | |
| <tr><td class="td-dataset">KITTI / nuScenes</td><td class="td-size">40K frames</td><td>Outdoor driving 3D scenes</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-lens">Lens</span></td></tr> | |
| <tr><td class="td-dataset">ABO (Amazon Berkeley)</td><td class="td-size">148K</td><td>Product meshes + materials</td><td class="td-used"><span class="td-chip chip-forge">Forge</span></td></tr> | |
| <tr><td class="td-dataset">Thingiverse</td><td class="td-size">2M+</td><td>3D printable STL models</td><td class="td-used"><span class="td-chip chip-cast">Cast</span></td></tr> | |
| <tr><td class="td-dataset">Polycam Scans</td><td class="td-size">~500K</td><td>Real-world 3DGS / NeRF captures</td><td class="td-used"><span class="td-chip chip-lens">Lens</span></td></tr> | |
| <tr><td class="td-dataset">Synthetic Renders</td><td class="td-size">Generated</td><td>Multi-view renders of Objaverse</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr> | |
| <tr><td class="td-dataset">Text-3D Pairs (synthetic)</td><td class="td-size">Generated</td><td>GPT-4o descriptions of Objaverse</td><td class="td-used"><span class="td-chip chip-atlas">Atlas</span><span class="td-chip chip-forge">Forge</span><span class="td-chip chip-cast">Cast</span><span class="td-chip chip-lens">Lens</span></td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- ══════ SECTION 8 — VRAM ══════ --> | |
| <div class="section" id="s8"> | |
| <div class="section-header"> | |
| <span class="section-num">08 —</span> | |
| <span class="section-title">Model Sizes & VRAM</span> | |
| </div> | |
| <div class="vram-grid"> | |
| <div class="vram-card mc-atlas"> | |
| <div class="vc-name">VOXEL ATLAS</div> | |
| <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div> | |
| <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~400M</span></div> | |
| <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.7B</span></div> | |
| <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~22GB</span></div> | |
| <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div> | |
| </div> | |
| <div class="vram-card mc-forge"> | |
| <div class="vc-name">VOXEL FORGE</div> | |
| <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div> | |
| <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~350M</span></div> | |
| <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.65B</span></div> | |
| <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~21GB</span></div> | |
| <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div> | |
| </div> | |
| <div class="vram-card mc-cast"> | |
| <div class="vc-name">VOXEL CAST</div> | |
| <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div> | |
| <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~200M</span></div> | |
| <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.5B</span></div> | |
| <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~20GB</span></div> | |
| <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~10GB</span></div> | |
| </div> | |
| <div class="vram-card mc-lens"> | |
| <div class="vc-name">VOXEL LENS</div> | |
| <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div> | |
| <div class="vc-row"><span class="vc-k">Decoder</span><span class="vc-v">~500M</span></div> | |
| <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~2.8B</span></div> | |
| <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~22GB</span></div> | |
| <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~11GB</span></div> | |
| </div> | |
| <div class="vram-card mc-prime"> | |
| <div class="vc-name">VOXEL PRIME</div> | |
| <div class="vc-row"><span class="vc-k">Backbone</span><span class="vc-v">2.3B</span></div> | |
| <div class="vc-row"><span class="vc-k">All Decoders</span><span class="vc-v">~1.4B</span></div> | |
| <div class="vc-row"><span class="vc-k">Total</span><span class="vc-v">~3.7B</span></div> | |
| <div class="vc-row"><span class="vc-k">BF16 VRAM</span><span class="vc-v">~30GB</span></div> | |
| <div class="vc-row"><span class="vc-k">INT8 VRAM</span><span class="vc-v green">~15GB</span></div> | |
| </div> | |
| </div> | |
| <div style="margin-top:12px; padding:12px 16px; border:1px solid var(--border); background:var(--panel); font-size:10px; color:var(--text);"> | |
| ✦ All specialist models (Atlas/Forge/Cast/Lens) fit A100 40GB in BF16 comfortably. · INT8 quantization brings all under 15GB — viable on consumer RTX 4090 (24GB). · Voxel Prime requires A100 40GB BF16 or 2× 4090 INT8. | |
| </div> | |
| </div> | |
| <!-- ══════ SECTION 9 — TRAINING ══════ --> | |
| <div class="section" id="s9"> | |
| <div class="section-header"> | |
| <span class="section-num">09 —</span> | |
| <span class="section-title">Training Strategy</span> | |
| </div> | |
| <div class="training-phases"> | |
| <div class="phase-card"> | |
| <div class="phase-num">01</div> | |
| <div class="phase-title">Backbone Pre-Training</div> | |
| <ul class="phase-steps"> | |
| <li>Train shared DiT on Objaverse-XL triplane reconstructions</li> | |
| <li>Text + single image conditioning only</li> | |
| <li>Context: general 3D structure, no task specialization</li> | |
| <li>~100K steps on A100 cluster</li> | |
| </ul> | |
| </div> | |
| <div class="phase-card"> | |
| <div class="phase-num">02</div> | |
| <div class="phase-title">Decoder Head Training</div> | |
| <ul class="phase-steps"> | |
| <li>Freeze backbone, train each head independently</li> | |
| <li>Atlas: ScanNet + synthetic world data</li> | |
| <li>Forge: ShapeNet + Objaverse + textures</li> | |
| <li>Cast: Thingiverse + watertight synthetic meshes</li> | |
| <li>Lens: Polycam + synthetic multi-view renders</li> | |
| <li>~50K steps each (parallel runs)</li> | |
| </ul> | |
| </div> | |
| <div class="phase-card"> | |
| <div class="phase-num">03</div> | |
| <div class="phase-title">Joint Fine-Tuning</div> | |
| <ul class="phase-steps"> | |
| <li>Unfreeze backbone, full end-to-end per model</li> | |
| <li>Add all input modalities (video, multi-view, point cloud)</li> | |
| <li>Multi-resolution curriculum: 64³ → 128³ → 256³</li> | |
| <li>~30K steps each</li> | |
| </ul> | |
| </div> | |
| <div class="phase-card"> | |
| <div class="phase-num">04</div> | |
| <div class="phase-title">Prime Training</div> | |
| <ul class="phase-steps"> | |
| <li>Init from jointly fine-tuned backbone</li> | |
| <li>All 4 decoder heads trained simultaneously</li> | |
| <li>Cross-task consistency losses</li> | |
| <li>Pipeline orchestrator + style transfer modules</li> | |
| <li>~50K steps</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <div class="footer-left"> | |
| MATRIX.CORP — VOXEL SPEC V1.0<br> | |
| 🔴 PLANNED · ARCHITECTURE COMPLETE · COMPUTE TBD | |
| </div> | |
| <div class="footer-models"> | |
| <span class="fm-dot fm-atlas" style="color:var(--atlas)">ATLAS</span> | |
| <span class="fm-dot fm-forge" style="color:var(--forge)">FORGE</span> | |
| <span class="fm-dot fm-cast" style="color:var(--cast)">CAST</span> | |
| <span class="fm-dot fm-lens" style="color:var(--lens)">LENS</span> | |
| <span class="fm-dot fm-prime" style="color:var(--prime)">PRIME</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // ── Decoder tab switching ── | |
| function showDecoder(model, tabEl) { | |
| document.querySelectorAll('.decoder-panel').forEach(p => p.classList.remove('active')); | |
| document.querySelectorAll('.dtab').forEach(t => t.className = 'dtab'); | |
| document.getElementById('dp-' + model).classList.add('active'); | |
| tabEl.classList.add('active-' + model); | |
| } | |
| // ── Scroll-triggered section reveals ── | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(e => { | |
| if (e.isIntersecting) { | |
| e.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { threshold: 0.08 }); | |
| document.querySelectorAll('.section').forEach((s, i) => { | |
| s.style.transitionDelay = '0.05s'; | |
| observer.observe(s); | |
| }); | |
| </script> | |
| </body> | |
| </html> |