Canvas Pixelate Image Reveal — Free Scroll/Hover Sharpen Effect

<section class="pxr-wrap">
  <span class="pxr-tag">canvas 2d · intersectionobserver</span>
  <h1>Pixelate reveal</h1>
  <p>Scroll the card into view, or hover it, to sharpen from a tiny mosaic to full detail.</p>

  <div class="pxr-grid">
    <div class="pxr-card" data-seed="1">
      <canvas class="pxr-canvas"></canvas>
      <span class="pxr-label">Aurora</span>
    </div>
    <div class="pxr-card" data-seed="2">
      <canvas class="pxr-canvas"></canvas>
      <span class="pxr-label">Ember</span>
    </div>
    <div class="pxr-card" data-seed="3">
      <canvas class="pxr-canvas"></canvas>
      <span class="pxr-label">Tidepool</span>
    </div>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#07070d;color:#fff;min-height:100vh;padding:60px 20px}
.pxr-wrap{max-width:920px;margin:0 auto;text-align:center}
.pxr-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fca5a5;background:rgba(252,165,165,.1);border:1px solid rgba(252,165,165,.3);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.pxr-wrap h1{font-size:clamp(28px,6vw,42px);font-weight:800;letter-spacing:-.03em}
.pxr-wrap p{font-size:14px;color:#b3aab8;margin-top:8px}
.pxr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:36px}
.pxr-card{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);cursor:pointer}
.pxr-canvas{display:block;width:100%;height:100%}
.pxr-label{position:absolute;left:14px;bottom:12px;font-size:14px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.7)}

var cards = document.querySelectorAll('.pxr-card');

var PALETTES = [
  ['#7c3aed', '#f472b6', '#22d3ee'],
  ['#f97316', '#facc15', '#ef4444'],
  ['#0ea5e9', '#22c55e', '#a3e635']
];

function paintSource(sctx, w, h, seedIndex) {
  var colors = PALETTES[seedIndex % PALETTES.length];
  var grad = sctx.createLinearGradient(0, 0, w, h);
  grad.addColorStop(0, colors[0]);
  grad.addColorStop(0.55, colors[1]);
  grad.addColorStop(1, colors[2]);
  sctx.fillStyle = grad;
  sctx.fillRect(0, 0, w, h);

  sctx.globalAlpha = 0.85;
  for (var i = 0; i < 5; i++) {
    sctx.beginPath();
    var r = (0.12 + Math.random() * 0.22) * Math.min(w, h);
    var cx = Math.random() * w;
    var cy = Math.random() * h;
    sctx.fillStyle = colors[(i + 1) % colors.length];
    sctx.arc(cx, cy, r, 0, Math.PI * 2);
    sctx.fill();
  }
  sctx.globalAlpha = 1;
}

function setupCard(card, seedIndex) {
  var canvas = card.querySelector('.pxr-canvas');
  var ctx = canvas.getContext('2d');
  var W = 320, H = 240;
  canvas.width = W;
  canvas.height = H;

  // Render the "full detail" source once at native resolution into an
  // offscreen canvas — this never gets redrawn small, so quality never
  // degrades across repeated reveals.
  var src = document.createElement('canvas');
  src.width = W; src.height = H;
  var sctx = src.getContext('2d');
  paintSource(sctx, W, H, seedIndex);

  var MIN_CELLS = 6;   // heavily pixelated
  var MAX_CELLS = 96;  // effectively full detail
  var current = MIN_CELLS;
  var target = MIN_CELLS;
  var raf = null;

  // Downscale the source to a tiny cells-wide canvas, then draw that tiny
  // canvas back up to full size with image smoothing disabled — the browser's
  // own nearest-neighbor upscale is what produces crisp pixel blocks.
  function drawAtResolution(cells) {
    var tiny = document.createElement('canvas');
    tiny.width = cells;
    tiny.height = Math.max(1, Math.round(cells * (H / W)));
    var tctx = tiny.getContext('2d');
    tctx.imageSmoothingEnabled = true;
    tctx.drawImage(src, 0, 0, tiny.width, tiny.height);

    ctx.imageSmoothingEnabled = false;
    ctx.clearRect(0, 0, W, H);
    ctx.drawImage(tiny, 0, 0, tiny.width, tiny.height, 0, 0, W, H);
  }

  function animate() {
    current += (target - current) * 0.12;
    if (Math.abs(target - current) < 0.4) current = target;
    drawAtResolution(Math.round(current));
    if (current !== target) {
      raf = requestAnimationFrame(animate);
    } else {
      raf = null;
    }
  }

  function reveal() {
    target = MAX_CELLS;
    if (!raf) raf = requestAnimationFrame(animate);
  }
  function hide() {
    target = MIN_CELLS;
    if (!raf) raf = requestAnimationFrame(animate);
  }

  drawAtResolution(MIN_CELLS);

  card.addEventListener('mouseenter', reveal);
  card.addEventListener('mouseleave', hide);
  card.addEventListener('touchstart', reveal, { passive: true });

  return { reveal: reveal, hide: hide };
}

var controllers = [];
cards.forEach(function (card, i) {
  controllers.push({ el: card, ctrl: setupCard(card, i) });
});

// Also reveal automatically the first time each card scrolls into view, so
// the effect works on scroll-triggered pages without requiring hover.
if ('IntersectionObserver' in window) {
  var seen = new WeakSet();
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting && !seen.has(entry.target)) {
        seen.add(entry.target);
        var match = controllers.find(function (c) { return c.el === entry.target; });
        if (match) match.ctrl.reveal();
      }
    });
  }, { threshold: 0.4 });
  controllers.forEach(function (c) { io.observe(c.el); });
}