SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/assetts/bg/3.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>GAYLORD SINCLAIR — Cracked Letters • Orbit • Explode</title>
<style>
  :root{ --bg0:#050812; --bg1:#070b16; }
  html,body{height:100%;margin:0;overflow:hidden;background:
    radial-gradient(1200px 800px at 50% 30%, rgba(123,98,255,.16), transparent 60%),
    radial-gradient(900px 600px at 70% 60%, rgba(106,224,255,.10), transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  }
  canvas{position:fixed; inset:0; width:100%; height:100%; display:block;}
  .hud{
    position:fixed; left:14px; bottom:14px; z-index:10;
    color:rgba(234,242,255,.72);
    font:12px ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    letter-spacing:.06em; user-select:none; pointer-events:none;
    text-shadow:0 0 18px rgba(106,224,255,.12);
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="hud">Click = force explode • Auto loop</div>

const DPR_MAX = 2.25;
  let DPR = Math.min(DPR_MAX, window.devicePixelRatio || 1);
  let W=0, H=0;

const rnd=(a,b)=>a+Math.random()*(b-a);
  const clamp=(x,a,b)=>Math.max(a,Math.min(b,x));

function resize(){
    DPR = Math.min(DPR_MAX, window.devicePixelRatio || 1);
    W = innerWidth|0; H = innerHeight|0;
    canvas.width = Math.floor(W*DPR);
    canvas.height= Math.floor(H*DPR);
    ctx.setTransform(DPR,0,0,DPR,0,0);
  }
  addEventListener('resize', resize, {passive:true});
  resize();

// ---- Background dust
  const dust=[];
  function seedDust(){
    dust.length=0;
    const N = clamp(Math.floor(W/10), 120, 260);
    for(let i=0;i<N;i++){
      dust.push({x:rnd(0,W), y:rnd(0,H), r:rnd(0.6,2.2), a:rnd(0.04,0.16), ph:rnd(0,6.28), tw:rnd(0.6,1.8), vx:rnd(-0.10,0.10), vy:rnd(-0.06,0.06)});
    }
  }
  seedDust();
  addEventListener('resize', seedDust, {passive:true});

// ---- Word setup
  const TEXT = "GAYLORD SINCLAIR";
  let fontSize = 96;

// ---- "Cracked" letter pieces
  const pieces = []; // each piece is a small shard associated with a letter
  const sparks = [];
  const MAX_SPARKS = 7000;

// build shards arranged into letters, each letter is "cracked" into multiple pieces
  function buildPieces(){
    pieces.length = 0;
    const L = layoutText();
    let x = L.x0;
    const cx = W*0.5, cy = H*0.5;

for(let i=0;i<L.chars.length;i++){
      const ch = L.chars[i];
      const w = L.widths[i];
      const lx = x + w*0.5;
      const ly = L.y0;
      x += w;

if(ch === " ") continue;

const hueBase = rnd(190, 320);
      // number of cracks per letter
      const shardCount = Math.floor(rnd(5, 9));

for(let s=0;s<shardCount;s++){
        // shard "offset" within the letter (fake crack)
        const ox = rnd(-w*0.22, w*0.22);
        const oy = rnd(-fontSize*0.18, fontSize*0.18);

// initial orbit params (each shard flies in circles)
        const ang0 = rnd(0, Math.PI*2);
        const rad0 = rnd(18, 120) * (0.7 + Math.min(1, W/1400));
        const omega = rnd(0.8, 2.6) * (rnd(0,1)<0.5?-1:1);

pieces.push({
          ch,
          // home
          hx: lx + ox, hy: ly + oy,
          // position starts near home
          x: lx + ox, y: ly + oy,
          // orbit around a personal center that drifts around global center
          cx: cx + rnd(-60,60),
          cy: cy + rnd(-50,50),
          ang: ang0,
          rad: rad0,
          omega,
          // render
          rot: rnd(-0.8, 0.8),
          vr: rnd(-2.4, 2.4),
          sc: rnd(0.30, 0.55), // shard scale
          a: 1,
          hue: hueBase + rnd(-18,18),
          // motion for explode
          vx: 0, vy: 0,
          // per shard jitter
          jph: rnd(0,6.28),
          jsp: rnd(0.8, 2.1),
          // grouping: stable letter index
          li: i
        });
      }
    }
  }

// phases:
  // 0 orbit (cracked letters flying in circles)
  // 1 explode (all shards blast out)
  // 2 settle / regroup back into word (rebuild)
  let phase = 0;
  let phaseT0 = performance.now();
  const PHASE_MS = [5200, 900, 2200];

function setPhase(p, now){
    phase = p;
    phaseT0 = now;
  }

function explode(now){
    const cx = W*0.5, cy = H*0.5;
    setPhase(1, now);

for(const P of pieces){
      const dx = (P.x - cx) + rnd(-40,40);
      const dy = (P.y - cy) + rnd(-40,40);
      const d = Math.sqrt(dx*dx + dy*dy) + 1;
      const nx = dx/d, ny = dy/d;
      const punch = rnd(720, 1700);
      P.vx = nx*punch + rnd(-360,360);
      P.vy = ny*punch + rnd(-360,360);
      P.vr = rnd(-12, 12);
    }
    spawnSparks(cx, cy, 1400, rnd(190,320));
  }

function resetLoop(now){
    buildPieces();
    setPhase(0, now);
    spawnSparks(W*0.5, H*0.5, 220, rnd(190,320));
  }

resetLoop(performance.now());
  addEventListener('resize', ()=> resetLoop(performance.now()), {passive:true});

addEventListener('pointerdown', () => explode(performance.now()), {passive:true});

// ---- Main loop
  let last = performance.now();

function tick(now){
    const dt = Math.min(0.033, (now - last)/1000);
    last = now;

// trails
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgba(0,0,0,0.18)';
    ctx.fillRect(0,0,W,H);

// dust
    for(const d of dust){
      d.ph += 0.010*d.tw;
      d.x += d.vx; d.y += d.vy;
      if(d.x < -10) d.x = W+10; if(d.x > W+10) d.x = -10;
      if(d.y < -10) d.y = H+10; if(d.y > H+10) d.y = -10;
      const tw = 0.5 + 0.5*Math.sin(d.ph + now*0.001);
      const a = d.a*(0.6 + 0.9*tw);
      ctx.beginPath();
      ctx.arc(d.x, d.y, d.r*(0.85+0.35*tw), 0, Math.PI*2);
      ctx.fillStyle = `rgba(234,242,255,${a})`;
      ctx.fill();
    }

// phase timer
    const dur = PHASE_MS[phase] || 1200;
    const p = clamp((now - phaseT0)/dur, 0, 1);

// auto transitions
    if(phase === 0 && p >= 1){
      explode(now);
    } else if(phase === 1 && p >= 1){
      setPhase(2, now);
    } else if(phase === 2 && p >= 1){
      resetLoop(now);
    }

const t = now*0.001;
    const cx = W*0.5, cy = H*0.5;

// draw shards
    ctx.save();
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.font = `1000 ${fontSize}px ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial`;

for(const P of pieces){
      // update motion per phase
      if(phase === 0){
        // orbit: each shard loops in circles; centers gently swirl
        P.jph += dt * P.jsp;
        const swirl = 0.5 + 0.5*Math.sin(t*0.6 + P.li*0.2);

// drift shard orbit center around global center
        const driftR = 90 + 120*swirl;
        const driftA = t*0.30 + P.li*0.06;
        P.cx = cx + Math.cos(driftA)*driftR;
        P.cy = cy + Math.sin(driftA)*driftR*0.7;

// orbit itself
        P.ang += dt * P.omega * (1.0 + 0.6*swirl);
        const ox = Math.cos(P.ang) * P.rad;
        const oy = Math.sin(P.ang) * P.rad * 0.7;

// bias toward the word's home position so it's still "GAYLORD SINCLAIR"
        const homePull = 0.06;
        P.x += ( (P.cx+ox) - P.x ) * (1 - Math.pow(1-homePull, dt*60));
        P.y += ( (P.cy+oy) - P.y ) * (1 - Math.pow(1-homePull, dt*60));

P.rot += dt * P.vr * 0.18;

// occasional micro-sparkle
        if(Math.random() < 0.02){
          spawnSparks(P.x, P.y, 2, P.hue);
        }

} else if(phase === 1){
        // explode: ballistic with slight drag + gravity
        const GRAV = 720;
        P.vy += GRAV*dt;
        P.vx *= Math.pow(0.985, dt*60);
        P.vy *= Math.pow(0.985, dt*60);
        P.x  += P.vx*dt;
        P.y  += P.vy*dt;
        P.rot += P.vr*dt;

// fade a touch
        P.a *= 0.997;

// spark trail
        if(Math.random() < 0.25){
          spawnSparks(P.x, P.y, 1, P.hue);
        }

} else if(phase === 2){
        // regroup: smoothly return to home, with a soft wobble
        const wob = 0.5 + 0.5*Math.sin(t*2.2 + P.li*0.6);
        const ret = 0.09 + 0.14*p;
        P.x += (P.hx - P.x) * (1 - Math.pow(1-ret, dt*60));
        P.y += (P.hy - P.y) * (1 - Math.pow(1-ret, dt*60));
        P.rot *= Math.pow(0.90, dt*60);
        P.a += (1 - P.a) * (1 - Math.pow(0.94, dt*60));
        if(Math.random() < 0.03 + 0.05*wob){
          spawnSparks(P.x, P.y, 1, P.hue);
        }
      }

// render shard as “cracked” piece: clipped by drawing same letter smaller + offset
      const hue = P.hue + 40*Math.sin(t*0.7 + P.jph);
      const glow = 14 + 22*(0.5+0.5*Math.sin(t*1.3 + P.li));

ctx.save();
      ctx.translate(P.x, P.y);
      ctx.rotate(P.rot);
      ctx.scale(P.sc, P.sc);

ctx.globalCompositeOperation = 'screen';
      ctx.globalAlpha = clamp(P.a, 0, 1);

// shard look: draw letter twice with offsets as if it's a cracked segment
      ctx.shadowColor = `hsla(${hue}, 98%, 72%, 0.30)`;
      ctx.shadowBlur = glow;
      ctx.fillStyle = `hsla(${hue}, 98%, 78%, 0.88)`;
      ctx.fillText(P.ch, rnd(-1.2,1.2), rnd(-1.2,1.2));

ctx.shadowBlur = glow*1.15;
      ctx.fillStyle = `rgba(255,255,255,0.52)`;
      ctx.fillText(P.ch, rnd(-0.8,0.8), rnd(-0.8,0.8));

// tiny crack-line overlay (fake)
      ctx.globalAlpha *= 0.55;
      ctx.lineWidth = 2;
      ctx.strokeStyle = `hsla(${hue+40}, 100%, 76%, 0.45)`;
      ctx.beginPath();
      ctx.moveTo(rnd(-fontSize*0.10, fontSize*0.10), rnd(-fontSize*0.12, fontSize*0.12));
      ctx.lineTo(rnd(-fontSize*0.10, fontSize*0.10), rnd(-fontSize*0.12, fontSize*0.12));
      ctx.stroke();

ctx.restore();
    }
    ctx.restore();

// sparks
    ctx.save();
    ctx.globalCompositeOperation = 'screen';
    for(let i=sparks.length-1;i>=0;i--){
      const s = sparks[i];
      s.age += dt*1000;
      const k = s.age / s.life;
      if(k >= 1){ sparks.splice(i,1); continue; }

s.ph += dt*s.tw*6;
      s.vx *= Math.pow(s.drag, dt*60);
      s.vy *= Math.pow(s.drag, dt*60);
      s.vy += 240*dt;

s.x += s.vx*dt;
      s.y += s.vy*dt;

const tw = 0.5 + 0.5*Math.sin(s.ph);
      const a = s.a * (1-k) * (0.55 + 0.65*tw);

ctx.beginPath();
      ctx.arc(s.x, s.y, s.r*(0.85 + 0.65*(1-k)), 0, Math.PI*2);
      ctx.fillStyle = `hsla(${s.hue}, 100%, 74%, ${a})`;
      ctx.fill();
    }
    ctx.restore();

requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump