Dot Reveal Card — Free HTML CSS JS Canvas Hover Snippet

<div class="cr-grid" id="crGrid">
  <article class="cr-card" style="--c1:#6366f1;--c2:#22d3ee">
    <canvas class="cr-canvas"></canvas>
    <div class="cr-face"><span class="cr-icon">⚡</span></div>
    <div class="cr-hover"><h3>Fast</h3><p>Edge-deployed, sub-50ms responses worldwide.</p></div>
  </article>
  <article class="cr-card" style="--c1:#ec4899;--c2:#f59e0b">
    <canvas class="cr-canvas"></canvas>
    <div class="cr-face"><span class="cr-icon">🛡</span></div>
    <div class="cr-hover"><h3>Secure</h3><p>End-to-end encryption with zero-knowledge storage.</p></div>
  </article>
  <article class="cr-card" style="--c1:#34d399;--c2:#10b981">
    <canvas class="cr-canvas"></canvas>
    <div class="cr-face"><span class="cr-icon">∞</span></div>
    <div class="cr-hover"><h3>Scalable</h3><p>Autoscale from zero to millions without a config.</p></div>
  </article>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#06060d;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px}

.cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:760px}
.cr-card{position:relative;aspect-ratio:4/5;border-radius:18px;border:1px solid #1f1f33;background:#0c0c18;overflow:hidden;cursor:pointer}
.cr-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s}
.cr-card:hover .cr-canvas{opacity:1}

.cr-face{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.cr-card:hover .cr-face{opacity:0}
.cr-icon{width:60px;height:60px;border-radius:16px;background:#15152a;border:1px solid #2a2a44;display:flex;align-items:center;justify-content:center;font-size:28px}

.cr-hover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.cr-card:hover .cr-hover{opacity:1;transform:none}
.cr-hover h3{font-size:22px;font-weight:800}
.cr-hover p{font-size:13px;color:rgba(255,255,255,.8);line-height:1.5}

@media(max-width:620px){.cr-grid{grid-template-columns:1fr}.cr-card{aspect-ratio:16/7}}

var cards = Array.prototype.slice.call(document.querySelectorAll('.cr-card'));

cards.forEach(function (card) {
  var canvas = card.querySelector('.cr-canvas');
  var ctx = canvas.getContext('2d');
  var cs = getComputedStyle(card);
  var colors = [cs.getPropertyValue('--c1').trim(), cs.getPropertyValue('--c2').trim()];
  var dots = [], raf = null, gap = 14, dpr = Math.min(devicePixelRatio || 1, 2);

  function build() {
    var w = canvas.clientWidth, h = canvas.clientHeight;
    canvas.width = w * dpr; canvas.height = h * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    dots = [];
    for (var y = gap / 2; y < h; y += gap) {
      for (var x = gap / 2; x < w; x += gap) {
        dots.push({ x: x, y: y, c: colors[Math.floor(Math.random() * 2)],
          // each dot has its own delay so the matrix fills in organically
          delay: Math.random() * 600, t0: 0 });
      }
    }
  }

  function draw(now) {
    var w = canvas.clientWidth, h = canvas.clientHeight;
    ctx.clearRect(0, 0, w, h);
    dots.forEach(function (d) {
      var p = Math.max(0, Math.min(1, (now - d.t0 - d.delay) / 400));
      if (p <= 0) return;
      ctx.globalAlpha = p * 0.9;
      ctx.fillStyle = d.c;
      ctx.fillRect(d.x - 1, d.y - 1, 2, 2);
    });
    raf = requestAnimationFrame(draw);
  }

  card.addEventListener('pointerenter', function () {
    var start = performance.now();
    dots.forEach(function (d) { d.t0 = start; });
    if (!raf) raf = requestAnimationFrame(draw);
  });
  card.addEventListener('pointerleave', function () {
    cancelAnimationFrame(raf); raf = null;
    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
  });

  build();
  window.addEventListener('resize', build);
});