Find click clusters and important elements that receive no attention.
<div class="heat"><div class="tile">FEATURE IMAGE</div><div class="heatpoints" id="heatpoints"></div><div class="action">START HERE →</div><small>CLICK DENSITY</small></div>.heat{position:relative;width:min(73%,360px);height:clamp(110px,28vmin,220px);border:2px solid var(--fg);padding:clamp(8px,2vmin,16px);font:800 clamp(10px,max(1.7vmin,1vw),13px)/1.1 sans-serif}.tile{height:50%;background:var(--line);display:grid;place-items:center}.action{background:var(--accent);color:white;text-align:center;padding:7px;margin-top:8px}.heatpoints{position:absolute;inset:0;pointer-events:none}.heatpoints i{position:absolute;width:clamp(12px,4vmin,32px);aspect-ratio:1;border-radius:50%;background:var(--accent);filter:blur(5px);animation:hot 3s infinite alternate}.heat small{position:absolute;right:7px;bottom:3px;color:var(--muted)}@keyframes hot{from{opacity:.15;transform:scale(.5)}to{opacity:.8;transform:scale(1.3)}}small{font-size:max(.833em,10px,1vw)}const box=document.querySelector('#heatpoints');for(let i=0;i<12;i++){const dot=document.createElement('i');dot.style.left=18+i%4*11+'%';dot.style.top=12+Math.floor(i/4)*13+'%';dot.style.animationDelay=i*.12+'s';box.append(dot)}A click heatmap overlays visitor clicks on a page. It can reveal an image mistaken for a button or an important CTA that receives little attention.
The demo accumulates clicks on a decorative tile while the real CTA stays cool. This is a clue, not a causal diagnosis.
Separate device layouts before comparing coordinates. Click counts depend on exposure, so interpret them alongside scroll reach.
Use it to investigate CTA discoverability or surprising click patterns.