<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>ChronoSeed Generator</title>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700;800&display=swap” rel=”stylesheet”>
<script src=”https://unpkg.com/lucide@latest”></script>
<style>
:root{–bg-color:#020617;–text-primary:#f8fafc;–text-secondary:#94a3b8;–primary-color:#4f46e5;–primary-light:#818cf8;–card-bg:rgba(15,23,42,0.65);–card-border:rgba(30,41,59,0.8);–font-sans:’Inter’,system-ui,sans-serif;–font-mono:’JetBrains Mono’,monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{background-color:var(–bg-color);color:var(–text-primary);font-family:var(–font-sans);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;position:relative;overflow-x:hidden;overflow-y:auto}
.cs-ambient-glow{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.1);width:500px;height:500px;background:rgba(79,70,229,0.15);filter:blur(100px);border-radius:50%;pointer-events:none;transition:transform 1s ease,opacity 1s ease;opacity:0.6;z-index:0}
.cs-ambient-glow.paused{transform:translate(-50%,-50%) scale(0.9);opacity:0.3}
.cs-container{position:relative;z-index:10;width:100%;max-width:44rem;display:flex;flex-direction:column;gap:1.5rem}
.cs-header{text-align:center}
.cs-title{font-size:2.25rem;font-weight:800;letter-spacing:-0.05em;display:flex;align-items:center;justify-content:center;gap:0.75rem;background:linear-gradient(to right,#818cf8,#c084fc,#818cf8);-webkit-background-clip:text;color:transparent;margin-bottom:1rem}
.cs-icon-primary{color:var(–primary-light)}
.cs-mode-selectors{display:inline-flex;background:rgba(15,23,42,0.8);border:1px solid var(–card-border);border-radius:9999px;padding:0.25rem;backdrop-filter:blur(8px);flex-wrap:wrap;justify-content:center;gap:0.25rem}
.cs-mode-btn{display:flex;align-items:center;gap:0.5rem;padding:0.375rem 1rem;border-radius:9999px;font-size:0.65rem;font-weight:700;letter-spacing:0.05em;border:none;background:transparent;color:var(–text-secondary);cursor:pointer;transition:all 0.3s ease;font-family:var(–font-sans)}
.cs-mode-btn:hover{color:var(–text-primary)}
.cs-mode-btn.active{background:var(–primary-color);color:white;box-shadow:0 4px 14px 0 rgba(79,70,229,0.39)}
.cs-mode-btn i{width:12px;height:12px}
.hide-mobile{display:inline} @media(max-width:640px){.hide-mobile{display:none}}
.cs-card{background:var(–card-bg);backdrop-filter:blur(20px);border:1px solid var(–card-border);border-radius:1.5rem;padding:2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);position:relative;overflow:hidden}
.cs-card-top-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,transparent,var(–primary-color),transparent);opacity:0.5}
.cs-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.cs-card-label{display:flex;align-items:center;gap:0.5rem;color:var(–primary-light);font-size:0.75rem;font-family:var(–font-mono);text-transform:uppercase;letter-spacing:0.1em}
.cs-card-label i{width:14px;height:14px}
.cs-badge-frozen{background:rgba(245,158,11,0.2);color:#fcd34d;border:1px solid rgba(245,158,11,0.3);padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.625rem;font-weight:700;letter-spacing:0.1em;animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;display:none}
.cs-badge-frozen.visible{display:inline-block}
.cs-seed-display{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:0.5rem 1rem;font-family:var(–font-mono)}
.cs-digit-group{display:flex;flex-direction:column;align-items:center;position:relative}
.cs-digit{font-size:3.5rem;font-weight:800;letter-spacing:-0.05em;background:linear-gradient(to bottom,#ffffff,#94a3b8);-webkit-background-clip:text;color:transparent}
.cs-digit-alt{background:linear-gradient(to bottom,#c7d2fe,#4f46e5);-webkit-background-clip:text}
.cs-digit-label{font-size:0.625rem;color:var(–text-secondary);font-family:var(–font-sans);letter-spacing:0.1em;font-weight:700;margin-top:0.25rem}
.cs-separator{width:2px;height:3rem;background:rgba(99,102,241,0.3);transform:rotate(15deg);margin:0 0.5rem}
.cs-raw-seed-container{text-align:center;margin-top:2.5rem}
.cs-raw-seed{background:rgba(2,6,23,0.6);border:1px solid var(–card-border);color:var(–text-secondary);padding:0.5rem 1rem;border-radius:0.5rem;font-family:var(–font-mono);font-size:0.875rem;letter-spacing:0.2em;box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.06);word-break:break-all}
.cs-actions{display:flex;justify-content:center;gap:1rem;margin-top:2rem}
.cs-btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border-radius:0.75rem;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;font-family:var(–font-sans)}
.cs-btn i{width:18px;height:18px}
.cs-btn:active{transform:scale(0.95)}
.cs-btn-primary{background:linear-gradient(to right,#4f46e5,#9333ea);color:white;box-shadow:0 10px 15px -3px rgba(79,70,229,0.3);border-color:rgba(99,102,241,0.5)}
.cs-btn-primary:hover{box-shadow:0 10px 25px -3px rgba(79,70,229,0.5)}
.cs-btn-secondary{background:rgba(30,41,59,0.5);color:var(–text-primary);border-color:var(–card-border)}
.cs-btn-secondary:hover{background:rgba(51,65,85,0.8)}
.cs-btn-secondary.paused{background:rgba(245,158,11,0.1);color:#fbbf24;border-color:rgba(245,158,11,0.5)}
.cs-visualizer-box{background:var(–card-bg);border:1px solid var(–card-border);border-radius:1.5rem;padding:0.75rem;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.3)}
.cs-canvas-wrapper{position:relative;width:100%;height:26rem;background:#020617;border-radius:1rem;overflow:hidden;margin-bottom:0.75rem;border:1px solid rgba(30,41,59,0.5)}
.cs-canvas{display:block;width:100%;height:100%}
.cs-visualizer-label{position:absolute;top:0.75rem;left:0.75rem;display:flex;align-items:center;gap:0.5rem;font-size:0.625rem;font-weight:700;color:var(–primary-light);background:rgba(15,23,42,0.6);backdrop-filter:blur(4px);padding:0.25rem 0.5rem;border-radius:0.375rem;border:1px solid rgba(79,70,229,0.2);text-transform:uppercase;letter-spacing:0.05em;z-index:10}
.cs-visualizer-label i{width:12px;height:12px}
.cs-visualizer-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:0.35rem;padding:0.25rem;max-height:16rem;overflow-y:auto}
.cs-visualizer-controls::-webkit-scrollbar{width:4px}
.cs-visualizer-controls::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.5);border-radius:4px}
.cs-vis-btn{display:flex;align-items:center;gap:0.375rem;padding:0.4rem 0.7rem;border-radius:0.5rem;font-size:0.6rem;font-weight:700;background:rgba(30,41,59,0.5);color:var(–text-secondary);border:1px solid transparent;cursor:pointer;transition:all 0.2s ease;font-family:var(–font-sans)}
.cs-vis-btn i{width:12px;height:12px}
.cs-vis-btn:hover{background:rgba(51,65,85,0.8);color:var(–text-primary);transform:scale(1.05)}
.cs-vis-btn.active{background:var(–primary-color);color:white;box-shadow:0 4px 6px -1px rgba(79,70,229,0.3);border-color:rgba(99,102,241,0.5)}
.cs-spin{animation:spin 1s linear infinite}
.cs-bounce{animation:bounce-slow 2s infinite}
.cs-animate-slide-up{animation:slideUp 0.3s ease-out}
@keyframes spin{100%{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}
@keyframes bounce-slow{0%,100%{transform:translateY(-10%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:768px){.cs-digit{font-size:4.5rem}.cs-canvas-wrapper{height:30rem}}
</style>
</head>
<body>
<div class=”cs-ambient-glow” id=”ambient-glow”></div>
<div class=”cs-container”>
<div class=”cs-header”>
<h1 class=”cs-title”><i data-lucide=”zap” class=”cs-icon-primary”></i> CHRONO SEED</h1>
<div class=”cs-mode-selectors”>
<button class=”cs-mode-btn active” id=”btn-mode-elapsed” onclick=”setSeedMode(‘ELAPSED’)”><i data-lucide=”calendar”></i> <span class=”hide-mobile”>ORIGIN (1969)</span></button>
<button class=”cs-mode-btn” id=”btn-mode-clock” onclick=”setSeedMode(‘CLOCK’)”><i data-lucide=”clock”></i> <span class=”hide-mobile”>SYSTEM CLOCK</span></button>
<button class=”cs-mode-btn” id=”btn-mode-countdown” onclick=”setSeedMode(‘COUNTDOWN’)”><i data-lucide=”hourglass”></i> <span class=”hide-mobile”>TARGET (2100)</span></button>
</div>
</div>
<div class=”cs-card”>
<div class=”cs-card-top-line”></div>
<div class=”cs-card-header”>
<div class=”cs-card-label”><i data-lucide=”hash”></i> <span id=”display-mode-label”>ELAPSED SEED VALUE</span></div>
<span class=”cs-badge-frozen” id=”badge-frozen”>FROZEN</span>
</div>
<div class=”cs-seed-display”>
<div class=”cs-digit-group”><span class=”cs-digit” id=”digit-yy”>00</span><span class=”cs-digit-label”>YEAR</span></div>
<div class=”cs-digit-group”><span class=”cs-digit” id=”digit-mm”>00</span><span class=”cs-digit-label”>MNTH</span></div>
<div class=”cs-digit-group”><span class=”cs-digit” id=”digit-dd”>00</span><span class=”cs-digit-label”>DAY</span></div>
<div class=”cs-separator”></div>
<div class=”cs-digit-group”><span class=”cs-digit cs-digit-alt” id=”digit-hh”>00</span><span class=”cs-digit-label”>HOUR</span></div>
<div class=”cs-digit-group”><span class=”cs-digit cs-digit-alt” id=”digit-min”>00</span><span class=”cs-digit-label”>MIN</span></div>
<div class=”cs-digit-group”><span class=”cs-digit cs-digit-alt cs-animate-slide-up” id=”digit-ss”>00</span><span class=”cs-digit-label”>SEC</span></div>
</div>
<div class=”cs-raw-seed-container”><code class=”cs-raw-seed” id=”raw-seed”>000000000000</code></div>
<div class=”cs-actions”>
<button class=”cs-btn cs-btn-secondary” id=”btn-pause” onclick=”togglePause()”><i data-lucide=”pause” id=”icon-pause”></i> <span id=”text-pause”>FREEZE</span></button>
<button class=”cs-btn cs-btn-primary” id=”btn-copy” onclick=”copySeed()”><i data-lucide=”copy” id=”icon-copy”></i> <span id=”text-copy”>COPY SEED</span></button>
</div>
</div>
<div class=”cs-visualizer-box”>
<div class=”cs-canvas-wrapper”>
<canvas id=”cs-canvas” class=”cs-canvas”></canvas>
<div class=”cs-visualizer-label”><i data-lucide=”activity” class=”cs-icon-primary”></i> <span id=”engine-label”>QUANTUM ENGINE</span></div>
</div>
<div class=”cs-visualizer-controls” id=”vis-controls”></div>
</div>
</div>
<script>
lucide.createIcons();
const $ = id => document.getElementById(id);
const fmt = n => n.toString().padStart(2, ‘0’);
const ORIGIN_DATE = new Date(‘1969-02-02T08:30:00’);
const FUTURE_DATE = new Date(‘2100-01-01T00:00:00’);
// Mathematical Aliases
const M = Math, PI = M.PI, sin = M.sin, cos = M.cos, min = M.min, max = M.max, hypot = M.hypot, rand = M.random;
const state = {
isPaused: false, frozenTime: null, currentTime: new Date(),
seedMode: ‘ELAPSED’, visMode: ‘QUANTUM’, // Default fixed Quantum mode
params: { y: 0, mo: 0, d: 0, h: 0, m: 0, s: 0, raw: ‘000000000000’ }
};
const els = {
yy: $(‘digit-yy’), mm: $(‘digit-mm’), dd: $(‘digit-dd’), hh: $(‘digit-hh’), min: $(‘digit-min’), ss: $(‘digit-ss’), raw: $(‘raw-seed’),
modeLabel: $(‘display-mode-label’), btnElapsed: $(‘btn-mode-elapsed’), btnClock: $(‘btn-mode-clock’), btnCountdown: $(‘btn-mode-countdown’),
btnPause: $(‘btn-pause’), badgeFrozen: $(‘badge-frozen’), btnCopy: $(‘btn-copy’), ambientGlow: $(‘ambient-glow’),
engineLabel: $(‘engine-label’), visControls: $(‘vis-controls’), canvas: $(‘cs-canvas’)
};
const ctx = els.canvas.getContext(‘2d’, { alpha: false });
function setSeedMode(mode) {
state.seedMode = mode;
els.btnElapsed.classList.toggle(‘active’, mode === ‘ELAPSED’); els.btnClock.classList.toggle(‘active’, mode === ‘CLOCK’); els.btnCountdown.classList.toggle(‘active’, mode === ‘COUNTDOWN’);
els.modeLabel.innerText = `${mode} SEED VALUE`; updateSeed();
}
function togglePause() {
state.isPaused = !state.isPaused;
if (state.isPaused) {
state.frozenTime = state.currentTime; els.btnPause.classList.add(‘paused’); els.btnPause.innerHTML = `<i data-lucide=”play”></i> <span>RESUME</span>`;
els.badgeFrozen.classList.add(‘visible’); els.ambientGlow.classList.add(‘paused’);
} else {
state.frozenTime = null; els.btnPause.classList.remove(‘paused’); els.btnPause.innerHTML = `<i data-lucide=”pause”></i> <span>FREEZE</span>`;
els.badgeFrozen.classList.remove(‘visible’); els.ambientGlow.classList.remove(‘paused’);
}
lucide.createIcons(); updateSeed();
}
function copySeed() {
navigator.clipboard.writeText(state.params.raw); els.btnCopy.innerHTML = `<i data-lucide=”refresh-cw” class=”cs-spin”></i> <span>COPIED!</span>`; lucide.createIcons();
setTimeout(() => { els.btnCopy.innerHTML = `<i data-lucide=”copy”></i> <span>COPY SEED</span>`; lucide.createIcons(); }, 2000);
}
function updateSeed() {
const now = state.isPaused && state.frozenTime ? state.frozenTime : state.currentTime;
let result = { YY: ’00’, MM: ’00’, DD: ’00’, HH: ’00’, mm: ’00’, SS: ’00’ };
if (state.seedMode === ‘CLOCK’) {
result = { YY: fmt(now.getFullYear().toString().slice(-2)), MM: fmt(now.getMonth() + 1), DD: fmt(now.getDate()), HH: fmt(now.getHours()), mm: fmt(now.getMinutes()), SS: fmt(now.getSeconds()) };
} else {
const target = state.seedMode === ‘ELAPSED’ ? now : FUTURE_DATE; const base = state.seedMode === ‘ELAPSED’ ? ORIGIN_DATE : now; let diff = target.getTime() – base.getTime();
const MS_YEAR = 365.25 * 24 * 60 * 60 * 1000; const MS_MONTH = MS_YEAR / 12;
const years = M.floor(diff / MS_YEAR); diff -= years * MS_YEAR; const months = M.floor(diff / MS_MONTH); diff -= months * MS_MONTH;
const days = M.floor(diff / 86400000); diff -= days * 86400000; const hours = M.floor(diff / 3600000); diff -= hours * 3600000;
const minutes = M.floor(diff / 60000); diff -= minutes * 60000; const seconds = M.floor(diff / 1000);
result = { YY: fmt(M.abs(years)), MM: fmt(M.abs(months)), DD: fmt(M.abs(days)), HH: fmt(M.abs(hours)), mm: fmt(M.abs(minutes)), SS: fmt(M.abs(seconds)) };
}
if (els.ss.innerText !== result.SS && !state.isPaused) { els.ss.classList.remove(‘cs-animate-slide-up’); void els.ss.offsetWidth; els.ss.classList.add(‘cs-animate-slide-up’); }
els.yy.innerText = result.YY; els.mm.innerText = result.MM; els.dd.innerText = result.DD; els.hh.innerText = result.HH; els.min.innerText = result.mm; els.ss.innerText = result.SS;
const rawSeed = `${result.YY}${result.MM}${result.DD}${result.HH}${result.mm}${result.SS}`; els.raw.innerText = rawSeed;
state.params = { y: parseInt(result.YY)||0, mo: parseInt(result.MM)||0, d: parseInt(result.DD)||0, h: parseInt(result.HH)||0, m: parseInt(result.mm)||0, s: parseInt(result.SS)||0, raw: rawSeed };
}
setInterval(() => { if (!state.isPaused) { state.currentTime = new Date(); updateSeed(); } }, 1000);
// — 28 VISUALIZERS —
const VISUALIZERS = [
{ id: ‘QUANTUM’, icon: ‘atom’, label: ‘Quantum’ }, { id: ‘STELLAR’, icon: ‘sparkles’, label: ‘Stellar’ }, { id: ‘VOID’, icon: ‘moon’, label: ‘Void’ },
{ id: ‘ATTRACTOR’, icon: ‘asterisk’, label: ‘Attractor’ }, { id: ‘ISOMETRIC’, icon: ‘box’, label: ‘Voxel’ }, { id: ‘SACRED’, icon: ‘sun’, label: ‘Sacred’ },
{ id: ‘ORRERY’, icon: ‘globe’, label: ‘Orrery’ }, { id: ‘FRACTAL’, icon: ‘git-merge’, label: ‘Fractal’ }, { id: ‘CYMATICS’, icon: ‘target’, label: ‘Cymatics’ },
{ id: ‘GLITCH’, icon: ‘tv’, label: ‘Glitch’ }, { id: ‘TENTACLE’, icon: ‘squid’, label: ‘Tentacle’ }, { id: ‘MICROBE’, icon: ‘bug’, label: ‘Microbe’ },
{ id: ‘PORTAL’, icon: ‘tornado’, label: ‘Portal’ }, { id: ‘OCULAR’, icon: ‘eye’, label: ‘Ocular’ }, { id: ‘SYNTHWAVE’, icon: ‘sunset’, label: ‘Synthwave’ },
{ id: ‘FLOW’, icon: ‘wind’, label: ‘Flow’ }, { id: ‘HARMONIC’, icon: ‘infinity’, label: ‘Harmonic’ }, { id: ‘CORTEX’, icon: ‘brain-circuit’, label: ‘Cortex’ },
{ id: ‘ASTROLABE’, icon: ‘compass’, label: ‘Chrono’ }, { id: ‘HELIX’, icon: ‘dna’, label: ‘Helix’ }, { id: ‘MATRIX’, icon: ‘grid’, label: ‘Matrix’ },
{ id: ‘NEURAL’, icon: ‘network’, label: ‘Nodes’ }, { id: ‘SONAR’, icon: ‘radio’, label: ‘Sonar’ }, { id: ‘HEXA’, icon: ‘hexagon’, label: ‘Hexa’ },
{ id: ‘SPIRAL’, icon: ‘circle’, label: ‘Spiral’ }, { id: ‘SPECTRUM’, icon: ‘bar-chart-3’, label: ‘Spectrum’ }, { id: ‘DEEP’, icon: ‘git-graph’, label: ‘Deep’ },
{ id: ‘KALEIDO’, icon: ‘aperture’, label: ‘Kaleido’ }
];
VISUALIZERS.forEach(vis => {
const btn = document.createElement(‘button’); btn.className = `cs-vis-btn ${state.visMode === vis.id ? ‘active’ : ”}`;
btn.innerHTML = `<i data-lucide=”${vis.icon}” class=”${state.visMode === vis.id ? ‘cs-bounce’ : ”}”></i> <span>${vis.label}</span>`;
btn.onclick = () => setVisMode(vis.id); els.visControls.appendChild(btn);
});
lucide.createIcons();
function setVisMode(mode) {
state.visMode = mode; els.engineLabel.innerText = `${VISUALIZERS.find(v => v.id === mode).label.toUpperCase()} ENGINE`;
Array.from(els.visControls.children).forEach((btn, idx) => {
const isActive = VISUALIZERS[idx].id === mode; btn.className = `cs-vis-btn ${isActive ? ‘active’ : ”}`; btn.querySelector(‘i’).className = isActive ? ‘cs-bounce’ : ”;
});
visState.mode = null;
}
let visState = { mode: null, w: 0, h: 0, data: {} };
const getQBez = (t, p0, p1, p2) => { const mt=1-t; return { x: mt*mt*p0.x + 2*mt*t*p1.x + t*t*p2.x, y: mt*mt*p0.y + 2*mt*t*p1.y + t*t*p2.y }; }
function initVisualizerData(mode, w, h) {
let d = {}; const cx = w/2, cy = h/2;
switch(mode) {
case ‘VOID’: d.p = Array.from({length: 400}).map(()=>({x:rand()*w, y:rand()*h, vx:(rand()-0.5)*2, vy:(rand()-0.5)*2})); break;
case ‘ATTRACTOR’: d.ax=0; d.ay=0; break;
case ‘ISOMETRIC’: d.g = []; for(let x=-10; x<10; x++) for(let y=-10; y<10; y++) d.g.push({ix:x, iy:y}); break;
case ‘ORRERY’: d.pl = [{i:0,s:4,d:0.2,m:5},{i:1,s:6,d:0.35,m:2,mn:1},{i:2,s:8,d:0.5,m:1,mn:2},{i:3,s:10,d:0.65,m:0.5},{i:4,s:14,d:0.8,m:0.1,r:1},{i:5,s:7,d:0.95,m:0.05}]; break;
case ‘CYMATICS’: d.g = []; for(let x=0;x<40;x++) for(let y=0;y<40;y++) d.g.push({x:(x/40)*w, y:(y/40)*h, ix:x/40, iy:y/40}); break;
case ‘TENTACLE’: d.t = []; for(let i=0;i<6;i++) { let s=[]; for(let j=0;j<25;j++) s.push({x:cx,y:cy}); d.t.push({s:s, l:10+rand()*5, o:i}); } break;
case ‘PORTAL’: d.r = []; for(let i=1;i<=20;i++) d.r.push({z:i*0.8, d:i%2===0?1:-1}); break;
case ‘OCULAR’: d.e = {lx:cx, ly:cy, tx:cx, ty:cy, bs:0, bp:0, ip:[]}; for(let i=0;i<60;i++) d.e.ip.push(rand()*10-5); break;
case ‘SYNTHWAVE’: d.go=0; d.m=[]; for(let i=0;i<=20;i++) d.m.push(rand()*(h*0.2)); break;
case ‘FLOW’: d.p = Array.from({length:200}).map(()=>({x:rand()*w, y:rand()*h, vx:0, vy:0, l:rand()*100})); break;
case ‘HARMONIC’: d.tr = []; break;
case ‘CORTEX’:
d.n=[]; d.sy=[]; const mr=min(w,h)*0.45;
for(let i=0;i<120;i++) { const r=M.pow(rand(),1.5)*mr, a=rand()*PI*2; d.n.push({x:cos(a)*r, y:sin(a)*r, br:r, a:a, s:rand()*2+0.5, p:rand()*10}); }
for(let i=0;i<d.n.length;i++) { let c=0; for(let j=0;j<d.n.length;j++) { if(i===j)continue; if(d.n[j].br<d.n[i].br) { const dt=hypot(d.n[i].x-d.n[j].x, d.n[i].y-d.n[j].y); if(dt<mr*0.4&&c<2){ d.sy.push({f:d.n[j], t:d.n[i], cp:{x:(d.n[i].x+d.n[j].x)/2+cos(d.n[i].a)*30, y:(d.n[i].y+d.n[j].y)/2+sin(d.n[i].a)*30}, d:dt}); c++; }}}} break;
case ‘STELLAR’:
d.s = Array.from({length:250}).map(()=>({x:rand()*w, y:rand()*h, s:rand()*1.5+0.2, d:rand()*0.8+0.2, p:rand()*PI*2}));
d.n = Array.from({length:3}).map(()=>({cx:rand()*w, cy:rand()*h, r:max(w,h)*0.4+rand()*200, h:220+rand()*60, rs:(rand()-0.5)*0.0005})); break;
case ‘QUANTUM’:
d.o = Array.from({length:6}).map((_,i)=>({rx:40+i*15, ry:15+i*5, t:(i/6)*PI, s:0.01+rand()*0.02, ea:rand()*PI*2}));
d.cp = Array.from({length:30}).map(()=>({a:rand()*PI*2, d:rand()*15, s:rand()*0.05})); break;
case ‘MATRIX’: d.fs=16; d.d=Array.from({length:max(10,M.floor(w/16))}).map((_,i)=>({x:i*16, y:rand()*-h*2, s:1.5+rand()*2})); break;
case ‘SONAR’: d.b=[]; d.ls=-1; break;
case ‘NEURAL’: d.n = Array.from({length:min(M.floor((w*h)/8000),50)}).map(()=>({x:rand()*w, y:rand()*h, vx:(rand()-0.5)*1.2, vy:(rand()-0.5)*1.2})); break;
case ‘DEEP’: d.n=[]; const ly=[1,5,5,5,1]; const ld=w/6; ly.forEach((c,i)=>{ const sp=h/(c+1); for(let j=0;j<c;j++) d.n.push({x:(i+1)*ld, y:(j+1)*sp, l:i}); }); break;
case ‘HEXA’: d.h=[]; const hs=25; const hc=M.ceil(w/(hs*1.5))+1; const hr=M.ceil(h/(hs*0.866))+1; for(let r=0;r<hr;r++){ for(let c=0;c<hc;c++) d.h.push({r:r, c:c, hs:hs, x:c*(hs*1.5), y:r*(hs*1.732)+(c%2===0?0:hs*0.866)}); } break;
}
return d;
}
const renderers = {
VOID: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.3)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, sR=30+sin(t*0.005)*5;
c.beginPath(); c.arc(cx,cy,sR,0,PI*2); c.shadowBlur=40+p.s; c.shadowColor=’#c084fc’; c.fillStyle=’#000′; c.fill(); c.shadowBlur=0; c.strokeStyle=’#c084fc’; c.lineWidth=2; c.stroke();
const g=50+p.m;
d.p.forEach(pt=>{
let dx=cx-pt.x, dy=cy-pt.y, dt=max(5,hypot(dx,dy)), f=g/dt;
pt.vx+=(dx/dt)*f+(dy/dt)*(f*0.6)+(rand()-0.5)*2; pt.vy+=(dy/dt)*f+(-dx/dt)*(f*0.6)+(rand()-0.5)*2;
pt.vx*=0.96; pt.vy*=0.96; pt.x+=pt.vx; pt.y+=pt.vy;
c.fillStyle=`hsla(${220+dt},80%,${min(100,hypot(pt.vx,pt.vy)*20)}%,${min(1,50/dt)})`; c.fillRect(pt.x,pt.y,2,2);
if(dt<sR*1.1||pt.x<0||pt.x>w||pt.y<0||pt.y>h) { pt.x=rand()>0.5?rand()*w:(rand()>0.5?0:w); pt.y=pt.x<0||pt.x>w?rand()*h:(rand()>0.5?0:h); pt.vx=0; pt.vy=0; }
});
},
ATTRACTOR: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.15)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, sc=min(w,h)*0.15;
const a=(p.h/24)*4-2, b=(p.m/60)*4-2, cv=(p.s/60)*4-2, dv=(p.d/31)*4-2, rot=t*0.0005;
c.fillStyle=`hsla(${(p.s*6+p.m)%360},80%,60%,0.4)`;
for(let i=0;i<8000;i++){
let nx=sin(a*d.ay)+cv*cos(a*d.ax), ny=sin(b*d.ax)+dv*cos(b*d.ay); d.ax=nx; d.ay=ny;
c.fillRect(cx+(cos(rot)*nx-sin(rot)*ny)*sc, cy+(sin(rot)*nx+cos(rot)*ny)*sc, 1, 1);
}
},
ISOMETRIC: (c,w,h,t,p,d) => {
c.fillStyle=’#020617′; c.fillRect(0,0,w,h); const cx=w/2, cy=h*0.3;
d.g.sort((a,b)=>(a.ix+a.iy)-(b.ix+b.iy)).forEach(g=>{
const dt=hypot(g.ix,g.iy), z=(sin(dt*0.3-t*0.002)*cos(g.ix*0.2+p.m*0.1)+1)*(p.s/2+10);
const px=cx+(g.ix-g.iy)*20, py=cy+(g.ix+g.iy)*10, ty=py-z, hue=(200+z*2+dt*5)%360;
c.fillStyle=`hsl(${hue},60%,30%)`; c.beginPath(); c.moveTo(px,ty); c.lineTo(px-20,ty+10); c.lineTo(px-20,py+10); c.lineTo(px,py); c.fill();
c.fillStyle=`hsl(${hue},60%,20%)`; c.beginPath(); c.moveTo(px,ty); c.lineTo(px+20,ty+10); c.lineTo(px+20,py+10); c.lineTo(px,py); c.fill();
c.fillStyle=`hsl(${hue},60%,50%)`; c.beginPath(); c.moveTo(px,ty); c.lineTo(px-20,ty+10); c.lineTo(px,ty+20); c.lineTo(px+20,ty+10); c.fill();
c.strokeStyle=`hsla(${hue},80%,70%,0.5)`; c.stroke();
});
},
SACRED: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.3)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, r=min(w,h)*0.15, pt=(p.m%6)+3;
c.strokeStyle=’rgba(129,140,248,0.6)’; c.lineWidth=1.5; c.save(); c.translate(cx,cy); c.rotate(t*0.0005);
c.beginPath(); c.arc(0,0,r,0,PI*2); c.stroke();
for(let i=0;i<pt;i++){ c.beginPath(); c.arc(cos(i/pt*PI*2)*r, sin(i/pt*PI*2)*r, r, 0, PI*2); c.stroke(); }
c.strokeStyle=’rgba(192,132,252,0.4)’;
for(let i=0;i<pt;i++) for(let j=i+1;j<pt;j++){ c.beginPath(); c.moveTo(cos(i/pt*PI*2)*r*2, sin(i/pt*PI*2)*r*2); c.lineTo(cos(j/pt*PI*2)*r*2, sin(j/pt*PI*2)*r*2); c.stroke(); }
c.restore(); c.save(); c.translate(cx,cy); c.rotate(-t*0.00025); c.strokeStyle=’rgba(99,102,241,0.8)’; c.beginPath();
const sp=(p.h%5)+5, or=r*2.2+sin(t*0.001)*20;
for(let i=0;i<sp*2;i++){ const a=(i/(sp*2))*PI*2, dt=(i%2===0)?or:or*0.5; if(i===0)c.moveTo(cos(a)*dt,sin(a)*dt); else c.lineTo(cos(a)*dt,sin(a)*dt); }
c.closePath(); c.stroke(); c.restore();
},
ORRERY: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.3)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, mr=min(w,h)*0.45;
c.shadowBlur=30; c.shadowColor=’#fcd34d’; c.fillStyle=’#fcd34d’; c.beginPath(); c.arc(cx,cy,20+sin(t*0.005)*5,0,PI*2); c.fill(); c.shadowBlur=0;
const v=[p.s,p.m,p.h,p.d,p.mo,p.y], mv=[60,60,24,31,12,100];
d.pl.forEach((pl,i)=>{
const r=pl.d*mr; c.strokeStyle=’rgba(255,255,255,0.05)’; c.lineWidth=1; c.beginPath(); c.arc(cx,cy,r,0,PI*2); c.stroke();
const a=(v[i]/(mv[i]||100))*PI*2+(t*0.0001*pl.m), px=cx+cos(a)*r, py=cy+sin(a)*r, hu=(i*60+p.s*2)%360;
c.fillStyle=`hsl(${hu},80%,60%)`; c.beginPath(); c.arc(px,py,pl.s,0,PI*2); c.fill();
if(pl.r) { c.strokeStyle=`hsla(${hu},80%,70%,0.5)`; c.lineWidth=2; c.beginPath(); c.ellipse(px,py,pl.s*2.5,pl.s*0.8,a,0,PI*2); c.stroke(); }
if(pl.mn) for(let m=0;m<pl.mn;m++){ const ma=t*0.002*(m+1)+(m*PI); c.fillStyle=’#fff’; c.beginPath(); c.arc(px+cos(ma)*pl.s*2.5, py+sin(ma)*pl.s*2.5, 1.5, 0, PI*2); c.fill(); }
});
},
FRACTAL: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.3)’; c.fillRect(0,0,w,h); const md=(p.m%4)+6, ba=(p.s/60)*PI/2+0.2, sw=sin(t*0.001)*0.1;
function br(x,y,l,a,dp) {
if(dp===0) return; const ex=x+cos(a)*l, ey=y+sin(a)*l;
c.strokeStyle=`hsla(${(p.h*15+dp*20)%360},80%,60%,${dp/md})`; c.lineWidth=dp*0.8; c.lineCap=’round’; c.beginPath(); c.moveTo(x,y); c.lineTo(ex,ey); c.stroke();
if(dp===1) { c.fillStyle=’#fff’; c.beginPath(); c.arc(ex,ey,2,0,PI*2); c.fill(); }
br(ex,ey,l*0.7,a-ba+sw,dp-1); br(ex,ey,l*0.7,a+ba+sw,dp-1);
}
br(w/2,h,min(w,h)*0.25,-PI/2,md);
},
CYMATICS: (c,w,h,t,p,d) => {
c.fillStyle=’#020617′; c.fillRect(0,0,w,h); const m=(p.m%5)+1, n=(p.s%5)+1, ph=t*0.002; c.fillStyle=’#818cf8′;
d.g.forEach(pt=>{
const v=cos(n*PI*(pt.ix*2-1)+ph)*cos(m*PI*(pt.iy*2-1))-cos(m*PI*(pt.ix*2-1))*cos(n*PI*(pt.iy*2-1)+ph);
if(M.abs(v)<0.2) { c.beginPath(); c.arc(pt.x,pt.y,(0.2-M.abs(v))*10,0,PI*2); c.fill(); }
});
},
GLITCH: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.3)’; c.fillRect(0,0,w,h); const txt=p.raw; c.font=`900 ${min(w,h)/5}px monospace`; c.textAlign=’center’; c.textBaseline=’middle’;
const ig=rand()<0.05+(p.s%10)*0.02, jx=ig?(rand()-0.5)*30:0, jy=ig?(rand()-0.5)*15:0;
c.globalCompositeOperation=’screen’; c.fillStyle=’rgba(255,0,0,0.9)’; c.fillText(txt,w/2-5+jx,h/2+jy); c.fillStyle=’rgba(0,255,255,0.9)’; c.fillText(txt,w/2+5-jx,h/2-jy);
c.fillStyle=’#fff’; c.fillText(txt,w/2,h/2); c.globalCompositeOperation=’source-over’;
if(ig){ const sy=rand()*h, sh=rand()*(h/4); if(sh>0) c.drawImage(c.canvas,0,sy,w,sh,(rand()-0.5)*(w/8),sy,w,sh); c.fillStyle=`hsla(${rand()*360},100%,50%,0.3)`; c.fillRect(rand()*w,rand()*h,rand()*w*0.5,rand()*20); }
},
TENTACLE: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.4)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, tx=cx+cos(t*0.001+p.s)*w*0.3, ty=cy+sin(t*0.0013+p.m)*h*0.3;
c.shadowBlur=10; c.shadowColor=’#ef4444′; c.fillStyle=’#ef4444′; c.beginPath(); c.arc(tx,ty,8,0,PI*2); c.fill(); c.shadowBlur=0;
d.t.forEach(tb=>{
const trx=tx+cos(t*0.002+tb.o)*50, try_=ty+sin(t*0.002+tb.o)*50; tb.s[0].x+=(trx-tb.s[0].x)*0.1; tb.s[0].y+=(try_-tb.s[0].y)*0.1;
for(let i=1;i<tb.s.length;i++){ let dx=tb.s[i-1].x-tb.s[i].x, dy=tb.s[i-1].y-tb.s[i].y, dt=hypot(dx,dy); if(dt>tb.l){tb.s[i].x=tb.s[i-1].x-(dx/dt)*tb.l; tb.s[i].y=tb.s[i-1].y-(dy/dt)*tb.l;} }
tb.s[tb.s.length-1].x=cx; tb.s[tb.s.length-1].y=cy;
for(let i=1;i<tb.s.length;i++){ c.beginPath(); c.moveTo(tb.s[i-1].x,tb.s[i-1].y); c.lineTo(tb.s[i].x,tb.s[i].y); c.strokeStyle=`hsl(${(p.s*6+tb.o*30)},80%,${60-(i/tb.s.length)*30}%)`; c.lineWidth=15*(1-i/tb.s.length); c.lineCap=’round’; c.stroke(); }
});
},
MICROBE: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.4)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, cc=(p.m%4)+2;
for(let i=0;i<cc;i++){
const ao=(i/cc)*PI*2+(t*0.0002), or=sin(t*0.0005+i)*60+60, bx=cx+cos(ao)*or, by=cy+sin(ao)*or, br=40+(p.s%15)*2+(i*5);
c.beginPath(); for(let a=0;a<=PI*2;a+=0.05){ const r=br+sin(a*4+t*0.002+i)*12+cos(a*7-t*0.001)*6+sin(a*3+p.h)*4; if(a===0)c.moveTo(bx+cos(a)*r,by+sin(a)*r); else c.lineTo(bx+cos(a)*r,by+sin(a)*r); }
c.closePath(); const hu=(140+p.s*2+i*50)%360; c.fillStyle=`hsla(${hu},80%,40%,0.4)`; c.fill(); c.strokeStyle=`hsla(${hu},90%,70%,0.8)`; c.lineWidth=2; c.stroke();
c.fillStyle=`hsla(${hu-40},90%,60%,0.9)`; c.beginPath(); c.arc(bx+cos(t*0.001+i)*10, by+sin(t*0.001+i)*10, br*0.25, 0, PI*2); c.fill();
for(let j=0;j<3;j++){ c.fillStyle=`hsla(${hu+40},90%,60%,0.6)`; c.beginPath(); c.arc(bx+cos(t*0.002+j*2)*br*0.5, by+sin(t*0.002+j*2)*br*0.5, br*0.1, 0, PI*2); c.fill(); }
}
},
PORTAL: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.3)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2;
d.r.forEach(r=>{
r.z-=0.05+(p.s/60)*0.1; if(r.z<=0.5) r.z=15;
const sc=20/r.z, sz=25*sc; c.save(); c.translate(cx,cy); c.rotate(t*0.0005*r.d+(p.m*0.1)); c.beginPath();
const sd=(p.h%5)+3; for(let i=0;i<sd;i++){ const a=(i/sd)*PI*2; if(i===0)c.moveTo(cos(a)*sz,sin(a)*sz); else c.lineTo(cos(a)*sz,sin(a)*sz); } c.closePath();
c.strokeStyle=`hsla(${(p.s*6+r.z*20)%360},80%,60%,${1-r.z/15})`; c.lineWidth=max(1,2*sc); c.stroke(); c.restore();
});
},
OCULAR: (c,w,h,t,p,d) => {
c.fillStyle=’#020617′; c.fillRect(0,0,w,h); const e=d.e, cx=w/2, cy=h/2, er=min(w,h)*0.35;
if(rand()<0.01){e.tx=cx+(rand()-0.5)*er*0.8; e.ty=cy+(rand()-0.5)*er*0.8;} e.lx+=(e.tx-e.lx)*0.05; e.ly+=(e.ty-e.ly)*0.05;
if(e.bs===0&&rand()<0.005)e.bs=1; if(e.bs===1){e.bp+=0.15;if(e.bp>=1)e.bs=2;} if(e.bs===2){e.bp-=0.1;if(e.bp<=0){e.bp=0;e.bs=0;}}
c.beginPath(); c.ellipse(cx,cy,er*1.2,er*0.8,0,0,PI*2); const sg=c.createRadialGradient(cx,cy,er*0.4,cx,cy,er*1.2); sg.addColorStop(0,’#f8fafc’); sg.addColorStop(1,’#ef4444′); c.fillStyle=sg; c.fill();
const ir=er*0.45; c.save(); c.beginPath(); c.ellipse(cx,cy,er*1.2,er*0.8,0,0,PI*2); c.clip();
const ih=(p.m*6)%360; c.beginPath(); c.arc(e.lx,e.ly,ir,0,PI*2); const ig=c.createRadialGradient(e.lx,e.ly,ir*0.2,e.lx,e.ly,ir); ig.addColorStop(0,`hsl(${ih+40},90%,60%)`); ig.addColorStop(1,`hsl(${ih-20},70%,20%)`); c.fillStyle=ig; c.fill(); c.lineWidth=1;
for(let i=0;i<e.ip.length;i++){ const a=(i/e.ip.length)*PI*2, rv=e.ip[i]+(parseInt(p.raw[i%12])||0)*2; c.strokeStyle=`hsla(${ih},80%,70%,0.3)`; c.beginPath(); c.moveTo(e.lx,e.ly); c.lineTo(e.lx+cos(a)*(ir-rv),e.ly+sin(a)*(ir-rv)); c.stroke(); }
const bp=ir*0.3, dl=bp+(p.s/60)*(ir*0.4)+sin(t*0.005)*5; c.beginPath(); c.arc(e.lx,e.ly,dl,0,PI*2); c.fillStyle=’#020617′; c.fill();
c.beginPath(); c.arc(e.lx-ir*0.3,e.ly-ir*0.3,ir*0.15,0,PI*2); c.fillStyle=’rgba(255,255,255,0.4)’; c.fill(); c.restore();
if(e.bp>0){ const bh=(er*0.8)*e.bp; c.fillStyle=’#020617′; c.fillRect(0,0,w,cy-er*0.8+bh); c.fillRect(0,cy+er*0.8-bh,w,h); }
},
SYNTHWAVE: (c,w,h,t,p,d) => {
const cy=h*0.55, cx=w/2, bg=c.createLinearGradient(0,0,0,cy); bg.addColorStop(0,’#0f172a’); bg.addColorStop(1,’#312e81′); c.fillStyle=bg; c.fillRect(0,0,w,cy);
const sh=(p.h*15)%360, sr=min(w,h)*0.25, sg=c.createLinearGradient(0,cy-sr,0,cy); sg.addColorStop(0,`hsl(${sh+40},100%,60%)`); sg.addColorStop(1,`hsl(${sh-20},100%,50%)`); c.fillStyle=sg; c.beginPath(); c.arc(cx,cy,sr,PI,0,false); c.fill();
c.fillStyle=’#020617′; for(let i=0;i<6;i++) c.fillRect(cx-sr,cy-i*15-5,sr*2,2+i*2);
c.fillStyle=’#020617′; c.beginPath(); c.moveTo(0,cy); const ms=w/20; for(let i=0;i<=20;i++){ const mh=d.m[i<10?i:20-i]*(1-M.abs(10-i)/10); c.lineTo(i*ms,cy-mh); } c.lineTo(w,cy); c.closePath(); c.fill(); c.strokeStyle=`hsl(${sh},80%,50%)`; c.lineWidth=2; c.stroke();
c.fillStyle=’#020617′; c.fillRect(0,cy,w,h-cy); d.go=(d.go+1+(p.m/20))%40; c.strokeStyle=`hsla(${sh+60},90%,60%,0.5)`; c.lineWidth=1;
for(let y=0;y<h-cy;y+=40){ const py=cy+M.pow(y+d.go,1.2)*0.1; if(py<h){c.beginPath();c.moveTo(0,py);c.lineTo(w,py);c.stroke();} }
for(let x=-w;x<w*2;x+=40){ c.beginPath();c.moveTo(cx,cy);c.lineTo(cx+(x-cx)*10,h);c.stroke(); }
},
FLOW: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.1)’; c.fillRect(0,0,w,h); const fa=p.y*0.01+0.005, fb=p.mo*0.05+0.01, tm=t*0.0005; c.lineWidth=1.5;
d.p.forEach(pt=>{
const a=sin(pt.x*fa+tm)+cos(pt.y*fb+p.m*0.1), sp=2+(p.s/30); pt.vx=cos(a)*sp; pt.vy=sin(a)*sp;
c.strokeStyle=`hsla(${(pt.x/w)*100+200},80%,60%,${pt.life/100})`; c.beginPath(); c.moveTo(pt.x,pt.y); pt.x+=pt.vx; pt.y+=pt.vy; pt.life-=0.5; c.lineTo(pt.x,pt.y); c.stroke();
if(pt.life<=0||pt.x<0||pt.x>w||pt.y<0||pt.y>h){pt.x=rand()*w; pt.y=rand()*h; pt.life=100;}
});
},
HARMONIC: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.05)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, mr=min(w,h)*0.45;
const fx=(p.m%7)+1+(p.s/60), fy=(p.h%5)+2, ph=t*0.001, px=cx+sin(fx*ph+ph)*mr, py=cy+sin(fy*ph)*mr;
d.tr.push({x:px,y:py}); if(d.tr.length>200) d.tr.shift();
if(d.tr.length>1){ c.beginPath(); c.moveTo(d.tr[0].x,d.tr[0].y); for(let i=1;i<d.tr.length;i++)c.lineTo(d.tr[i].x,d.tr[i].y); const hu=(t*0.05)%360; c.strokeStyle=`hsla(${hu},80%,60%,0.8)`; c.lineWidth=2; c.shadowBlur=10; c.shadowColor=`hsl(${hu},80%,60%)`; c.stroke(); c.shadowBlur=0; }
c.fillStyle=’#fff’; c.beginPath(); c.arc(px,py,4,0,PI*2); c.fill();
},
CORTEX: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.4)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2; c.strokeStyle=’rgba(99,102,241,0.15)’; c.lineWidth=1;
d.sy.forEach(s=>{
c.beginPath(); c.moveTo(cx+s.f.x, cy+s.f.y); c.quadraticCurveTo(cx+s.cp.x, cy+s.cp.y, cx+s.t.x, cy+s.t.y); c.stroke();
const ip=((t*(0.001+(p.s*0.00005)))+s.t.p)%2.5;
if(ip<=1){ const pt=getQBez(ip,{x:cx+s.f.x,y:cy+s.f.y},{x:cx+s.cp.x,y:cy+s.cp.y},{x:cx+s.t.x,y:cy+s.t.y}); c.fillStyle=`rgba(165,180,252,${1-ip*0.5})`; c.beginPath(); c.arc(pt.x,pt.y,1.5,0,PI*2); c.fill(); if(ip>0.9){c.fillStyle=’#fff’; c.beginPath(); c.arc(cx+s.t.x, cy+s.t.y, s.t.s*2, 0, PI*2); c.fill();} }
});
d.n.forEach(n=>{ c.fillStyle=’rgba(99,102,241,0.5)’; c.beginPath(); c.arc(cx+n.x, cy+n.y, n.s, 0, PI*2); c.fill(); });
const ss=Array.from(p.raw).reduce((a,b)=>a+parseInt(b),0), cs=10+sin(t*0.005)*5+(ss/10);
c.shadowBlur=25; c.shadowColor=’#c084fc’; c.fillStyle=’#c084fc’; c.beginPath(); c.arc(cx,cy,cs,0,PI*2); c.fill(); c.shadowBlur=0; c.fillStyle=’#fff’; c.beginPath(); c.arc(cx,cy,cs*0.4,0,PI*2); c.fill();
},
STELLAR: (c,w,h,t,p,d) => {
c.fillStyle=’#020617′; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, tm=t*0.0001; c.globalCompositeOperation=’screen’;
d.n.forEach(n=>{ const nx=cx+cos(t*n.rs)*n.cx*0.2, ny=cy+sin(t*n.rs)*n.cy*0.2, g=c.createRadialGradient(nx,ny,0,nx,ny,n.r); g.addColorStop(0,`hsla(${n.h},80%,50%,0.3)`); g.addColorStop(1,’transparent’); c.fillStyle=g; c.beginPath(); c.arc(nx,ny,n.r,0,PI*2); c.fill(); });
c.globalCompositeOperation=’source-over’; c.save(); c.translate(cx,cy); c.strokeStyle=’rgba(255,255,255,0.06)’; c.rotate((p.m/60)*PI*2+(tm)); c.setLineDash([2,8]); c.beginPath(); c.arc(0,0,min(w,h)*0.25,0,PI*2); c.stroke(); c.rotate((p.h/24)*PI*2-(tm*2)); c.setLineDash([10,15]); c.beginPath(); c.arc(0,0,min(w,h)*0.4,0,PI*2); c.stroke(); c.restore(); c.setLineDash([]);
const px=t*0.02; d.s.forEach(s=>{ let sx=(s.x-px*s.d)%w; if(sx<0)sx+=w; s.cx=sx; const a=sin(t*0.003+s.p)>0.8; c.fillStyle=a?’#ffffff’:`rgba(165,180,252,${0.3+s.d*0.5})`; c.beginPath(); c.arc(sx,s.y,s.s*(a?1.5:1),0,PI*2); c.fill(); });
c.strokeStyle=’rgba(129,140,248,0.4)’; c.lineWidth=1; c.shadowBlur=5; c.shadowColor=’#818cf8′;
[p.d%d.s.length, p.mo%d.s.length, p.h%d.s.length, p.m%d.s.length, p.s%d.s.length].forEach((idx)=>{ const an=d.s[idx]; if(!an)return; c.fillStyle=’#fff’; c.beginPath(); c.arc(an.cx,an.y,3,0,PI*2); c.fill(); let ct=0; for(let i=0;i<d.s.length&&ct<2;i++){ if(i===idx)continue; const tg=d.s[i], dt=hypot(an.cx-tg.cx, an.y-tg.y); if(dt<150&&M.abs(an.cx-tg.cx)<w/2){c.beginPath(); c.moveTo(an.cx,an.y); c.lineTo(tg.cx,tg.y); c.stroke(); ct++;} } }); c.shadowBlur=0;
},
QUANTUM: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.3)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, ch=260+(p.s/60)*60, cp=sin(t*0.005)*5+10, g=c.createRadialGradient(cx,cy,0,cx,cy,cp*3);
g.addColorStop(0,`hsla(${ch},100%,70%,0.8)`); g.addColorStop(1,’transparent’); c.fillStyle=g; c.beginPath(); c.arc(cx,cy,cp*3,0,PI*2); c.fill();
c.fillStyle=’#fff’; d.cp.forEach(pt=>{ pt.a+=pt.s; c.beginPath(); c.arc(cx+cos(pt.a)*pt.d*(1+sin(t*0.01)),cy+sin(pt.a)*pt.d*(1+cos(t*0.01)),1,0,PI*2); c.fill(); });
d.o.forEach((o,i)=>{ o.ea+=o.s; c.save(); c.translate(cx,cy); c.rotate(o.t+t*0.0002); c.beginPath(); c.ellipse(0,0,o.rx,o.ry,0,0,PI*2); c.strokeStyle=`hsla(${220+i*10},70%,60%,0.2)`; c.lineWidth=1; c.stroke(); const ex=cos(o.ea)*o.rx, ey=sin(o.ea)*o.ry; c.beginPath(); c.arc(ex,ey,2.5,0,PI*2); c.fillStyle=’#67e8f9′; c.shadowBlur=10; c.shadowColor=’#67e8f9′; c.fill(); c.restore(); });
},
MATRIX: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.15)’; c.fillRect(0,0,w,h); c.font=`bold ${d.fs}px monospace`; c.textAlign=’center’; const ch=p.raw.split(”), ss=fmt(p.s);
d.d.forEach(dp=>{ const tx=ch[M.floor(rand()*ch.length)]||’0′; c.fillStyle=(tx===ss[0]||tx===ss[1])?’#ffffff’:’#818cf8′; if(dp.y>0)c.fillText(tx,dp.x+(d.fs/2),dp.y); dp.y+=dp.s+(p.m/20); if(dp.y>h+d.fs&&rand()>0.95)dp.y=rand()*-100; });
},
NEURAL: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.25)’; c.fillRect(0,0,w,h); const md=(w*0.15)+(p.s*1.5); c.lineWidth=1;
for(let i=0;i<d.n.length;i++){ const n1=d.n[i]; n1.x+=n1.vx; n1.y+=n1.vy; if(n1.x<0||n1.x>w)n1.vx*=-1; if(n1.y<0||n1.y>h)n1.vy*=-1; c.fillStyle=’#818cf8′; c.beginPath(); c.arc(n1.x,n1.y,2,0,PI*2); c.fill(); for(let j=i+1;j<d.n.length;j++){ const n2=d.n[j], dt=hypot(n1.x-n2.x,n1.y-n2.y); if(dt<md){ c.strokeStyle=`rgba(99,102,241,${(1-dt/md)*0.8})`; c.beginPath(); c.moveTo(n1.x,n1.y); c.lineTo(n2.x,n2.y); c.stroke(); if(p.s%5===i%5){ c.fillStyle=’#fff’; const pt=(t*0.001+i)%1; c.beginPath(); c.arc(n1.x+(n2.x-n1.x)*pt,n1.y+(n2.y-n1.y)*pt,1.5,0,PI*2); c.fill(); } } } }
c.fillStyle=’rgba(255,255,255,0.05)’; c.font=`bold ${M.floor(min(w,h)*0.4)}px monospace`; c.textAlign=’center’; c.textBaseline=’middle’; c.fillText(p.s,w/2,h/2);
},
SONAR: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.15)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, r=min(w,h)*0.45, a=(t*0.0015)%(PI*2);
c.strokeStyle=’rgba(79,70,229,0.3)’; c.lineWidth=1; c.beginPath(); c.arc(cx,cy,r,0,PI*2); c.stroke(); c.beginPath(); c.arc(cx,cy,r*0.66,0,PI*2); c.stroke(); c.beginPath(); c.arc(cx,cy,r*0.33,0,PI*2); c.stroke();
c.fillStyle=’rgba(129,140,248,0.15)’; c.beginPath(); c.moveTo(cx,cy); c.arc(cx,cy,r,a-0.4,a,false); c.fill(); c.strokeStyle=’#818cf8′; c.lineWidth=2; c.shadowBlur=10; c.shadowColor=’#818cf8′; c.beginPath(); c.moveTo(cx,cy); c.lineTo(cx+cos(a)*r,cy+sin(a)*r); c.stroke(); c.shadowBlur=0;
if(d.ls!==p.s){ d.ls=p.s; d.b.push({a:rand()*PI*2, r:(p.s/60)*r, l:1}); }
for(let i=d.b.length-1;i>=0;i–){ const b=d.b[i]; b.l-=0.01; if(b.l>0){ const bx=cx+cos(b.a)*b.r, by=cy+sin(b.a)*b.r; c.fillStyle=`rgba(56,189,248,${b.l})`; c.beginPath(); c.arc(bx,by,3,0,PI*2); c.fill(); c.strokeStyle=`rgba(56,189,248,${b.l*0.5})`; c.beginPath(); c.arc(bx,by,10+(1-b.l)*15,0,PI*2); c.stroke(); } else d.b.splice(i,1); }
},
HEXA: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.2)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2;
d.h.forEach(hi => { const dt=hypot(hi.x-cx, hi.y-cy), wv=sin(dt*0.02-t*0.003); if(wv>0.6){ c.beginPath(); for(let i=0;i<6;i++){ const a=(PI/3)*i, px=hi.x+cos(a)*(hi.hs*0.9), py=hi.y+sin(a)*(hi.hs*0.9); if(i===0)c.moveTo(px,py); else c.lineTo(px,py); } c.closePath(); const hu=(p.s*6)+(hi.r*10); c.fillStyle=`hsla(${hu},70%,60%,${wv-0.5})`; c.fill(); c.strokeStyle=`hsla(${hu},80%,70%,0.8)`; c.lineWidth=1; c.stroke(); } });
},
DEEP: (c,w,h,t,p,d) => {
c.fillStyle=’rgba(2,6,23,0.2)’; c.fillRect(0,0,w,h);
const ly=[d.n.filter(n=>n.l===0), d.n.filter(n=>n.l===1), d.n.filter(n=>n.l===2), d.n.filter(n=>n.l===3), d.n.filter(n=>n.l===4)], ps=t*0.002;
for(let l=0;l<ly.length-1;l++){ ly[l].forEach((n1,i)=>{ ly[l+1].forEach((n2,j)=>{ if((p.s%2===0)?(i%2===j%2):(i!==j)){ c.strokeStyle=`rgba(99,102,241,${0.1+sin(ps+l)*0.1})`; c.lineWidth=1; c.beginPath(); c.moveTo(n1.x,n1.y); c.lineTo(n2.x,n2.y); c.stroke(); const lp=((t*0.001)%1+l*0.2)%1; c.fillStyle=’#fff’; c.fillRect(n1.x+(n2.x-n1.x)*lp-1, n1.y+(n2.y-n1.y)*lp-1, 2, 2); } }); }); }
d.n.forEach(n=>{ c.beginPath(); c.arc(n.x,n.y,3,0,PI*2); c.fillStyle=’#818cf8′; c.fill(); });
},
ASTROLABE: (c,w,h,t,p) => {
c.fillStyle=’rgba(2,6,23,0.4)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, mr=min(w,h)*0.42;
const rg=[{v:p.s,m:60,r:mr,c:’#67e8f9′},{v:p.m,m:60,r:mr*0.82,c:’#818cf8′},{v:p.h,m:24,r:mr*0.64,c:’#a78bfa’},{v:p.d,m:31,r:mr*0.46,c:’#f472b6′}];
c.strokeStyle=’rgba(255,255,255,0.05)’; c.lineWidth=1; c.beginPath(); c.arc(cx,cy,mr+10,0,PI*2); c.stroke(); for(let i=0;i<360;i+=15){ const a=i*PI/180; c.beginPath(); c.moveTo(cx+cos(a)*(mr+5), cy+sin(a)*(mr+5)); c.lineTo(cx+cos(a)*(mr+15), cy+sin(a)*(mr+15)); c.stroke(); }
rg.forEach((ri,i)=>{ c.save(); c.translate(cx,cy); const ra=(ri.v/ri.m)*PI*2+(t*0.0002*(i%2===0?1:-1))-PI/2; c.rotate(ra); c.strokeStyle=’rgba(255,255,255,0.03)’; c.lineWidth=14; c.beginPath(); c.arc(0,0,ri.r,0,PI*2); c.stroke(); c.strokeStyle=ri.c; c.lineWidth=2; c.beginPath(); c.arc(0,0,ri.r,0,PI*2); c.stroke(); c.fillStyle=ri.c; c.font=’10px monospace’; c.textAlign=’center’; c.textBaseline=’middle’; const tk=ri.m>31?(ri.m/5):ri.m; for(let tkv=0;tkv<ri.m;tkv++){ const ta=(tkv/ri.m)*PI*2, im=ri.m===60?tkv%5===0:true; c.beginPath(); c.moveTo(cos(ta)*(ri.r-(im?4:2)), sin(ta)*(ri.r-(im?4:2))); c.lineTo(cos(ta)*(ri.r+(im?4:2)), sin(ta)*(ri.r+(im?4:2))); c.strokeStyle=im?ri.c:’rgba(255,255,255,0.2)’; c.lineWidth=im?2:1; c.stroke(); if(im){ c.save(); c.translate(cos(ta)*(ri.r-14), sin(ta)*(ri.r-14)); c.rotate(ta+PI/2); c.fillStyle=’rgba(255,255,255,0.4)’; c.fillText(tkv,0,0); c.restore(); } } c.shadowBlur=10; c.shadowColor=ri.c; c.beginPath(); c.arc(ri.r,0,5,0,PI*2); c.fill(); c.fillStyle=’#fff’; c.beginPath(); c.arc(ri.r,0,2,0,PI*2); c.fill(); c.shadowBlur=0; c.strokeStyle=’rgba(255,255,255,0.1)’; c.lineWidth=1; c.beginPath(); c.moveTo(0,0); c.lineTo(ri.r,0); c.stroke(); c.restore(); });
c.shadowBlur=15; c.shadowColor=’#fff’; c.beginPath(); c.arc(cx,cy,10,0,PI*2); c.fillStyle=’#fff’; c.fill(); c.shadowBlur=0; c.beginPath(); c.arc(cx,cy,4,0,PI*2); c.fillStyle=’#000′; c.fill();
},
SPIRAL: (c,w,h,t,p) => {
c.fillStyle=’rgba(2,6,23,0.2)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, np=250+p.s*3, ao=137.5+(sin(t*0.0005)*(p.m/10));
for(let i=0;i<np;i++){ const a=i*(ao*PI/180), r=7*M.sqrt(i), x=cx+r*cos(a+t*0.0002), y=cy+r*sin(a+t*0.0002), hu=(p.s*6)+(i%100); c.fillStyle=`hsl(${hu},70%,60%)`; c.beginPath(); c.arc(x,y,1.5+sin(t*0.005+i)*1,0,PI*2); c.fill(); }
},
SPECTRUM: (c,w,h,t,p) => {
c.fillStyle=’rgba(2,6,23,0.2)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, mr=min(w,h)*0.4, v=[p.y,p.mo,p.d,p.h,p.m,p.s], lb=[‘YY’,’MM’,’DD’,’HH’,’mm’,’SS’], mv=[99,12,31,24,60,60], st=(PI*2)/v.length; c.lineWidth=min(w,h)*0.08; c.lineCap=’round’;
v.forEach((val,i)=>{ const no=val/(mv[i]||100), a=i*st-PI/2, sw=(st*0.8)*no+0.01, r=mr-(sin(t*0.005+i)*5); c.strokeStyle=’rgba(255,255,255,0.05)’; c.beginPath(); c.arc(cx,cy,r,a,a+st*0.8); c.stroke(); c.strokeStyle=`hsl(${(p.s*6+i*60)%360},80%,60%)`; c.beginPath(); c.arc(cx,cy,r,a,a+sw); c.stroke(); c.fillStyle=’#fff’; c.font=’10px monospace’; c.textAlign=’center’; c.textBaseline=’middle’; c.fillText(lb[i], cx+cos(a+sw/2)*(r*0.7), cy+sin(a+sw/2)*(r*0.7)); });
},
HELIX: (c,w,h,t,p) => {
c.fillStyle=’rgba(2,6,23,0.4)’; c.fillRect(0,0,w,h); const cy=h/2, am=h*0.3, fq=0.015, sp=t*0.0015, cl=[‘#38bdf8′,’#818cf8′,’#c084fc’,’#f472b6′];
for(let x=-50;x<w+50;x+=15){ const a=x*fq+sp, z1=cos(a), z2=cos(a+PI), y1=cy+sin(a)*am, y2=cy+sin(a+PI)*am, sc1=(z1+2)/3, sc2=(z2+2)/3, op1=(z1+1.5)/2.5, op2=(z2+1.5)/2.5; if(x%30===0&&x>0&&x<w){ const pc=cl[(parseInt(p.raw[(x/30)%p.raw.length])||0)%4], lg=c.createLinearGradient(x,y1,x,y2); lg.addColorStop(0,`rgba(56,189,248,${op1*0.5})`); lg.addColorStop(0.5,pc); lg.addColorStop(1,`rgba(192,132,252,${op2*0.5})`); c.strokeStyle=lg; c.lineWidth=2*((sc1+sc2)/2); c.beginPath(); c.moveTo(x,y1); c.lineTo(x,y2); c.stroke(); const my=(y1+y2)/2; c.fillStyle=pc; c.shadowBlur=10; c.shadowColor=pc; c.beginPath(); c.arc(x,my-2,3*((sc1+sc2)/2),0,PI*2); c.fill(); c.beginPath(); c.arc(x,my+2,3*((sc1+sc2)/2),0,PI*2); c.fill(); c.shadowBlur=0; } c.fillStyle=`rgba(56,189,248,${op1})`; c.beginPath(); c.arc(x,y1,4*sc1,0,PI*2); c.fill(); c.fillStyle=`rgba(192,132,252,${op2})`; c.beginPath(); c.arc(x,y2,4*sc2,0,PI*2); c.fill(); }
c.fillStyle=’rgba(255,255,255,0.4)’; for(let i=0;i<p.s;i++){ c.beginPath(); c.arc((t*0.05+i*50)%w, (cy-am-50)+M.abs(sin(i*77+t*0.001))*(am*2+100), 1+(i%2), 0, PI*2); c.fill(); }
},
KALEIDO: (c,w,h,t,p) => {
c.fillStyle=’rgba(2,6,23,0.2)’; c.fillRect(0,0,w,h); const cx=w/2, cy=h/2, sl=12, a=(PI*2)/sl, r=min(w,h)*0.45, tm=t*0.0005;
for(let i=0;i<sl;i++){ c.save(); c.translate(cx,cy); if(i%2===0)c.scale(1,-1); c.rotate(i*a+tm*(p.m/60+0.5)); c.beginPath(); c.moveTo(0,0); c.bezierCurveTo((p.d/31)*r+sin(tm)*20, (p.h/24)*r, (p.m/60)*r, (p.s/60)*r+cos(tm)*20, r, 0); c.lineTo(r*0.6, r*0.2); c.closePath(); const hu=(p.s*6)+(i*15); c.fillStyle=`hsla(${hu},70%,50%,0.3)`; c.fill(); c.strokeStyle=`hsla(${hu},80%,70%,0.8)`; c.lineWidth=1; c.stroke(); c.restore(); }
c.beginPath(); c.arc(cx,cy,10+sin(tm)*5,0,PI*2); c.fillStyle=’#fff’; c.fill();
}
};
// — RENDER LOOP —
function renderLoop(time) {
const dpr = window.devicePixelRatio || 1;
const rawW = els.canvas.clientWidth, rawH = els.canvas.clientHeight;
if (rawW === 0 || rawH === 0) { requestAnimationFrame(renderLoop); return; }
const tw = M.floor(rawW * dpr), th = M.floor(rawH * dpr);
if (els.canvas.width !== tw || els.canvas.height !== th || visState.mode !== state.visMode) {
els.canvas.width = tw; els.canvas.height = th; ctx.scale(dpr, dpr);
visState = { mode: state.visMode, w: rawW, h: rawH, data: initVisualizerData(state.visMode, rawW, rawH) };
}
try {
const rnd = renderers[state.visMode];
if (rnd) rnd(ctx, rawW, rawH, time, state.params, visState.data);
else { ctx.fillStyle=’#020617′; ctx.fillRect(0,0,rawW,rawH); }
} catch(e) { console.error(“Render Error:”, e); }
requestAnimationFrame(renderLoop);
}
updateSeed(); requestAnimationFrame(renderLoop);
</script>
</body>
</html>
