Fire Cursor

admin1234
Feb 08, 2026 5
Live Preview

Live Editor

<div class="demo">Move cursor — FIRE MODE 🔥</div>
<canvas id="fire"></canvas>
*{
  cursor:none;
}

body{
  margin:0;
  height:100vh;
  background:#020617;
  overflow:hidden;
  font-family:system-ui;
}

/* Canvas */
canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
}

/* Demo text */
.demo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  letter-spacing:1px;
  opacity:0.8;
}
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 = [];

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

  // spawn embers
  for(let i=0;i<5;i++){
    embers.push({
      x: mouse.x + Math.random()*6 - 3,
      y: mouse.y + Math.random()*6 - 3,
      r: 2 + Math.random()*3,
      alpha: 1,
      vx: (Math.random()-0.5)*0.6,
      vy: -Math.random()*1.8 - 0.5,
      life: 100 + Math.random()*30,
      color: `hsl(${20 + Math.random()*30},100%,${50+Math.random()*20}%)`
    });
  }
});

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

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

    p.x += p.vx;
    p.y += p.vy;
    p.vy += 0.02; // gravity
    p.life--;
    p.alpha = p.life / 130;

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

    const g = ctx.createRadialGradient(
      p.x,p.y,0,
      p.x,p.y,p.r*4
    );

    g.addColorStop(0, `rgba(255,200,120,${p.alpha})`);
    g.addColorStop(0.3, p.color.replace(")",`,${p.alpha})`));
    g.addColorStop(1, "rgba(255,80,0,0)");

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

  requestAnimationFrame(draw);
}
draw();
Categories

Fire Cursor

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
