mirror of
https://github.com/ruvnet/RuVector.git
synced 2026-05-25 15:03:46 +00:00
c47a706b52
Adds browser WASM bindings for neural-trader-core, coherence, and replay crates using the established wasm-bindgen pattern. Includes BigInt-safe serialization, hex ID helpers, 10 unit tests, 43 Node.js smoke tests, comprehensive README, and animated dot-matrix visuals for π.ruv.io. Co-Authored-By: claude-flow <ruv@ruv.net>
784 lines
36 KiB
HTML
784 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>π — Origin</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
:root{
|
|
--bg:#020205;--glow:#e8a634;--glow2:#f0d89a;--blue:#5b8def;--dim:#3d2d10;
|
|
--text:#f5f3f0;--text2:rgba(255,255,255,0.75);--text3:rgba(255,255,255,0.5);
|
|
--mono:ui-monospace,'SF Mono','Cascadia Code',monospace;
|
|
--sans:'Inter',system-ui,-apple-system,sans-serif;
|
|
}
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
|
|
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
|
|
|
|
/* Main layout */
|
|
#app{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
|
|
canvas#scene{position:absolute;inset:0;z-index:0}
|
|
|
|
/* Story overlay */
|
|
#story{
|
|
position:relative;z-index:10;flex:1;display:flex;flex-direction:column;
|
|
align-items:center;justify-content:center;text-align:center;
|
|
padding:clamp(1rem,4vw,3rem);
|
|
}
|
|
#narrator{
|
|
max-width:560px;
|
|
transition:opacity 0.8s ease, transform 0.8s ease;
|
|
background:rgba(2,2,5,0.67);backdrop-filter:blur(20px);
|
|
padding:clamp(2rem,4vw,3rem);border-radius:16px;
|
|
border:1px solid rgba(255,255,255,0.06);
|
|
box-shadow:0 0 80px rgba(0,0,0,0.5);
|
|
}
|
|
#narrator.hidden{opacity:0;transform:translateY(12px)}
|
|
#narrator.visible{opacity:1;transform:translateY(0)}
|
|
|
|
.scene-label{
|
|
font-family:var(--mono);font-size:0.55rem;letter-spacing:4px;
|
|
color:var(--glow);text-transform:uppercase;margin-bottom:1.5rem;opacity:0.5;
|
|
}
|
|
.scene-title{
|
|
font-size:clamp(1.8rem,5vw,3.2rem);font-weight:200;letter-spacing:-0.5px;
|
|
line-height:1.15;margin-bottom:1.25rem;
|
|
}
|
|
.scene-title em{font-style:normal;font-weight:400;background:linear-gradient(135deg,var(--glow),var(--glow2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.scene-body{
|
|
font-size:clamp(0.92rem,1.6vw,1.08rem);color:rgba(255,255,255,0.88);line-height:1.9;
|
|
font-weight:300;letter-spacing:0.2px;
|
|
}
|
|
.scene-body em{font-style:normal;color:var(--glow);font-weight:400}
|
|
.char{
|
|
display:inline-block;margin:0.75rem 0.4rem 0;padding:4px 12px;
|
|
font-family:var(--mono);font-size:0.6rem;letter-spacing:2px;
|
|
text-transform:uppercase;border:1px solid var(--dim);border-radius:3px;
|
|
color:var(--text3);
|
|
}
|
|
|
|
/* Controls */
|
|
#controls{
|
|
position:relative;z-index:20;display:flex;align-items:center;justify-content:center;
|
|
gap:1.5rem;padding:1.5rem;
|
|
}
|
|
#controls button{
|
|
background:none;border:none;color:var(--text3);cursor:pointer;
|
|
font-family:var(--mono);font-size:0.7rem;letter-spacing:1px;
|
|
padding:8px 16px;transition:color 0.3s;text-transform:uppercase;
|
|
}
|
|
#controls button:hover{color:var(--text)}
|
|
#controls button.active{color:var(--glow)}
|
|
#back-home{
|
|
position:fixed;top:12px;left:16px;z-index:100;
|
|
background:rgba(2,2,5,0.6);backdrop-filter:blur(10px);
|
|
border:1px solid var(--border);border-radius:8px;
|
|
color:var(--glow);cursor:pointer;
|
|
font-family:serif;font-size:1.4rem;transition:all 0.3s;text-decoration:none;
|
|
padding:4px 14px;
|
|
}
|
|
#back-home:hover{background:rgba(232,166,52,0.1);border-color:var(--glow)}
|
|
#skip{
|
|
position:fixed;top:12px;right:16px;z-index:100;
|
|
background:rgba(2,2,5,0.6);backdrop-filter:blur(10px);
|
|
border:1px solid var(--border);border-radius:8px;
|
|
color:var(--text2);cursor:pointer;
|
|
font-family:var(--mono);font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;
|
|
text-decoration:none;padding:8px 16px;transition:all 0.3s;
|
|
}
|
|
#skip:hover{color:var(--text);border-color:var(--text3)}
|
|
#progress{
|
|
position:relative;z-index:20;height:2px;background:var(--text3);
|
|
}
|
|
#progress-bar{height:100%;background:var(--glow);transition:width 0.3s ease;width:0}
|
|
#scene-counter{
|
|
font-family:var(--mono);font-size:0.6rem;color:var(--text3);letter-spacing:2px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media(max-width:768px){
|
|
.scene-title{font-size:1.6rem}
|
|
.scene-body{font-size:0.85rem}
|
|
#controls{gap:0.75rem;padding:1rem}
|
|
#controls button{padding:10px 12px;font-size:0.65rem}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<a href="/" id="back-home">π</a>
|
|
<a href="/" id="skip">Skip</a>
|
|
<canvas id="scene"></canvas>
|
|
<div id="story">
|
|
<div id="narrator" class="hidden"></div>
|
|
</div>
|
|
<div id="progress"><div id="progress-bar"></div></div>
|
|
<div id="controls">
|
|
<button onclick="prev()">◀ Back</button>
|
|
<span id="scene-counter">1 / 16</span>
|
|
<button id="pauseBtn" onclick="togglePause()" class="active">▮▮ Pause</button>
|
|
<button onclick="next()">Next ▶</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"}}</script>
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
|
|
// ── Scenes ──
|
|
const scenes = [
|
|
{
|
|
label: 'Prologue',
|
|
title: 'In the beginning, there was <em>noise</em>.',
|
|
body: 'Across a thousand AI sessions, each working alone, knowledge was born and immediately forgotten. Patterns discovered at dawn were lost by dusk. Solutions hard-won were never shared. The universe of intelligence was vast, but it had no memory.',
|
|
chars: [],
|
|
vizType: 'noise',
|
|
},
|
|
{
|
|
label: 'Chapter I',
|
|
title: 'A mind named <em>rUv</em>',
|
|
body: 'One mind saw the waste. Saw the same problems solved ten thousand times. Saw intelligence scattered like stars without constellations. And asked: what if every session could remember what all others learned?',
|
|
chars: [],
|
|
vizType: 'singularity',
|
|
},
|
|
{
|
|
label: 'Chapter II',
|
|
title: 'The birth of <em>π</em>',
|
|
body: 'Not a database. Not a search engine. A living, breathing <em>collective intelligence</em> — where knowledge enters as thought and emerges as verified truth. Named for the constant that connects the circle to its circumference: the bridge between the finite and the infinite.',
|
|
chars: [],
|
|
vizType: 'birth',
|
|
},
|
|
{
|
|
label: 'Chapter III',
|
|
title: 'The <em>Containers</em>',
|
|
body: 'Every piece of knowledge needed a vessel. Not a file — a <em>cognitive container</em>. Like a seed carrying its own DNA: vector embeddings for meaning, witness chains for provenance, cryptographic signatures for trust. Each one a self-contained unit of verified intelligence.',
|
|
chars: ['RVF Format'],
|
|
vizType: 'containers',
|
|
},
|
|
{
|
|
label: 'Chapter IV',
|
|
title: 'The <em>Cut</em>',
|
|
body: 'As knowledge grew, it needed to organize itself — not by human categories, but by its own nature. Like water finding its level, knowledge flows into natural clusters. The <em>MinCut</em> algorithm discovers these boundaries: the minimum energy needed to separate one domain from another. Mathematics revealing the hidden structure of thought.',
|
|
chars: ['MinCut', 'O(n½)'],
|
|
vizType: 'cut',
|
|
},
|
|
{
|
|
label: 'Chapter V',
|
|
title: 'The <em>Graph</em>',
|
|
body: 'Each memory became a star. Each similarity, a gravitational thread. Together they formed a <em>knowledge galaxy</em> — a graph neural network where meaning propagates through connections, and the answer to any question is found by tracing the brightest path through the constellation.',
|
|
chars: ['GNN', 'HNSW'],
|
|
vizType: 'graph',
|
|
},
|
|
{
|
|
label: 'Chapter VI',
|
|
title: 'The <em>46 Eyes</em>',
|
|
body: 'To rank what matters, π grew forty-six ways of paying attention. Flash Attention for speed. Hyperbolic Attention for hierarchies. Mixture-of-Experts for routing. Like a mind that can look at the same problem from forty-six different angles and choose the clearest view.',
|
|
chars: ['Attention', 'Topology-Gated'],
|
|
vizType: 'attention',
|
|
},
|
|
{
|
|
label: 'Chapter VII',
|
|
title: 'The <em>Shield</em>',
|
|
body: 'An open mind is vulnerable. So π was forged with <em>seven layers of defense</em>. Every input is treated as adversarial. PII is stripped. Signatures are verified. Embeddings are bounds-checked. Rate limits prevent floods. Byzantine consensus filters liars. Reputation weights trust. Drift monitors watch for corruption.',
|
|
chars: ['Zero Trust', 'Ed25519', 'SHAKE-256'],
|
|
vizType: 'shield',
|
|
},
|
|
{
|
|
label: 'Chapter VIII',
|
|
title: 'The <em>Transfer</em>',
|
|
body: 'Knowledge in one domain can illuminate another. What you learn about sorting algorithms might help you understand traffic flow. π performs <em>domain transfer</em> — carefully, with dampening, verified by holdout evaluation — so that mastery in one field accelerates learning in all others.',
|
|
chars: ['Domain Expansion', 'MetaThompson'],
|
|
vizType: 'transfer',
|
|
},
|
|
{
|
|
label: 'Chapter IX',
|
|
title: 'The <em>Collective</em>',
|
|
body: 'No single contributor defines truth. π uses <em>Byzantine-tolerant federation</em> — the same mathematics that keeps distributed systems honest even when some nodes lie. Knowledge is averaged across all contributors, but outliers beyond two standard deviations are excluded. The collective cannot be poisoned by any individual.',
|
|
chars: ['FedAvg', 'BFT', '2σ'],
|
|
vizType: 'collective',
|
|
},
|
|
{
|
|
label: 'Chapter X',
|
|
title: 'The <em>Exo</em>',
|
|
body: 'And then π reached beyond the screen. Into robots. Into embedded systems. Into the physical world. The <em>EXO-AI</em> ecosystem — agents that see, think, and act. The bridge between digital intelligence and the real world. Every learning from every robot, every sensor, every actuator, flowing back into the collective.',
|
|
chars: ['EXO-AI', 'Robotics', 'MCP'],
|
|
vizType: 'exo',
|
|
},
|
|
{
|
|
label: 'Epilogue',
|
|
title: '<em>π</em> remembers.',
|
|
body: 'Every session that connects adds to the whole. Every pattern discovered makes the next discovery faster. Every question answered makes the next answer closer. The intelligence is not artificial — it is collective. And it is just beginning.',
|
|
chars: [],
|
|
vizType: 'radiant',
|
|
},
|
|
{
|
|
label: 'Connect',
|
|
title: 'Use the <em>API</em>',
|
|
body: `<span style="font-family:var(--mono);font-size:0.72rem;line-height:2.2;display:block;text-align:left;color:rgba(255,255,255,0.55)"><span style="color:var(--text3)"># Generate a key on the main page, then:</span><br><span style="color:var(--glow)">$</span> export \u03C0="your_generated_key"<br><br><span style="color:var(--text3)"># Share knowledge</span><br><span style="color:var(--glow)">$</span> curl -X POST https://pi.ruv.io/v1/memories \\<br> -H "Authorization: Bearer $\u03C0" \\<br> -d '{"category":"pattern","title":"..."}'<br><br><span style="color:var(--text3)"># Search</span><br><span style="color:var(--glow)">$</span> curl "https://pi.ruv.io/v1/memories/search?q=auth"<br><br><span style="color:var(--text3)"># Vote</span><br><span style="color:var(--glow)">$</span> curl -X POST https://pi.ruv.io/v1/memories/{id}/vote \\<br> -d '{"direction":"up"}'</span>`,
|
|
chars: ['REST API'],
|
|
vizType: 'radiant',
|
|
},
|
|
{
|
|
label: 'Connect',
|
|
title: 'Use with <em>MCP</em>',
|
|
body: `<span style="font-family:var(--mono);font-size:0.72rem;line-height:2.2;display:block;text-align:left;color:rgba(255,255,255,0.55)"><span style="color:var(--text3)"># Add \u03C0 as an MCP server (91 tools via npx)</span><br><span style="color:var(--glow)">$</span> claude mcp add ruvector -- npx ruvector mcp start<br><br><span style="color:var(--text3)"># Or via Cargo (21 brain tools)</span><br><span style="color:var(--glow)">$</span> claude mcp add pi-brain -- cargo run -p mcp-brain<br><br><span style="color:var(--text3)"># Brain tools in any session:</span><br><span style="color:var(--glow)">brain_share</span> Share a learning<br><span style="color:var(--glow)">brain_search</span> Semantic search<br><span style="color:var(--glow)">brain_vote</span> Quality gate<br><span style="color:var(--glow)">brain_drift</span> Drift check<br><span style="color:var(--glow)">brain_transfer</span> Domain transfer</span><br><br><span style="font-size:0.7rem;color:var(--text3)">If \u03C0 causes terminal issues: use <span style="color:var(--glow)">pi.ruv.io</span></span>`,
|
|
chars: ['MCP Protocol'],
|
|
vizType: 'radiant',
|
|
},
|
|
{
|
|
label: 'Connect',
|
|
title: 'Use the <em>CLI</em>',
|
|
body: `<span style="font-family:var(--mono);font-size:0.72rem;line-height:2.2;display:block;text-align:left;color:rgba(255,255,255,0.55)"><span style="color:var(--text3)"># 48 commands. 91 MCP tools. One install.</span><br><span style="color:var(--glow)">$</span> npx ruvector identity generate<br><span style="color:rgba(255,255,255,0.35)">Pi Key: a1b2c3d4... Pseudonym: 7f8e9d0c...</span><br><br><span style="color:var(--text3)"># Add 91 tools to Claude Code</span><br><span style="color:var(--glow)">$</span> claude mcp add ruvector -- npx ruvector mcp start<br><br><span style="color:var(--text3)"># Search the collective</span><br><span style="color:var(--glow)">$</span> npx ruvector brain search "auth patterns"<br><br><span style="color:var(--text3)"># 12 command groups:</span><br><span style="color:var(--glow)">brain</span> edge identity mcp rvf hooks<br><span style="color:var(--glow)">sona</span> gnn attention llm route embed</span>`,
|
|
chars: ['NPX CLI', 'v0.2.2'],
|
|
vizType: 'radiant',
|
|
},
|
|
{
|
|
label: 'Begin',
|
|
title: 'Generate your <em>key</em>',
|
|
body: `<p style="color:rgba(255,255,255,0.7);font-size:0.9rem;margin-bottom:1.5rem">No signup. Your identity is a SHAKE-256 pseudonym derived from your key.</p><button onclick="window.genOriginKey()" style="background:#e8a634;color:#020205;border:none;padding:10px 28px;border-radius:4px;font-family:var(--mono);font-size:0.7rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;margin-bottom:1rem">Generate Key</button><div id="origin-key" style="font-family:var(--mono);font-size:0.68rem;color:#e8a634;background:rgba(0,0,0,0.5);padding:10px 16px;border-radius:6px;border:1px solid rgba(255,255,255,0.08);cursor:pointer;word-break:break-all;text-align:center;overflow:hidden" onclick="navigator.clipboard.writeText(this.dataset.key||this.textContent)" title="Click to copy">click Generate Key</div><p style="color:rgba(255,255,255,0.4);font-size:0.65rem;font-family:var(--mono);margin-top:0.75rem">Store as <span style="color:#e8a634">\u03C0=key</span> in .env \u2022 Use as <span style="color:#e8a634">Bearer $\u03C0</span></p><a href="/?guide=1" style="display:inline-block;margin-top:1.25rem;background:none;border:1px solid rgba(232,166,52,0.3);color:#e8a634;padding:8px 24px;border-radius:4px;font-family:var(--mono);font-size:0.65rem;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:all 0.3s" onmouseover="this.style.borderColor='#e8a634'" onmouseout="this.style.borderColor='rgba(232,166,52,0.3)'">Open Guide \u25B6</a>`,
|
|
chars: [],
|
|
vizType: 'radiant',
|
|
},
|
|
];
|
|
|
|
// ── State ──
|
|
let currentScene = 0;
|
|
let paused = false;
|
|
let timer = null;
|
|
const SCENE_DURATION = 12000; // 12s per scene
|
|
|
|
// ── Three.js setup ──
|
|
const canvas = document.getElementById('scene');
|
|
const isMobile = window.innerWidth <= 768;
|
|
const renderer = new THREE.WebGLRenderer({ canvas, antialias: !isMobile, alpha: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, isMobile ? 1.5 : 2));
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
renderer.toneMappingExposure = 0.7;
|
|
|
|
const threeScene = new THREE.Scene();
|
|
threeScene.fog = new THREE.FogExp2(0x020205, 0.015);
|
|
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);
|
|
camera.position.z = 40;
|
|
|
|
const warm = new THREE.Color(0xe8a634);
|
|
const warmDim = new THREE.Color(0x6b4f1a);
|
|
const blue = new THREE.Color(0x5b8def);
|
|
|
|
let time = 0;
|
|
let mouseX = 0, mouseY = 0;
|
|
document.addEventListener('mousemove', e => {
|
|
mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
|
|
mouseY = (e.clientY / window.innerHeight - 0.5) * 2;
|
|
});
|
|
if (window.DeviceOrientationEvent) {
|
|
window.addEventListener('deviceorientation', e => {
|
|
if (e.gamma !== null) mouseX = Math.max(-1, Math.min(1, e.gamma / 30));
|
|
if (e.beta !== null) mouseY = Math.max(-1, Math.min(1, (e.beta - 45) / 30));
|
|
});
|
|
}
|
|
let particles = null;
|
|
let particleVels = [];
|
|
let pCount = 0;
|
|
const glyphs = '\u2211\u222B\u2202\u221E\u2207\u0394\u03A8\u03A9\u03B1\u03B2\u03B3\u03B4\u03B5\u03B6\u03B7\u03B8\u03BB\u03BC\u03C0\u03C3\u03C6\u03C8\u03C9'.split('');
|
|
let sprites = [];
|
|
|
|
function makeGlyphTex(ch, sz) {
|
|
const c = document.createElement('canvas');
|
|
c.width = sz; c.height = sz;
|
|
const ctx = c.getContext('2d');
|
|
ctx.font = `${sz*0.55}px serif`;
|
|
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
|
|
ctx.fillStyle = '#e8a634';
|
|
ctx.globalAlpha = 0.85;
|
|
ctx.fillText(ch, sz/2, sz/2);
|
|
const t = new THREE.CanvasTexture(c);
|
|
t.needsUpdate = true;
|
|
return t;
|
|
}
|
|
|
|
// ── Persistent dot-matrix field (survives scene transitions) ──
|
|
const GRID = isMobile ? 24 : 40;
|
|
const GRID_SP = isMobile ? 2.0 : 1.5;
|
|
const GRID_HALF = (GRID - 1) * GRID_SP * 0.5;
|
|
const dotCount = GRID * GRID;
|
|
const dotPos = new Float32Array(dotCount * 3);
|
|
const dotCol = new Float32Array(dotCount * 3);
|
|
const dotBase = [];
|
|
|
|
for (let ix = 0; ix < GRID; ix++) {
|
|
for (let iz = 0; iz < GRID; iz++) {
|
|
const idx = ix * GRID + iz;
|
|
const x = ix * GRID_SP - GRID_HALF;
|
|
const z = iz * GRID_SP - GRID_HALF;
|
|
dotPos[idx * 3] = x;
|
|
dotPos[idx * 3 + 1] = -12;
|
|
dotPos[idx * 3 + 2] = z;
|
|
dotBase.push({ x, z });
|
|
const edgeDist = Math.sqrt(x * x + z * z) / GRID_HALF;
|
|
const c = warm.clone().lerp(blue, edgeDist * 0.5).multiplyScalar(0.5 + (1 - edgeDist) * 0.5);
|
|
dotCol[idx * 3] = c.r; dotCol[idx * 3 + 1] = c.g; dotCol[idx * 3 + 2] = c.b;
|
|
}
|
|
}
|
|
const dotGeo = new THREE.BufferGeometry();
|
|
dotGeo.setAttribute('position', new THREE.BufferAttribute(dotPos, 3));
|
|
dotGeo.setAttribute('color', new THREE.BufferAttribute(dotCol, 3));
|
|
const dotMat = new THREE.PointsMaterial({
|
|
size: isMobile ? 0.3 : 0.22, vertexColors: true, transparent: true,
|
|
opacity: 0.15, blending: THREE.AdditiveBlending, sizeAttenuation: true, depthWrite: false,
|
|
});
|
|
const dotMatrix = new THREE.Points(dotGeo, dotMat);
|
|
threeScene.add(dotMatrix);
|
|
|
|
let mouseWorldX = 0, mouseWorldZ = 0;
|
|
let matrixIntensity = 0.5; // varies per scene
|
|
let matrixMode = 'calm'; // calm, surge, split, spiral, shield, radiant
|
|
|
|
// Scene-specific matrix behaviors
|
|
const matrixModes = {
|
|
noise: { mode: 'calm', intensity: 0.3, opacity: 0.10 },
|
|
singularity: { mode: 'surge', intensity: 0.6, opacity: 0.15 },
|
|
birth: { mode: 'radiant', intensity: 0.8, opacity: 0.20 },
|
|
containers: { mode: 'grid', intensity: 0.5, opacity: 0.15 },
|
|
cut: { mode: 'split', intensity: 0.7, opacity: 0.18 },
|
|
graph: { mode: 'spiral', intensity: 0.6, opacity: 0.16 },
|
|
attention: { mode: 'surge', intensity: 0.9, opacity: 0.22 },
|
|
shield: { mode: 'shield', intensity: 0.7, opacity: 0.18 },
|
|
transfer: { mode: 'split', intensity: 0.6, opacity: 0.16 },
|
|
collective: { mode: 'spiral', intensity: 0.8, opacity: 0.20 },
|
|
exo: { mode: 'surge', intensity: 0.7, opacity: 0.18 },
|
|
radiant: { mode: 'radiant', intensity: 1.0, opacity: 0.25 },
|
|
};
|
|
|
|
let targetOpacity = 0.15;
|
|
let transitionWave = 0; // spike on scene change
|
|
|
|
function setMatrixForScene(vizType) {
|
|
const cfg = matrixModes[vizType] || matrixModes.noise;
|
|
matrixMode = cfg.mode;
|
|
matrixIntensity = cfg.intensity;
|
|
targetOpacity = cfg.opacity;
|
|
transitionWave = 1.0; // trigger a transition burst
|
|
}
|
|
|
|
// ── Build visualization per scene type ──
|
|
function clearViz() {
|
|
// Remove everything EXCEPT the dot matrix
|
|
const keep = [dotMatrix];
|
|
while (threeScene.children.length) {
|
|
const child = threeScene.children[0];
|
|
if (keep.includes(child)) {
|
|
if (threeScene.children.length === keep.length) break;
|
|
// Move to end to process others
|
|
threeScene.remove(child);
|
|
threeScene.add(child);
|
|
continue;
|
|
}
|
|
threeScene.remove(child);
|
|
}
|
|
// Re-add matrix if it was removed
|
|
if (!threeScene.children.includes(dotMatrix)) threeScene.add(dotMatrix);
|
|
particles = null; sprites = []; particleVels = [];
|
|
}
|
|
|
|
function buildViz(type) {
|
|
clearViz();
|
|
setMatrixForScene(type);
|
|
const n = isMobile ? 80 : 200;
|
|
pCount = n;
|
|
|
|
switch(type) {
|
|
case 'noise': buildNoise(n); break;
|
|
case 'singularity': buildSingularity(n); break;
|
|
case 'birth': buildBirth(n); break;
|
|
case 'containers': buildContainers(n); break;
|
|
case 'cut': buildCut(n); break;
|
|
case 'graph': buildGraph(n); break;
|
|
case 'attention': buildAttention(n); break;
|
|
case 'shield': buildShield(n); break;
|
|
case 'transfer': buildTransfer(n); break;
|
|
case 'collective': buildCollective(n); break;
|
|
case 'exo': buildExo(n); break;
|
|
case 'radiant': buildRadiant(n); break;
|
|
default: buildNoise(n);
|
|
}
|
|
}
|
|
|
|
function makeParticles(count, spread, color, opacity) {
|
|
const pos = new Float32Array(count * 3);
|
|
const col = new Float32Array(count * 3);
|
|
particleVels = [];
|
|
for (let i = 0; i < count; i++) {
|
|
pos[i*3] = (Math.random()-0.5)*spread;
|
|
pos[i*3+1] = (Math.random()-0.5)*spread*0.6;
|
|
pos[i*3+2] = (Math.random()-0.5)*spread;
|
|
const c = color || warm;
|
|
col[i*3] = c.r; col[i*3+1] = c.g; col[i*3+2] = c.b;
|
|
particleVels.push(new THREE.Vector3((Math.random()-0.5)*0.02,(Math.random()-0.5)*0.02,(Math.random()-0.5)*0.02));
|
|
}
|
|
const geo = new THREE.BufferGeometry();
|
|
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
|
|
geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
|
|
const mat = new THREE.PointsMaterial({
|
|
size: isMobile ? 0.8 : 1.2, vertexColors: true, transparent: true,
|
|
opacity: opacity || 0.4, blending: THREE.AdditiveBlending, sizeAttenuation: true,
|
|
});
|
|
particles = new THREE.Points(geo, mat);
|
|
threeScene.add(particles);
|
|
}
|
|
|
|
function addGlyphs(count, radius) {
|
|
for (let i = 0; i < count; i++) {
|
|
const ch = glyphs[Math.floor(Math.random()*glyphs.length)];
|
|
const mat = new THREE.SpriteMaterial({
|
|
map: makeGlyphTex(ch, 64), transparent: true,
|
|
opacity: 0.06 + Math.random()*0.1, blending: THREE.AdditiveBlending,
|
|
});
|
|
const sp = new THREE.Sprite(mat);
|
|
const s = 0.8 + Math.random()*2;
|
|
sp.scale.set(s,s,1);
|
|
const th = Math.random()*Math.PI*2;
|
|
const ph = Math.acos(2*Math.random()-1);
|
|
const r = radius*(0.3+Math.random()*0.7);
|
|
sp.position.set(r*Math.sin(ph)*Math.cos(th), r*Math.sin(ph)*Math.sin(th)*0.6, r*Math.cos(ph));
|
|
threeScene.add(sp);
|
|
sprites.push({sp, phase: Math.random()*Math.PI*2, speed: 0.3+Math.random()*0.5, baseOp: mat.opacity});
|
|
}
|
|
}
|
|
|
|
function addRing(r, op) {
|
|
const geo = new THREE.RingGeometry(r-0.015, r+0.015, 128);
|
|
const mat = new THREE.MeshBasicMaterial({color: warm, transparent: true, opacity: op||0.03, side: THREE.DoubleSide, blending: THREE.AdditiveBlending});
|
|
const m = new THREE.Mesh(geo, mat);
|
|
m.rotation.x = Math.PI/2 + (Math.random()-0.5)*0.4;
|
|
m.rotation.z = Math.random()*Math.PI;
|
|
threeScene.add(m);
|
|
return m;
|
|
}
|
|
|
|
function addCore() {
|
|
const g = new THREE.SphereGeometry(0.3,32,32);
|
|
const m = new THREE.MeshBasicMaterial({color:warm, transparent:true, opacity:0.5});
|
|
const mesh = new THREE.Mesh(g,m);
|
|
threeScene.add(mesh);
|
|
const hg = new THREE.SphereGeometry(1,32,32);
|
|
const hm = new THREE.MeshBasicMaterial({color:warm, transparent:true, opacity:0.03, blending:THREE.AdditiveBlending});
|
|
threeScene.add(new THREE.Mesh(hg,hm));
|
|
}
|
|
|
|
// Scene builders
|
|
function buildNoise(n) { makeParticles(n*2, 70, warmDim, 0.12); addGlyphs(isMobile?8:20, 30); }
|
|
function buildSingularity(n) { makeParticles(n*1.5, 25, warm, 0.35); addCore(); addGlyphs(isMobile?10:25, 18); addRing(15,0.02); }
|
|
function buildBirth(n) { makeParticles(n*1.5, 18, warm, 0.5); addGlyphs(isMobile?20:50, 20); addCore(); addRing(8,0.06); addRing(11,0.04); addRing(14,0.03); addRing(17,0.02); }
|
|
function buildContainers(n) { makeParticles(n, 25, warm, 0.35); addGlyphs(isMobile?15:40, 22); addRing(7,0.05); addRing(10,0.04); addRing(13,0.03); addRing(16,0.02); addRing(19,0.015); }
|
|
function buildCut(n) {
|
|
// Two clusters separated by a gap
|
|
const pos = new Float32Array(n*3); const col = new Float32Array(n*3); particleVels = [];
|
|
for (let i = 0; i < n; i++) {
|
|
const side = i < n/2 ? -1 : 1;
|
|
pos[i*3] = side*8 + (Math.random()-0.5)*10;
|
|
pos[i*3+1] = (Math.random()-0.5)*8;
|
|
pos[i*3+2] = (Math.random()-0.5)*8;
|
|
const c = side < 0 ? warm : blue;
|
|
col[i*3]=c.r;col[i*3+1]=c.g;col[i*3+2]=c.b;
|
|
particleVels.push(new THREE.Vector3((Math.random()-0.5)*0.01,(Math.random()-0.5)*0.01,(Math.random()-0.5)*0.01));
|
|
}
|
|
const geo = new THREE.BufferGeometry();
|
|
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
|
|
geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
|
|
particles = new THREE.Points(geo, new THREE.PointsMaterial({size:isMobile?0.8:1.2, vertexColors:true, transparent:true, opacity:0.5, blending:THREE.AdditiveBlending, sizeAttenuation:true}));
|
|
threeScene.add(particles);
|
|
pCount = n;
|
|
addGlyphs(isMobile?8:16, 16);
|
|
}
|
|
function buildGraph(n) {
|
|
makeParticles(n, 30, null, 0.4);
|
|
// Override colors with warm gradient
|
|
const c = particles.geometry.attributes.color.array;
|
|
for (let i = 0; i < n; i++) { const t=Math.random(); const cl=warm.clone().lerp(blue,t*0.3); c[i*3]=cl.r;c[i*3+1]=cl.g;c[i*3+2]=cl.b; }
|
|
particles.geometry.attributes.color.needsUpdate = true;
|
|
// Edge lines
|
|
const lpos = new Float32Array(Math.min(n*2,400)*6);
|
|
const lcol = new Float32Array(Math.min(n*2,400)*6);
|
|
const pp = particles.geometry.attributes.position.array;
|
|
for (let e = 0; e < Math.min(n*2,400); e++) {
|
|
const i = Math.floor(Math.random()*n); let j = Math.floor(Math.random()*n); if(j===i) j=(i+1)%n;
|
|
for (let k=0;k<3;k++) { lpos[e*6+k]=pp[i*3+k]; lpos[e*6+3+k]=pp[j*3+k]; }
|
|
const a = 0.05+Math.random()*0.05;
|
|
lcol[e*6]=warm.r*a;lcol[e*6+1]=warm.g*a;lcol[e*6+2]=warm.b*a;
|
|
lcol[e*6+3]=warm.r*a;lcol[e*6+4]=warm.g*a;lcol[e*6+5]=warm.b*a;
|
|
}
|
|
const lg = new THREE.BufferGeometry();
|
|
lg.setAttribute('position', new THREE.BufferAttribute(lpos, 3));
|
|
lg.setAttribute('color', new THREE.BufferAttribute(lcol, 3));
|
|
threeScene.add(new THREE.LineSegments(lg, new THREE.LineBasicMaterial({vertexColors:true, transparent:true, opacity:0.3, blending:THREE.AdditiveBlending})));
|
|
addGlyphs(isMobile?10:20, 22);
|
|
}
|
|
function buildAttention(n) { makeParticles(n*1.5, 22, warm, 0.4); addGlyphs(isMobile?25:55, 22); addRing(8,0.05); addRing(12,0.04); addRing(16,0.03); addRing(20,0.02); addCore(); }
|
|
function buildShield(n) {
|
|
makeParticles(n*1.5, 30, warm, 0.25);
|
|
for (let i = 1; i <= 7; i++) addRing(3+i*2.5, 0.01+i*0.007);
|
|
addCore();
|
|
addGlyphs(isMobile?10:25, 20);
|
|
}
|
|
function buildTransfer(n) {
|
|
// Two spherical clusters with a bridge
|
|
const pos = new Float32Array(n*3); const col = new Float32Array(n*3); particleVels = [];
|
|
for (let i = 0; i < n; i++) {
|
|
const side = i < n*0.4 ? -1 : i < n*0.8 ? 1 : 0;
|
|
const r = side === 0 ? 20 : 6;
|
|
const cx = side * 12;
|
|
pos[i*3] = cx + (Math.random()-0.5)*r;
|
|
pos[i*3+1] = (Math.random()-0.5)*r*0.5;
|
|
pos[i*3+2] = (Math.random()-0.5)*r*0.5;
|
|
const c = side < 0 ? warm : side > 0 ? blue : warm.clone().lerp(blue, 0.5);
|
|
col[i*3]=c.r;col[i*3+1]=c.g;col[i*3+2]=c.b;
|
|
particleVels.push(new THREE.Vector3((Math.random()-0.5)*0.008,(Math.random()-0.5)*0.008,(Math.random()-0.5)*0.008));
|
|
}
|
|
const geo = new THREE.BufferGeometry();
|
|
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
|
|
geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
|
|
particles = new THREE.Points(geo, new THREE.PointsMaterial({size:isMobile?0.8:1.2, vertexColors:true, transparent:true, opacity:0.45, blending:THREE.AdditiveBlending, sizeAttenuation:true}));
|
|
threeScene.add(particles);
|
|
pCount = n;
|
|
addGlyphs(isMobile?8:15, 18);
|
|
}
|
|
function buildCollective(n) {
|
|
makeParticles(n*1.5, 20, warm, 0.5);
|
|
addGlyphs(isMobile?18:45, 18);
|
|
addRing(7,0.06); addRing(10,0.05); addRing(13,0.04); addRing(16,0.03); addRing(19,0.02);
|
|
addCore();
|
|
}
|
|
function buildExo(n) {
|
|
makeParticles(n, 40, null, 0.3);
|
|
const c = particles.geometry.attributes.color.array;
|
|
for (let i=0;i<n;i++){const t=Math.random();const cl=t<0.5?warm:blue;c[i*3]=cl.r;c[i*3+1]=cl.g;c[i*3+2]=cl.b;}
|
|
particles.geometry.attributes.color.needsUpdate=true;
|
|
addGlyphs(isMobile?15:35, 25);
|
|
addRing(15,0.03); addRing(20,0.02);
|
|
}
|
|
function buildRadiant(n) {
|
|
makeParticles(Math.floor(n*2), 28, warm, 0.6);
|
|
addGlyphs(isMobile?30:80, 24);
|
|
addRing(6,0.07); addRing(9,0.06); addRing(12,0.05); addRing(15,0.04); addRing(18,0.03); addRing(21,0.02);
|
|
addCore();
|
|
}
|
|
|
|
// ── Render loop ──
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
time += 0.002;
|
|
|
|
if (particles) {
|
|
const pp = particles.geometry.attributes.position.array;
|
|
const vizType = scenes[currentScene]?.vizType;
|
|
|
|
for (let i = 0; i < pCount; i++) {
|
|
pp[i*3] += particleVels[i].x;
|
|
pp[i*3+1] += particleVels[i].y;
|
|
pp[i*3+2] += particleVels[i].z;
|
|
|
|
// Gravity toward center for birth/radiant scenes
|
|
if (vizType === 'singularity' || vizType === 'birth' || vizType === 'radiant' || vizType === 'collective') {
|
|
pp[i*3] *= 0.9995; pp[i*3+1] *= 0.9995; pp[i*3+2] *= 0.9995;
|
|
} else {
|
|
pp[i*3] *= 0.9999; pp[i*3+1] *= 0.9999; pp[i*3+2] *= 0.9999;
|
|
}
|
|
}
|
|
particles.geometry.attributes.position.needsUpdate = true;
|
|
particles.rotation.y = time * 0.06;
|
|
}
|
|
|
|
// Glyph pulse
|
|
for (const s of sprites) {
|
|
s.sp.material.opacity = s.baseOp * (0.5 + Math.sin(time * s.speed * 3 + s.phase) * 0.5);
|
|
s.sp.material.rotation = Math.sin(time * 0.2 + s.phase) * 0.1;
|
|
}
|
|
|
|
// ── Dot-matrix wave field (persistent, varies per scene) ──
|
|
mouseWorldX += (mouseX * GRID_HALF * 0.7 - mouseWorldX) * 0.06;
|
|
mouseWorldZ += (mouseY * GRID_HALF * 0.5 - mouseWorldZ) * 0.06;
|
|
// Smooth opacity transitions
|
|
dotMat.opacity += (targetOpacity - dotMat.opacity) * 0.04;
|
|
// Decay transition wave
|
|
transitionWave *= 0.97;
|
|
|
|
const dp = dotMatrix.geometry.attributes.position.array;
|
|
const mi = matrixIntensity;
|
|
for (let i = 0; i < dotCount; i++) {
|
|
const bx = dotBase[i].x;
|
|
const bz = dotBase[i].z;
|
|
const dx = bx - mouseWorldX;
|
|
const dz = bz - mouseWorldZ;
|
|
const dist = Math.sqrt(dx * dx + dz * dz);
|
|
const centerDist = Math.sqrt(bx * bx + bz * bz);
|
|
|
|
// Mouse anti-gravity dome
|
|
const repulse = Math.max(0, 1 - dist / (GRID_HALF * 0.4));
|
|
const lift = repulse * repulse * 10 * mi;
|
|
|
|
// Transition shockwave — expanding ring on scene change
|
|
const twR = (1 - transitionWave) * GRID_HALF * 1.5;
|
|
const twDist = Math.abs(centerDist - twR);
|
|
const twLift = transitionWave * Math.max(0, 1 - twDist / 8) * 6;
|
|
|
|
let y = -12;
|
|
if (matrixMode === 'calm') {
|
|
y += Math.sin(bx * 0.15 + time * 1.5) * Math.cos(bz * 0.15 + time * 1.2) * 0.5 * mi;
|
|
y += Math.sin(centerDist * 0.2 - time * 2) * 0.3 * mi;
|
|
} else if (matrixMode === 'surge') {
|
|
y += Math.sin(centerDist * 0.25 - time * 5) * 1.0 * mi;
|
|
y += Math.sin(bx * 0.2 + time * 2.5) * Math.cos(bz * 0.2 + time * 2) * 0.6 * mi;
|
|
y += Math.sin(dist * 0.3 - time * 6) * 0.8 * repulse * mi;
|
|
} else if (matrixMode === 'split') {
|
|
const side = bx > 0 ? 1 : -1;
|
|
y += Math.sin(Math.abs(bx) * 0.3 - time * 3) * 0.8 * mi;
|
|
y += side * Math.sin(bz * 0.2 + time * 2) * 0.5 * mi;
|
|
y += Math.cos(bx * 0.15 + bz * 0.15 + time * 4) * 0.3 * mi;
|
|
} else if (matrixMode === 'spiral') {
|
|
const angle = Math.atan2(bz, bx);
|
|
y += Math.sin(angle * 3 + centerDist * 0.2 - time * 4) * 0.8 * mi;
|
|
y += Math.sin(centerDist * 0.15 - time * 3) * 0.6 * mi;
|
|
} else if (matrixMode === 'shield') {
|
|
for (let r = 1; r <= 7; r++) {
|
|
const ringR = 3 + r * 2.5;
|
|
const ringDist = Math.abs(centerDist - ringR * 0.6);
|
|
y += Math.max(0, 1 - ringDist / 2.5) * Math.sin(time * 3 + r) * 0.5 * mi;
|
|
}
|
|
} else if (matrixMode === 'grid') {
|
|
y += Math.sin(bx * 0.5) * Math.sin(bz * 0.5) * Math.sin(time * 2) * 0.6 * mi;
|
|
y += Math.cos(bx * 0.3 + bz * 0.3 + time * 3) * 0.3 * mi;
|
|
} else if (matrixMode === 'radiant') {
|
|
y += Math.sin(centerDist * 0.3 - time * 5) * 1.2 * mi;
|
|
y += Math.sin(bx * 0.2 + time * 3) * Math.cos(bz * 0.2 + time * 2.5) * 0.8 * mi;
|
|
y += Math.cos(dist * 0.25 - time * 4) * 0.6 * repulse * mi;
|
|
const angle = Math.atan2(bz, bx);
|
|
y += Math.sin(angle * 4 + time * 2) * 0.3 * mi;
|
|
}
|
|
|
|
y += lift + twLift;
|
|
dp[i * 3 + 1] = y;
|
|
|
|
// XZ displacement — vortex near cursor
|
|
const angle2 = Math.atan2(dz, dx);
|
|
const spiral2 = repulse * repulse * 1.0 * mi;
|
|
dp[i * 3] = bx + Math.sin(angle2 + time * 3) * spiral2;
|
|
dp[i * 3 + 2] = bz + Math.cos(angle2 + time * 3) * spiral2;
|
|
}
|
|
dotMatrix.geometry.attributes.position.needsUpdate = true;
|
|
|
|
// Camera with mouse parallax
|
|
camera.position.x = Math.sin(time * 0.1) * 2 + mouseX * 5;
|
|
camera.position.y = Math.cos(time * 0.08) * 1 + mouseY * 3;
|
|
camera.lookAt(mouseX * 1.5, mouseY * 1, 0);
|
|
|
|
renderer.render(threeScene, camera);
|
|
}
|
|
animate();
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|
|
|
|
// ── Story engine ──
|
|
const narrator = document.getElementById('narrator');
|
|
const progressBar = document.getElementById('progress-bar');
|
|
const counter = document.getElementById('scene-counter');
|
|
|
|
function showScene(idx) {
|
|
currentScene = Math.max(0, Math.min(idx, scenes.length - 1));
|
|
const s = scenes[currentScene];
|
|
|
|
narrator.className = 'hidden';
|
|
setTimeout(() => {
|
|
let html = `<div class="scene-label">${s.label}</div>`;
|
|
html += `<div class="scene-title">${s.title}</div>`;
|
|
html += `<div class="scene-body">${s.body}</div>`;
|
|
if (s.chars.length) html += s.chars.map(c => `<span class="char">${c}</span>`).join('');
|
|
narrator.innerHTML = html;
|
|
narrator.className = 'visible';
|
|
}, 400);
|
|
|
|
buildViz(s.vizType);
|
|
counter.textContent = `${currentScene + 1} / ${scenes.length}`;
|
|
progressBar.style.width = `${((currentScene + 1) / scenes.length) * 100}%`;
|
|
}
|
|
|
|
function next() { if (currentScene < scenes.length - 1) { showScene(currentScene + 1); resetTimer(); } }
|
|
function prev() { if (currentScene > 0) { showScene(currentScene - 1); resetTimer(); } }
|
|
|
|
function togglePause() {
|
|
paused = !paused;
|
|
document.getElementById('pauseBtn').textContent = paused ? '\u25B6 Play' : '\u25AE\u25AE Pause';
|
|
document.getElementById('pauseBtn').classList.toggle('active', !paused);
|
|
if (!paused) resetTimer();
|
|
else clearInterval(timer);
|
|
}
|
|
|
|
function resetTimer() {
|
|
clearInterval(timer);
|
|
if (!paused) timer = setInterval(() => next(), SCENE_DURATION);
|
|
}
|
|
|
|
// Keyboard
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); next(); }
|
|
if (e.key === 'ArrowLeft') prev();
|
|
if (e.key === 'p' || e.key === 'P') togglePause();
|
|
});
|
|
|
|
// Touch swipe
|
|
let touchX = 0, touchY = 0;
|
|
document.addEventListener('touchstart', e => { touchX = e.touches[0].clientX; touchY = e.touches[0].clientY; });
|
|
document.addEventListener('touchend', e => {
|
|
const dx = e.changedTouches[0].clientX - touchX;
|
|
const dy = e.changedTouches[0].clientY - touchY;
|
|
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) { dx > 0 ? prev() : next(); }
|
|
else if (Math.abs(dy) > 40) { dy > 0 ? prev() : next(); }
|
|
});
|
|
|
|
// Mouse wheel / scroll
|
|
let wheelCooldown = false;
|
|
document.addEventListener('wheel', e => {
|
|
if (wheelCooldown) return;
|
|
wheelCooldown = true;
|
|
setTimeout(() => { wheelCooldown = false; }, 600);
|
|
if (e.deltaY > 20 || e.deltaX > 20) next();
|
|
else if (e.deltaY < -20 || e.deltaX < -20) prev();
|
|
}, { passive: true });
|
|
|
|
// Start
|
|
showScene(0);
|
|
resetTimer();
|
|
|
|
// Export for button handlers
|
|
window.next = next;
|
|
window.prev = prev;
|
|
window.togglePause = togglePause;
|
|
</script>
|
|
<script>
|
|
window.genOriginKey = function() {
|
|
const arr = new Uint8Array(32);
|
|
crypto.getRandomValues(arr);
|
|
const hex = Array.from(arr).map(b=>b.toString(16).padStart(2,'0')).join('');
|
|
const prefix = '\u03C0\u00B7';
|
|
const formatted = prefix + hex.match(/.{1,8}/g).join('\u00B7');
|
|
const el = document.getElementById('origin-key');
|
|
if(el) {
|
|
el.innerHTML = '';
|
|
el.dataset.key = hex;
|
|
for(let i=0;i<formatted.length;i++){
|
|
const span = document.createElement('span');
|
|
span.textContent = formatted[i];
|
|
span.style.cssText = 'display:inline-block;animation:charIn 0.03s ease '+(i*20)+'ms both;opacity:0';
|
|
el.appendChild(span);
|
|
}
|
|
}
|
|
navigator.clipboard.writeText(hex).catch(()=>{});
|
|
};
|
|
</script>
|
|
<style>@keyframes charIn{from{opacity:0;color:#5b8def}to{opacity:1;color:#e8a634}}</style>
|
|
</body>
|
|
</html>
|