ドットマトリクス波紋ヒーロー

<div class="d01-01-12-hero">
          <div class="d01-01-12-grid" aria-hidden="true"></div>
          <div class="d01-01-12-inner">
            <h1>点が、線になる。</h1>
            <p>無数のドットが波のように連鎖し、静かな存在感を放ちます。</p>
          </div>
        </div>

.prev.d01-01-12{padding:0;display:block;min-height:320px}
        .d01-01-12-hero{position:relative;height:320px;overflow:hidden;background:#0b0f1a;display:flex;align-items:center;justify-content:center}
        .d01-01-12-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(7,1fr);gap:6px;padding:14px;box-sizing:border-box}
        .d01-01-12-grid span{width:5px;height:5px;margin:auto;border-radius:50%;background:#3ee0ff;opacity:.2;animation:d01-01-12-pulse 3.2s ease-in-out infinite}
        @keyframes d01-01-12-pulse{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.9;transform:scale(1.8)}}
        .d01-01-12-inner{position:relative;z-index:1;text-align:center;padding:24px}
        .d01-01-12-hero h1{color:#fff;font-size:24px;font-weight:700;letter-spacing:.08em;margin:0 0 12px}
        .d01-01-12-hero p{color:rgba(255,255,255,.7);font-size:12.5px;line-height:1.9;margin:0}

(function(){
        var grid=document.querySelector('.d01-01-12 .d01-01-12-grid');
        if(!grid)return;
        var cols=14,rows=7,frag=document.createDocumentFragment();
        for(var r=0;r<rows;r++){
          for(var c=0;c<cols;c++){
            var dot=document.createElement('span');
            dot.style.animationDelay=((r+c)*0.08).toFixed(2)+'s';
            frag.appendChild(dot);
          }
        }
        grid.appendChild(frag);
      })();