Cursor Warp UI

admin1234
Feb 09, 2026 10
Live Preview

Live Editor

<div class="container">
  <div class="warp">UI BLITZ</div>
  <div class="warp">WARP CORE</div>
</div>
html,body{
  margin:0;
  height:100%;
  background:#05060c;
  overflow:hidden;
  font-family:monospace;
}

.container{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
}

.warp{
  width:220px;
  height:140px;
  border-radius:18px;
  background:linear-gradient(135deg,#00ffff,#004cff);
  color:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:20px;
  font-weight:bold;
  transition:transform 0.2s cubic-bezier(.22,1.28,.36,1);
  will-change:transform;
}
const cards = document.querySelectorAll(".warp");

document.addEventListener("mousemove", e=>{
  cards.forEach(card=>{
    const rect = card.getBoundingClientRect();
    const cx = rect.left + rect.width/2;
    const cy = rect.top + rect.height/2;

    const dx = e.clientX - cx;
    const dy = e.clientY - cy;
    const dist = Math.sqrt(dx*dx + dy*dy);

    const max = 300; // warp radius
    if(dist < max){
      const power = (1 - dist/max);
      const moveX = dx * power * 0.35;
      const moveY = dy * power * 0.35;
      const scale = 1 + power * 0.15;
      const rotate = power * 8;

      card.style.transform =
        `translate(${moveX}px,${moveY}px)
         scale(${scale})
         rotateX(${dy*0.03}deg)
         rotateY(${-dx*0.03}deg)
         skew(${rotate}deg)`;
    }else{
      card.style.transform =
        `translate(0,0) scale(1) rotateX(0) rotateY(0) skew(0deg)`;
    }
  });
});
Categories

Cursor Warp UI

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
