Hover Cursor

admin1234
Feb 08, 2026 5
Live Preview

Live Editor

<button class="hover-target">UIBlitz</button>

<canvas id="fire"></canvas>
*{ cursor:none; }

body{
  margin:0;
  height:100vh;
  background:#020617;
  overflow:hidden;
  font-family:system-ui;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
}

canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
}

/* Demo buttons */
.hover-target{
  padding:18px 36px;
  font-size:18px;
  color:white;
  background:#0f172a;
  border:1px solid #334155;
  border-radius:14px;
  transition:.3s;
  position:relative;
  z-index:20;
}

.hover-target:hover{
  background:#020617;
  border-color:#f97316;
}
const canvas = document.getElementById("fire");
const ctx = canvas.getContext("2d");

let w,h;
function resize(){
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
resize();
window.addEventListener("resize", resize);

let mouse = { x:w/2, y:h/2 };
let embers = [];
let hoverPoint = null;

document.addEventListener("mousemove", e=>{
  mouse.x = e.clientX;
  mouse.y = e.clientY;

  for(let i=0;i<4;i++){
    embers.push({
      x: mouse.x,
      y: mouse.y,
      r: 2 + Math.random()*2,
      vx:(Math.random()-0.5)*0.6,
      vy:-Math.random()*1.5,
      life:100,
      heat:0.6
    });
  }
});

// Detect hover targets
document.querySelectorAll(".hover-target").forEach(el=>{
  el.addEventListener("mouseenter", ()=>{
    const r = el.getBoundingClientRect();
    hoverPoint = {
      x:r.left + r.width/2,
      y:r.top + r.height/2
    };
  });
  el.addEventListener("mouseleave", ()=>{
    hoverPoint = null;
  });
});

function draw(){
  ctx.clearRect(0,0,w,h);

  for(let i=embers.length-1;i>=0;i--){
    const p = embers[i];

    // Attraction to hover element
    if(hoverPoint){
      const dx = hoverPoint.x - p.x;
      const dy = hoverPoint.y - p.y;
      p.vx += dx * 0.0008;
      p.vy += dy * 0.0008;
      p.heat = 1;
    }

    p.x += p.vx;
    p.y += p.vy;
    p.vy += 0.03;
    p.life--;

    if(p.life<=0){
      embers.splice(i,1);
      continue;
    }

    const alpha = p.life/120;
    const size = p.r * (hoverPoint ? 6 : 4);

    const g = ctx.createRadialGradient(
      p.x,p.y,0,
      p.x,p.y,size
    );

    g.addColorStop(0,`rgba(255,220,150,${alpha})`);
    g.addColorStop(0.4,`rgba(255,120,30,${alpha*p.heat})`);
    g.addColorStop(1,"rgba(255,60,0,0)");

    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(p.x,p.y,size,0,Math.PI*2);
    ctx.fill();
  }

  requestAnimationFrame(draw);
}
draw();
Categories

Hover Cursor

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
