Mission-Control / index.html
SolsticeAI's picture
Rebuild Mission Control with Awwwards Linear-tier Double-Bezel & 4D Quaternion Rotor Canvas
fc57476 verified
Raw History Blame Contribute Delete
33.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SolsticeAI // Mission Control & Planetary Haven</title>
<meta name="description" content="Mission Control for SolsticeAI & SolsticeAI Foundry. Open weights, non-Euclidean quaternion architectures, CERN Zenodo community, and Anvil inference engine.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg: #040508;
--surface-outer: rgba(255, 255, 255, 0.025);
--surface-border: rgba(255, 255, 255, 0.07);
--surface-inner: #090b11;
--amber: #f59e0b;
--amber-dim: rgba(245, 158, 11, 0.15);
--indigo: #6366f1;
--indigo-dim: rgba(99, 102, 241, 0.15);
--cyan: #06b6d4;
--cyan-dim: rgba(6, 182, 212, 0.15);
--emerald: #10b981;
--text-main: #f9fafb;
--text-muted: #9ca3af;
--text-dim: #4b5563;
--ease: cubic-bezier(0.32, 0.72, 0, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
color: var(--text-main);
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
min-height: 100vh;
overflow-x: hidden;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
position: relative;
}
/* Fixed Microscopic SVG Film Grain Texture */
.film-grain {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
opacity: 0.035;
pointer-events: none;
z-index: 100;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Cinematic Radial Ambient Lighting */
.ambient-glow-top {
position: fixed;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 500px;
background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.07) 0%, rgba(99, 102, 241, 0.05) 45%, transparent 70%);
pointer-events: none;
filter: blur(80px);
z-index: 0;
}
.ambient-glow-bottom {
position: fixed;
bottom: -150px;
right: 5%;
width: 700px;
height: 450px;
background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.05) 0%, rgba(139, 92, 246, 0.04) 50%, transparent 70%);
pointer-events: none;
filter: blur(80px);
z-index: 0;
}
.container {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
padding: 2.5rem 1.5rem 5rem;
}
/* Floating Island Header Bar */
.island-nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding: 0.5rem 0.75rem 0.5rem 1.25rem;
background: rgba(10, 13, 20, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 9999px;
backdrop-filter: blur(24px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.08);
margin-bottom: 4rem;
}
.nav-left {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.05em;
}
.status-beacon {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.65rem;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.25);
border-radius: 9999px;
color: #34d399;
font-weight: 600;
}
.beacon-dot {
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
box-shadow: 0 0 8px #10b981;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
.nav-meta {
color: var(--text-dim);
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-pill-btn {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-weight: 500;
color: #e5e7eb;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.35rem 0.9rem;
border-radius: 9999px;
text-decoration: none;
transition: all 0.2s var(--ease);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.nav-pill-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Hero Section */
.hero {
margin-bottom: 4rem;
}
.eyebrow-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--amber);
background: var(--amber-dim);
border: 1px solid rgba(245, 158, 11, 0.3);
padding: 0.35rem 0.85rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
}
.hero-h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.02;
color: #ffffff;
margin-bottom: 1.25rem;
max-width: 900px;
}
.hero-h1 span.gradient-gold {
background: linear-gradient(135deg, #f59e0b, #fbbf24 60%, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-p {
font-size: clamp(1.05rem, 2vw, 1.3rem);
color: var(--text-muted);
max-width: 720px;
font-weight: 400;
line-height: 1.55;
margin-bottom: 2rem;
}
.hero-stats-strip {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2.5rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
}
.stat-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.stat-num {
font-size: 1.35rem;
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
}
.stat-label {
font-size: 0.7rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* DOUBLE-BEZEL (DOPPELRAND) HARDWARE ARCHITECTURE */
.double-bezel {
background: var(--surface-outer);
border: 1px solid var(--surface-border);
border-radius: 24px;
padding: 6px;
transition: all 0.35s var(--ease);
position: relative;
}
.double-bezel:hover {
border-color: rgba(245, 158, 11, 0.35);
box-shadow: 0 16px 48px -12px rgba(245, 158, 11, 0.12), 0 0 32px rgba(99, 102, 241, 0.1);
transform: translateY(-2px);
}
.bezel-core {
background: var(--surface-inner);
border-radius: 18px;
padding: 1.75rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.09);
position: relative;
overflow: hidden;
}
/* ASYMMETRICAL BENTO GRID */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.25rem;
margin-bottom: 4rem;
}
.col-span-12 { grid-column: span 12; }
.col-span-8 { grid-column: span 8; }
.col-span-7 { grid-column: span 7; }
.col-span-6 { grid-column: span 6; }
.col-span-5 { grid-column: span 5; }
.col-span-4 { grid-column: span 4; }
/* CARD HEADER & TYPOGRAPHY */
.card-eyebrow {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
}
.badge-pill {
font-size: 0.65rem;
padding: 0.2rem 0.55rem;
border-radius: 9999px;
font-weight: 600;
letter-spacing: 0.05em;
}
.badge-amber { background: var(--amber-dim); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-cyan { background: var(--cyan-dim); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.3); }
.badge-indigo{ background: var(--indigo-dim); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.3); }
.badge-green { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.card-title {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-desc {
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 1.75rem;
}
/* BUTTON-IN-BUTTON NESTED ARCHITECTURE */
.btn-island {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 0.55rem 0.65rem 0.55rem 1.25rem;
border-radius: 9999px;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.25s var(--ease);
width: fit-content;
}
.btn-island:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(245, 158, 11, 0.4);
color: var(--amber);
}
.btn-island:active {
transform: scale(0.98);
}
.nested-icon-circle {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
transition: transform 0.25s var(--ease);
}
.btn-island:hover .nested-icon-circle {
transform: translate(2px, -2px);
background: var(--amber);
color: #000;
border-color: var(--amber);
}
/* QUATERNARYONS 4D ROTOR INTERACTIVE CANVAS WIDGET */
.rotor-widget-container {
position: relative;
background: #06070a;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 1rem;
margin-bottom: 1.5rem;
overflow: hidden;
cursor: grab;
}
.rotor-widget-container:active {
cursor: grabbing;
}
#rotor-canvas {
width: 100%;
height: 210px;
display: block;
}
.rotor-telemetry {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
color: var(--text-dim);
padding-top: 0.65rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rotor-live-val {
color: var(--cyan);
font-weight: 500;
}
/* TERMINAL RUNNER CORE */
.terminal-box {
background: #040507;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
overflow: hidden;
font-family: 'JetBrains Mono', monospace;
margin-bottom: 1.5rem;
}
.terminal-nav {
background: rgba(255, 255, 255, 0.03);
padding: 0.5rem 0.85rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.terminal-tabs {
display: flex;
gap: 0.4rem;
}
.term-tab {
background: transparent;
border: none;
color: var(--text-dim);
font-family: inherit;
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s var(--ease);
}
.term-tab.active {
color: var(--amber);
background: var(--amber-dim);
}
.terminal-code {
padding: 1rem;
font-size: 0.82rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
overflow-x: auto;
}
.term-prompt { color: var(--amber); user-select: none; }
.term-cmd { color: #38bdf8; white-space: nowrap; }
.term-copy-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #e5e7eb;
font-family: inherit;
font-size: 0.7rem;
padding: 0.3rem 0.65rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s var(--ease);
}
.term-copy-btn:hover {
background: rgba(245, 158, 11, 0.2);
border-color: rgba(245, 158, 11, 0.4);
color: #fff;
}
/* FOOTER */
footer {
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding-top: 3rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
color: var(--text-dim);
font-size: 0.82rem;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.footer-brand b {
color: #fff;
}
.footer-links {
display: flex;
gap: 1.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--amber);
}
/* RESPONSIVE OVERRIDES */
@media (max-width: 960px) {
.bento-grid {
grid-template-columns: 1fr;
}
.col-span-12, .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4 {
grid-column: span 1 !important;
}
.island-nav {
border-radius: 18px;
}
}
</style>
</head>
<body>
<div class="film-grain"></div>
<div class="ambient-glow-top"></div>
<div class="ambient-glow-bottom"></div>
<div class="container">
<!-- Island Nav -->
<nav class="island-nav">
<div class="nav-left">
<div class="status-beacon">
<div class="beacon-dot"></div>
<span>HAVEN ACTIVE // 17 MEMBERS</span>
</div>
<span class="nav-meta">ORBITAL MISSION CONTROL</span>
</div>
<div class="nav-actions">
<a href="https://discord.gg/euy9hpu8Fe" target="_blank" rel="noopener noreferrer" class="nav-pill-btn">
<span>Discord</span> ↗
</a>
<a href="https://zenodo.org/communities/solstice-ai/" target="_blank" rel="noopener noreferrer" class="nav-pill-btn">
<span>CERN Zenodo</span> ↗
</a>
</div>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="eyebrow-badge">
<span>⚡ Non-Euclidean Mathematical Architecture</span>
</div>
<h1 class="hero-h1">
THE SOVEREIGN CRUCIBLE.<br>
<span class="gradient-gold">SOLSTICE AI FOUNDRY</span>
</h1>
<p class="hero-p">
We engineer open-weight frontier models, non-Euclidean 4D quaternion attention systems, and sub-millisecond edge quantization. Zero corporate slop. Fully reproducible.
</p>
<div class="hero-stats-strip">
<div class="stat-item">
<span class="stat-num">244,819+</span>
<span class="stat-label">Hugging Face Downloads</span>
</div>
<div class="stat-item">
<span class="stat-num">49</span>
<span class="stat-label">Open Public Models</span>
</div>
<div class="stat-item">
<span class="stat-num">10.5281</span>
<span class="stat-label">CERN Zenodo Verified DOI</span>
</div>
<div class="stat-item">
<span class="stat-num">17</span>
<span class="stat-label">Foundry Researchers</span>
</div>
</div>
</header>
<!-- ASYMMETRICAL BENTO GRID -->
<main class="bento-grid">
<!-- BENTO 1: QuATernaryons 4D Rotor Interactive Laboratory (col-span-8) -->
<section class="double-bezel col-span-8">
<div class="bezel-core">
<div>
<div class="card-eyebrow">
<span>01 // MATHEMATICAL FOUNDATION</span>
<span class="badge-pill badge-amber">CERN • OpenAIRE Indexed</span>
</div>
<h2 class="card-title">QuATernaryons Architecture v0.2.0</h2>
<p class="card-desc">
Non-Euclidean 4D Quaternion Rotor Attention mechanism for long-context LLMs and vision transformers. Replaces Euclidean dot products with hyperspherical rotor manifolds on $S^3$. Drag the 4D hyper-torus below:
</p>
<!-- Interactive 4D Canvas -->
<div class="rotor-widget-container" id="rotor-container" title="Click and drag to rotate the 4D Quaternion Rotor">
<canvas id="rotor-canvas"></canvas>
<div class="rotor-telemetry">
<span>ROTATION TENSOR: <span class="rotor-live-val" id="rotor-tensor">q = [0.7071 + 0.5000i + 0.3536j + 0.3536k]</span></span>
<span>$S^3$ MANIFOLD: ACTIVE</span>
</div>
</div>
</div>
<a href="https://doi.org/10.5281/zenodo.23530592" target="_blank" rel="noopener noreferrer" class="btn-island">
<span>Inspect Paper on CERN Zenodo (DOI: 10.5281/zenodo.23530592)</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</section>
<!-- BENTO 2: Discord Sanctuary (col-span-4) -->
<section class="double-bezel col-span-4">
<div class="bezel-core">
<div>
<div class="card-eyebrow">
<span>02 // COMMUNITY NEXUS</span>
<span class="badge-pill badge-green">Permanent Link</span>
</div>
<h2 class="card-title">Discord Haven</h2>
<p class="card-desc">
Direct researcher comms, model drop alerts, non-Euclidean debates, and late-night shitposting. Join the sanctuary.
</p>
</div>
<a href="https://discord.gg/euy9hpu8Fe" target="_blank" rel="noopener noreferrer" class="btn-island" style="width: 100%;">
<span>Enter Discord Sanctuary</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</section>
<!-- BENTO 3: Project Anvil Inference Engine (col-span-6) -->
<section class="double-bezel col-span-6">
<div class="bezel-core">
<div>
<div class="card-eyebrow">
<span>03 // INFERENCE ENGINE</span>
<span class="badge-pill badge-indigo">Rust / C++ Core</span>
</div>
<h2 class="card-title">Project Anvil Local Runner</h2>
<p class="card-desc">
High-throughput local LLM runner optimized for Apple Silicon Metal, Blackwell NVFP4, and edge deployment without Python overhead.
</p>
<!-- Terminal Box -->
<div class="terminal-box">
<div class="terminal-nav">
<span style="font-size: 0.65rem; color: var(--text-dim);">RAPID CLI</span>
<div class="terminal-tabs">
<button class="term-tab active" onclick="switchTerm('anvil')">Anvil</button>
<button class="term-tab" onclick="switchTerm('hf')">HF CLI</button>
<button class="term-tab" onclick="switchTerm('curl')">Zenodo</button>
</div>
</div>
<div class="terminal-code">
<div>
<span class="term-prompt">$ </span>
<span class="term-cmd" id="terminal-cmd">anvil run hf:Solstice-AI/GLM-5.3-Flash-UNCENSORED-mlx-oQ4e-DFlash2</span>
</div>
<button class="term-copy-btn" id="copy-btn" onclick="copyTermCmd()">Copy</button>
</div>
</div>
</div>
<a href="https://github.com/Solstice-Labs/Anvil" target="_blank" rel="noopener noreferrer" class="btn-island">
<span>View GitHub Repository</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</section>
<!-- BENTO 4: CERN Zenodo Community (col-span-6) -->
<section class="double-bezel col-span-6">
<div class="bezel-core">
<div>
<div class="card-eyebrow">
<span>04 // SCIENTIFIC ARCHIVES</span>
<span class="badge-pill badge-cyan">CERN Verified</span>
</div>
<h2 class="card-title">CERN Zenodo Community</h2>
<p class="card-desc">
Permanent scientific repository holding all peer-reviewed research preprints, cryptographic proofs, benchmark logs, and open dataset distributions.
</p>
</div>
<a href="https://zenodo.org/communities/solstice-ai/" target="_blank" rel="noopener noreferrer" class="btn-island">
<span>Browse Research Community</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</section>
<!-- BENTO 5: Solstice-AI Flagship Models (col-span-4) -->
<section class="double-bezel col-span-4">
<div class="bezel-core">
<div>
<div class="card-eyebrow">
<span>05 // MODEL CATALOG</span>
<span class="badge-pill badge-amber">49 Models</span>
</div>
<h2 class="card-title">Flagship Releases</h2>
<p class="card-desc">
Frontier uncensored models: GLM-5.3-Flash, DeepSeek-V4.1-Protium, and Qwen-3.8-Cold-Fusion in MLX & GGUF.
</p>
</div>
<a href="https://huggingface.co/Solstice-AI" target="_blank" rel="noopener noreferrer" class="btn-island" style="width: 100%;">
<span>Browse 49 Models</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</section>
<!-- BENTO 6: SolsticeAI Foundry Collective (col-span-4) -->
<section class="double-bezel col-span-4">
<div class="bezel-core">
<div>
<div class="card-eyebrow">
<span>06 // COLLABORATIVE ORG</span>
<span class="badge-pill badge-green">17 Members</span>
</div>
<h2 class="card-title">SolsticeAI Foundry</h2>
<p class="card-desc">
Community research namespace for public fine-tunes, open dataset mirrors, quantizations, and collective experiments.
</p>
</div>
<a href="https://huggingface.co/SolsticeAIFoundry" target="_blank" rel="noopener noreferrer" class="btn-island" style="width: 100%;">
<span>Enter Foundry Org</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</section>
<!-- BENTO 7: Official Web Portal (col-span-4) -->
<section class="double-bezel col-span-4">
<div class="bezel-core">
<div>
<div class="card-eyebrow">
<span>07 // DIGITAL HEADQUARTERS</span>
<span class="badge-pill badge-cyan">solstice-ai.co</span>
</div>
<h2 class="card-title">Official Website</h2>
<p class="card-desc">
The flagship homepage, technical roadmap, architectural manifesto, and full research publication listings.
</p>
</div>
<a href="https://solstice-ai.co" target="_blank" rel="noopener noreferrer" class="btn-island" style="width: 100%;">
<span>Launch solstice-ai.co</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</section>
<!-- BENTO 8: Verified Author & Broadcasts (col-span-12) -->
<section class="double-bezel col-span-12">
<div class="bezel-core" style="flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;">
<div>
<div class="card-eyebrow" style="margin-bottom: 0.5rem;">
<span>08 // CRYPTOGRAPHIC RESEARCH IDENTITY</span>
</div>
<h3 style="font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem;">
Shreyan Dushyant Gondaliya • ORCID: 0009-0000-1273-1458
</h3>
<p style="color: var(--text-muted); font-size: 0.88rem;">
Verified author of QuATernaryons (CERN Zenodo) • Founder of Solstice-AI & Project Anvil
</p>
</div>
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
<a href="https://orcid.org/0009-0000-1273-1458" target="_blank" rel="noopener noreferrer" class="btn-island">
<span>ORCID Profile</span>
<div class="nested-icon-circle">↗</div>
</a>
<a href="https://x.com/TheSolsticeAI" target="_blank" rel="noopener noreferrer" class="btn-island">
<span>Follow @TheSolsticeAI on X</span>
<div class="nested-icon-circle">↗</div>
</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="footer-brand">
<b>SOLSTICE AI FOUNDRY // MISSION CONTROL</b>
<span>Decentralized AI Architecture & Open Scientific Exploration.</span>
</div>
<div class="footer-links">
<a href="https://discord.gg/euy9hpu8Fe" target="_blank">Discord</a>
<a href="https://zenodo.org/communities/solstice-ai/" target="_blank">CERN Zenodo</a>
<a href="https://doi.org/10.5281/zenodo.23530592" target="_blank">QuATernaryons</a>
<a href="https://huggingface.co/Solstice-AI" target="_blank">Models</a>
<a href="https://github.com/Solstice-Labs/Anvil" target="_blank">GitHub</a>
</div>
</footer>
</div>
<script>
// -------------------------------------------------------------
// INTERACTIVE 4D QUATERNION ROTOR CANVAS SIMULATOR
// -------------------------------------------------------------
const canvas = document.getElementById('rotor-canvas');
const ctx = canvas.getContext('2d');
let width, height;
function resizeCanvas() {
const rect = canvas.getBoundingClientRect();
width = canvas.width = rect.width * window.devicePixelRatio;
height = canvas.height = rect.height * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 4D Hypercube / Quaternion Rotor Vertices
const vertices4D = [];
for (let x = -1; x <= 1; x += 2) {
for (let y = -1; y <= 1; y += 2) {
for (let z = -1; z <= 1; z += 2) {
for (let w = -1; w <= 1; w += 2) {
vertices4D.push([x * 0.7, y * 0.7, z * 0.7, w * 0.7]);
}
}
}
}
// Edges connecting vertices with distance 2 in 4D
const edges = [];
for (let i = 0; i < vertices4D.length; i++) {
for (let j = i + 1; j < vertices4D.length; j++) {
let diff = 0;
for (let k = 0; k < 4; k++) {
if (vertices4D[i][k] !== vertices4D[j][k]) diff++;
}
if (diff === 1) edges.push([i, j]);
}
}
let angleZW = 0.01;
let angleXY = 0.015;
let rotX = 0.3;
let rotY = 0.4;
let isDragging = false;
let lastMouseX = 0;
let lastMouseY = 0;
const container = document.getElementById('rotor-container');
container.addEventListener('mousedown', (e) => {
isDragging = true;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
window.addEventListener('mouseup', () => { isDragging = false; });
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const dx = e.clientX - lastMouseX;
const dy = e.clientY - lastMouseY;
rotY += dx * 0.008;
rotX += dy * 0.008;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
// Touch support for mobile devices
container.addEventListener('touchstart', (e) => {
isDragging = true;
lastMouseX = e.touches[0].clientX;
lastMouseY = e.touches[0].clientY;
}, { passive: true });
window.addEventListener('touchend', () => { isDragging = false; });
window.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const dx = e.touches[0].clientX - lastMouseX;
const dy = e.touches[0].clientY - lastMouseY;
rotY += dx * 0.008;
rotX += dy * 0.008;
lastMouseX = e.touches[0].clientX;
lastMouseY = e.touches[0].clientY;
}, { passive: true });
function render4D() {
const displayW = width / window.devicePixelRatio;
const displayH = height / window.devicePixelRatio;
ctx.clearRect(0, 0, displayW, displayH);
angleZW += 0.012;
angleXY += 0.008;
// Project vertices
const projected = [];
const cosZW = Math.cos(angleZW), sinZW = Math.sin(angleZW);
const cosXY = Math.cos(angleXY), sinXY = Math.sin(angleXY);
const cosRX = Math.cos(rotX), sinRX = Math.sin(rotX);
const cosRY = Math.cos(rotY), sinRY = Math.sin(rotY);
for (let i = 0; i < vertices4D.length; i++) {
let [x, y, z, w] = vertices4D[i];
// 4D Rotation in ZW plane
let z1 = z * cosZW - w * sinZW;
let w1 = z * sinZW + w * cosZW;
// 4D Rotation in XY plane
let x1 = x * cosXY - y * sinXY;
let y1 = x * sinXY + y * cosXY;
// Perspective projection from 4D to 3D
const distance4D = 2.2;
const wFactor = 1 / (distance4D - w1);
let x3 = x1 * wFactor;
let y3 = y1 * wFactor;
let z3 = z1 * wFactor;
// 3D Rotation by user drag (rotX, rotY)
let yRot = y3 * cosRX - z3 * sinRX;
let zRot = y3 * sinRX + z3 * cosRX;
let xRot = x3 * cosRY + zRot * sinRY;
let zFinal = -x3 * sinRY + zRot * cosRY;
// Perspective projection from 3D to 2D Screen
const distance3D = 3.0;
const scale = 230;
const screenX = displayW / 2 + (xRot / (distance3D + zFinal)) * scale;
const screenY = displayH / 2 + (yRot / (distance3D + zFinal)) * scale;
projected.push({ x: screenX, y: screenY, depth: w1 });
}
// Draw Edges with Hypersphere Glow
for (const [i, j] of edges) {
const p1 = projected[i];
const p2 = projected[j];
const alpha = Math.min(1, Math.max(0.15, (p1.depth + p2.depth + 1.4) * 0.45));
ctx.strokeStyle = `rgba(245, 158, 11, ${alpha * 0.75})`;
ctx.lineWidth = alpha > 0.4 ? 1.4 : 0.8;
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
// Draw Vertices (Rotors)
for (const p of projected) {
ctx.fillStyle = '#06b6d4';
ctx.beginPath();
ctx.arc(p.x, p.y, 2.2, 0, Math.PI * 2);
ctx.fill();
}
// Live Telemetry Update
const q0 = Math.cos(angleZW / 2).toFixed(4);
const q1 = (Math.sin(angleZW / 2) * cosRY).toFixed(4);
const q2 = (Math.sin(angleZW / 2) * sinRY).toFixed(4);
const q3 = Math.sin(angleXY / 2).toFixed(4);
document.getElementById('rotor-tensor').textContent = `q = [${q0} + ${q1}i + ${q2}j + ${q3}k]`;
requestAnimationFrame(render4D);
}
render4D();
// -------------------------------------------------------------
// TERMINAL SNIPPET SWITCHER
// -------------------------------------------------------------
const termSnippets = {
anvil: 'anvil run hf:Solstice-AI/GLM-5.3-Flash-UNCENSORED-mlx-oQ4e-DFlash2',
hf: 'hf download Solstice-AI/GLM-5.3-Flash-UNCENSORED-mlx-oQ4e-DFlash2',
curl: 'curl -s https://zenodo.org/api/records/23530592 | jq .metadata.title'
};
function switchTerm(key) {
document.querySelectorAll('.term-tab').forEach(b => b.classList.remove('active'));
event.target.classList.add('active');
document.getElementById('terminal-cmd').textContent = termSnippets[key];
}
function copyTermCmd() {
const cmd = document.getElementById('terminal-cmd').textContent;
navigator.clipboard.writeText(cmd).then(() => {
const btn = document.getElementById('copy-btn');
btn.textContent = 'COPIED!';
setTimeout(() => { btn.textContent = 'Copy'; }, 1800);
});
}
</script>
</body>
</html>