Scroll Canvas Starfield Warp Speed — Perspective-Projected Canvas2D Stars

<section class="wsp-stage" id="wspStage">
  <div class="wsp-intro-overlay"><p>Scroll ↓ to jump to warp speed</p></div>
  <canvas id="wspCanvas"></canvas>
  <div class="wsp-hud"><span id="wspPct">0</span>% warp</div>
</section>
<section class="wsp-bottom"><p>A perspective-projected starfield, accelerating with your scroll.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#020208;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.wsp-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8a97c9;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.wsp-stage{height:100vh;position:relative;overflow:hidden;background:#020208}
.wsp-intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#dfe6ff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.7);transition:opacity .4s ease}
#wspCanvas{display:block;width:100%;height:100%}
.wsp-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#b7c4ff;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('wspCanvas');
const ctx = canvas.getContext('2d');
const pctEl = document.getElementById('wspPct');
const introEl = document.querySelector('.wsp-intro-overlay');

const DPR = Math.min(window.devicePixelRatio || 1, 2);
let W = 0, H = 0, CX = 0, CY = 0;

const COUNT = 700;
// x, y are fixed 3D-ish coordinates on a plane centered at the origin;
// z is depth, decreasing toward the camera every frame. prevScreenX/Y cache
// last frame's projected 2D position so each star can be drawn as a short
// streak from its previous projection to its current one.
const sx = new Float32Array(COUNT);
const sy = new Float32Array(COUNT);
const sz = new Float32Array(COUNT);
const prevScreenX = new Float32Array(COUNT);
const prevScreenY = new Float32Array(COUNT);
const hasPrev = new Uint8Array(COUNT);

function seedStar(i, randomizeZ) {
  sx[i] = (Math.random() * 2 - 1) * 1000;
  sy[i] = (Math.random() * 2 - 1) * 1000;
  sz[i] = randomizeZ ? Math.random() * 1000 + 40 : 1000;
  hasPrev[i] = 0;
}

function resize() {
  W = canvas.clientWidth; H = canvas.clientHeight;
  CX = W / 2; CY = H / 2;
  canvas.width = Math.floor(W * DPR);
  canvas.height = Math.floor(H * DPR);
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
  ctx.fillStyle = '#020208';
  ctx.fillRect(0, 0, W, H);
  for (let i = 0; i < COUNT; i++) seedStar(i, true);
}

gsap.registerPlugin(ScrollTrigger);
// Two scroll-driven states: warp climbs 0 -> 1 scrolling down through the
// pinned stage, and never resets while scrolling back up it eases back to
// 0 in the exact same scrubbed fashion -- full reversibility for free.
const warpState = { t: 0 };
gsap.to(warpState, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#wspStage',
    start: 'top top',
    end: '+=350%',
    scrub: 0.6,
    pin: true,
  },
});

const focalLength = 300;

function draw() {
  requestAnimationFrame(draw);
  const warp = warpState.t;
  if (introEl) introEl.style.opacity = (warp > 0.03) ? '0' : '1';

  const speed = 2 + warp * warp * 46;

  // A low-alpha fill instead of clearRect leaves faint streak trails behind
  // fast-moving stars near warp speed, reinforcing the sense of velocity.
  ctx.fillStyle = 'rgba(2, 2, 8, ' + (0.35 + warp * 0.25).toFixed(3) + ')';
  ctx.fillRect(0, 0, W, H);

  for (let i = 0; i < COUNT; i++) {
    sz[i] -= speed;
    if (sz[i] <= 1) {
      seedStar(i, false);
      continue;
    }

    const scale = focalLength / sz[i];
    const screenX = CX + sx[i] * scale;
    const screenY = CY + sy[i] * scale;

    if (screenX < -50 || screenX > W + 50 || screenY < -50 || screenY > H + 50) {
      seedStar(i, false);
      continue;
    }

    const brightness = Math.min(1, (1000 - sz[i]) / 1000);
    const radius = 0.4 + brightness * 2.2;

    if (hasPrev[i]) {
      ctx.strokeStyle = 'rgba(200, 210, 255, ' + (0.25 + brightness * 0.6).toFixed(2) + ')';
      ctx.lineWidth = radius;
      ctx.beginPath();
      ctx.moveTo(prevScreenX[i], prevScreenY[i]);
      ctx.lineTo(screenX, screenY);
      ctx.stroke();
    }

    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, ' + (0.55 + brightness * 0.45).toFixed(2) + ')';
    ctx.arc(screenX, screenY, radius * 0.5, 0, Math.PI * 2);
    ctx.fill();

    prevScreenX[i] = screenX;
    prevScreenY[i] = screenY;
    hasPrev[i] = 1;
  }

  pctEl.textContent = Math.round(warp * 100);
}

resize();
window.addEventListener('resize', resize);
draw();