<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Dither Dot Grid — Hero Card</title> <style> :root{ --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ display:flex;align-items:center;justify-content:center;min-height:100vh;padding:28px; background:#f4f4f5;font-family:var(--font);-webkit-font-smoothing:antialiased; } .card{ position:relative;width:100%;max-width:620px;aspect-ratio:1.85/1;border-radius:18px;overflow:hidden; container-type:inline-size;cursor:crosshair; background:radial-gradient(120% 130% at 72% -10%, #17171f 0%, #0c0c11 52%, #08080b 100%); box-shadow:0 40px 80px -30px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05); animation:cardIn .8s cubic-bezier(.22,1,.36,1) both; } @keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}} canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .overlay{position:absolute;inset:0;padding:clamp(18px,4.4cqi,46px);pointer-events:none;color:#fff} .brand{display:inline-flex;align-items:center;gap:8px;opacity:0;animation:fade .7s .15s ease both} .brand svg{width:clamp(15px,2cqi,20px);height:clamp(15px,2cqi,20px)} .brand span{font-size:clamp(14px,2cqi,19px);font-weight:600;letter-spacing:-.2px} .headline{ position:absolute;top:clamp(18px,4.4cqi,46px);right:clamp(18px,4.4cqi,46px); text-align:left;font-weight:700;letter-spacing:-.03em;line-height:1.04; font-size:clamp(26px,7cqi,60px); } .line{display:block;overflow:hidden} .line > span{display:inline-block;transform:translateY(110%);will-change:transform} .line:nth-child(1) > span{animation:rise .7s .28s cubic-bezier(.22,1,.36,1) both} .line:nth-child(2) > span{animation:rise .7s .40s cubic-bezier(.22,1,.36,1) both} .dim{ background:linear-gradient(100deg,#6f6f7a 0%,#9a9aa6 45%,#6f6f7a 70%); background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:shimmer 5.5s linear infinite; } @keyframes rise{to{transform:none}} @keyframes fade{to{opacity:1}} @keyframes shimmer{to{background-position:220% 0}} @media (prefers-reduced-motion:reduce){ .line > span{animation-duration:.01ms;transform:none} .dim{animation:none} } </style> </head> <body> <div class="card" id="card"> <canvas id="grid"></canvas> <div class="overlay"> <div class="brand"> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 1.5l1.7 8.8L22 12l-8.3 1.7L12 22.5l-1.7-8.8L2 12l8.3-1.7z" fill="#fff"/></svg> <span>Lumen</span> </div> <h1 class="headline"> <span class="line"><span>Your finances,</span></span> <span class="line"><span>in full <i class="dim" style="font-style:normal">flow</i></span></span> </h1> </div> </div> <script> (function(){ var card = document.getElementById('card'); var canvas = document.getElementById('grid'); var ctx = canvas.getContext('2d'); var TAU = Math.PI * 2; var W = 0, H = 0, dpr = 1, spacing = 18, cols = 0, rows = 0, ox = 0, oy = 0; var mouse = { x: -999, y: -999, on: false }; var ripples = []; function resize(){ dpr = Math.min(2, window.devicePixelRatio || 1); var r = card.getBoundingClientRect(); W = r.width; H = r.height; canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); spacing = Math.max(13, Math.min(22, W / 52)); cols = Math.ceil(W / spacing); rows = Math.ceil(H / spacing); ox = (W - (cols - 1) * spacing) / 2; oy = (H - (rows - 1) * spacing) / 2; } window.addEventListener('resize', resize); card.addEventListener('pointermove', function(e){ var r = card.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; mouse.on = true; }); card.addEventListener('pointerleave', function(){ mouse.on = false; mouse.x = mouse.y = -999; }); card.addEventListener('pointerdown', function(e){ var r = card.getBoundingClientRect(); ripples.push({ x: e.clientX - r.left, y: e.clientY - r.top, t: performance.now() }); if (ripples.length > 6) ripples.shift(); }); function smooth(a, b, x){ x = Math.max(0, Math.min(1, (x - a) / (b - a))); return x * x * (3 - 2 * x); } // Ambient travelling "momentum" wave field, 0..1. function field(nx, ny, t){ var diag = nx * 1.15 - ny * 0.85; var w = 0.5 + 0.5 * Math.sin(diag * Math.PI * 3.0 - t * 1.25); w = Math.pow(w, 1.7); w += 0.22 * (0.5 + 0.5 * Math.sin(diag * Math.PI * 6.0 + t * 0.8)); // fade the wave toward the top (behind the headline) and lift bottom-right w *= 0.85 * smooth(-0.15, 0.55, ny) + 0.12; return Math.max(0, Math.min(1, w)); } function draw(now){ ctx.clearRect(0, 0, W, H); var t = now * 0.001; var baseR = spacing * 0.12, maxR = spacing * 0.37; // prune ripples for (var k = ripples.length - 1; k >= 0; k--) if ((now - ripples[k].t) / 1000 > 1.4) ripples.splice(k, 1); for (var j = 0; j < rows; j++){ var y = oy + j * spacing, ny = y / H; for (var i = 0; i < cols; i++){ var x = ox + i * spacing, nx = x / W; var v = field(nx, ny, t); if (mouse.on){ var md = Math.hypot(x - mouse.x, y - mouse.y); var mb = 1 - md / 120; if (mb > 0) v += mb * mb * 0.95; } for (var k2 = 0; k2 < ripples.length; k2++){ var a = (now - ripples[k2].t) / 1000; var rd = Math.hypot(x - ripples[k2].x, y - ripples[k2].y); var ring = a * 320; var rb = (1 - Math.abs(rd - ring) / 46) * (1 - a / 1.4); if (rb > 0) v += rb * 0.9; } if (v > 1) v = 1; if (v < 0.05){ ctx.globalAlpha = 0.06; ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(x, y, baseR, 0, TAU); ctx.fill(); } else { var r = baseR + (maxR - baseR) * v; ctx.globalAlpha = 0.12 + v * 0.85; ctx.strokeStyle = ctx.fillStyle = '#fff'; if (v > 0.30 && v < 0.5){ ctx.lineWidth = Math.max(1, r * 0.36); ctx.beginPath(); ctx.arc(x, y, r, 0, TAU); ctx.stroke(); } else { ctx.beginPath(); ctx.arc(x, y, r, 0, TAU); ctx.fill(); } } } } ctx.globalAlpha = 1; requestAnimationFrame(draw); } resize(); requestAnimationFrame(draw); })(); </script> </body> </html>

Code & assets

Design System