CursorParticles

Fire & Smoke

A cursor heat source that emits flame, embers, and soft smoke.

Effect guide

Copy the fire & smoke cursor effect

What it is: A cursor heat source that emits flame, embers, and soft smoke.

Where to use it: Use this motion pattern for launch pages, portfolios, playgrounds, and moments where pointer feedback should feel intentional.

Supported formats: React, Vue, Vanilla JS.

Explore Cursor Effects

"use client";

import { useEffect, useRef } from "react";

export default function FireSmoke() {
  const canvasRef = useRef(null);
  const mouse = useRef({ x: null, y: null });

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    let particles = [];
    let frame = 0;
    const config = {
      maxParticles: 350,
      bgColor: "#0a0d14",
      fireColor: "#f97316",
      smokeColor: "#64748b",
      spawnRate: 6,
      size: 7,
      rise: 1.6
    };
    const hexToRgb = (hex) => {
      const value = parseInt(hex.replace("#", ""), 16);
      return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
    };
    const fire = hexToRgb(config.fireColor);
    const smoke = hexToRgb(config.smokeColor);

function resize() {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }

function make(x, y) {
      const roll = Math.random();
      return {
        x: x + (Math.random() - 0.5) * 20,
        y: y + (Math.random() - 0.5) * 10,
        vx: (Math.random() - 0.5) * 1.5,
        vy: -(config.rise + Math.random() * config.rise * 1.35),
        life: 0,
        maxLife: 0.72 + Math.random() * 0.72,
        size: config.size * (0.72 + Math.random() * 1.1),
        type: roll > 0.78 ? "smoke" : roll > 0.48 ? "ember" : "fire"
      };
    }

frame = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(frame);
  }, []);

function move(event) {
    const rect = event.currentTarget.getBoundingClientRect();
    mouse.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
  }

return <canvas ref={canvasRef} onPointerMove={move} onPointerLeave={() => (mouse.current = { x: null, y: null })} style={{ width: "100%", height: "100%", display: "block" }} />;
}