Distortion Effect

admin1234
Feb 08, 2026 8
Live Preview

Live Editor

<div class="wrap" id="card">
  <img src="https://images.unsplash.com/photo-1626808642875-0aa545482dfb?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  <div class="hint">move cursor 🌊</div>
</div>

<!-- SVG FILTER -->
<svg width="0" height="0">
  <filter id="liquid">
    <feTurbulence
      id="turbulence"
      type="fractalNoise"
      baseFrequency="0.01 0.02"
      numOctaves="2"
      seed="2"
    />
    <feDisplacementMap
      in="SourceGraphic"
      scale="20"
    />
  </filter>
</svg>
 body{
    margin:0;
    height:100vh;
    display:grid;
    place-items:center;
    background:#020617;
    font-family:system-ui;
  }

  .wrap{
    width:320px;
    height:320px;
    border-radius:18px;
    overflow:hidden;
    position:relative;
    box-shadow:
      0 20px 50px rgba(0,0,0,.6),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }

  .wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:url(#liquid);
    transition:filter .2s;
  }

  .hint{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    font-size:12px;
    color:#e5e7eb;
    opacity:.8;
    pointer-events:none;
  }
const card = document.getElementById("card");
const turb = document.getElementById("turbulence");

let x = 0, y = 0;
let tx = 0, ty = 0;

card.addEventListener("mousemove", e=>{
  const r = card.getBoundingClientRect();
  tx = (e.clientX - r.left) / r.width;
  ty = (e.clientY - r.top) / r.height;
});

card.addEventListener("mouseleave", ()=>{
  tx = ty = 0;
});

function animate(){
  x += (tx - x) * 0.08;
  y += (ty - y) * 0.08;

  const freqX = 0.008 + x * 0.02;
  const freqY = 0.008 + y * 0.02;

  turb.setAttribute(
    "baseFrequency",
    `${freqX} ${freqY}`
  );

  requestAnimationFrame(animate);
}
animate();
Categories

Distortion Effect

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
