Vertex Agency Site

const draw = (index: number) => {
  const bmp = frames[index] ?? nearestLoaded(index);
  if (!bmp) return false;
  const scale = Math.max(canvas.width / bmp.width, canvas.height / bmp.height);
  const w = bmp.width * scale;
  const h = bmp.height * scale;
  ctx.drawImage(bmp, (canvas.width - w) / 2, (canvas.height - h) / 2, w, h);
  return true;
};

const tick = () => {
  current += (target - current) * 0.12;   // easing toward scroll position
  draw(Math.round(current));
  raf = requestAnimationFrame(tick);
};

const limit = navigator.hardwareConcurrency > 4 ? 6 : 3;

export async function loadFrames(urls: string[], onProgress: (n: number) => void) {
  let i = 0, done = 0;
  const workers = Array.from({ length: limit }, async () => {
    while (i < urls.length) {
      const index = i++;
      const res = await fetch(urls[index]);
      frames[index] = await createImageBitmap(await res.blob());
      onProgress(++done / urls.length);
    }
  });
  await Promise.all(workers);
}