Stille Kracht: Minimalisme met Micro-interacties als Conversie-engine

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Micro-interactie Demo</title>
<style>
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f6f7fb;color:#1a1a1a;display:flex;min-height:100vh;align-items:center;justify-content:center}
.card{width:320px;padding:24px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08);transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.title{font-size:18px;font-weight:600;margin:0 0 8px}
.desc{font-size:14px;color:#555;margin:0 0 16px}
.dot{width:8px;height:8px;border-radius:50%;background:#111;display:inline-block;transition:transform .2s ease}
.card:hover .dot{transform:scale(1.6)}
</style>
</head>
<body>
<div class="card" id="card">
<p class="title">Stille interactie</p>
<p class="desc">Beweeg over de kaart. Subtiele lift en feedback zonder afleiding.</p>
<span class="dot"></span>
</div>
<script>
const card=document.getElementById('card');
let raf;
card.addEventListener('mousemove',e=>{
if(raf) return;
raf=requestAnimationFrame(()=>{
const r=card.getBoundingClientRect();
const x=(e.clientX-r.left)/r.width-0.5;
const y=(e.clientY-r.top)/r.height-0.5;
card.style.transform=`perspective(800px) rotateY(${x*6}deg) rotateX(${-y*6}deg) translateY(-4px)`;
raf=null;
});
});
card.addEventListener('mouseleave',()=>{
card.style.transform='perspective(800px) rotateY(0) rotateX(0) translateY(0)';
});
</script>
</html>