CursorParticles

Pixel Dissolve

Cursor particles scatter outward like glowing ash, then softly dissolve.

Effect guide

Copy the pixel dissolve cursor effect

What it is: Cursor particles scatter outward like glowing ash, then softly dissolve.

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 PixelDissolve() {
  const canvasRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
let frame = 0;
let width = 0;
let height = 0;
const particles = [];
const pointer = { x: -999, y: -999 };
const config = {
  hueStart: 200,
  hueRange: 60,
  size: 3,
  spawnRate: 4,
  maxParticles: 300
};

function resize() {
  const rect = canvas.getBoundingClientRect();
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = rect.width;
  height = rect.height;
  canvas.width = Math.floor(width * dpr);
  canvas.height = Math.floor(height * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}

function spawnParticles(x, y) {
  for (let index = 0; index < config.spawnRate; index++) {
    const angle = Math.random() * Math.PI * 2;
    const radius = Math.random() * 16;
    particles.push({
      x: x + Math.cos(angle) * radius,
      y: y + Math.sin(angle) * radius,
      vx: (Math.random() - 0.5) * 2.5 + Math.cos(angle) * 1.5,
      vy: (Math.random() - 0.5) * 2.5 + Math.sin(angle) * 1.5 - 0.5,
      size: Math.random() * config.size + 1,
      opacity: 0.9,
      hue: config.hueStart + Math.random() * config.hueRange,
      life: 0
    });
  }

if (particles.length > config.maxParticles) {
    particles.splice(0, particles.length - config.maxParticles);
  }
}

function draw() {
  ctx.clearRect(0, 0, width, height);

for (const particle of particles) {
    particle.life += 0.025;
    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.vy += 0.04;
    particle.vx *= 0.98;
    particle.opacity = Math.max(0, 0.9 - particle.life * 0.9);
    if (particle.opacity <= 0) continue;

ctx.beginPath();
    ctx.arc(particle.x, particle.y, Math.max(0, particle.size * (1 - particle.life * 0.5)), 0, Math.PI * 2);
    ctx.fillStyle = `hsla(${particle.hue}, 80%, 65%, ${particle.opacity})`;
    ctx.fill();
  }

for (let index = particles.length - 1; index >= 0; index--) {
    if (particles[index].opacity <= 0) particles.splice(index, 1);
  }

if (pointer.x > 0 && pointer.y > 0) {
    ctx.beginPath();
    ctx.arc(pointer.x, pointer.y, 10, 0, Math.PI * 2);
    ctx.strokeStyle = "rgba(140, 160, 255, 0.5)";
    ctx.lineWidth = 1.5;
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(pointer.x, pointer.y, 2, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(180, 190, 255, 0.9)";
    ctx.fill();
  }

frame = requestAnimationFrame(draw);
}

function onMove(event) {
  const rect = canvas.getBoundingClientRect();
  pointer.x = event.clientX - rect.left;
  pointer.y = event.clientY - rect.top;
  spawnParticles(pointer.x, pointer.y);
}

function onLeave() {
  pointer.x = -999;
  pointer.y = -999;
}

if (!canvas || !ctx) return;

resize();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);
    canvas.addEventListener("pointermove", onMove);
    canvas.addEventListener("pointerleave", onLeave);
    frame = requestAnimationFrame(draw);

return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      canvas.removeEventListener("pointermove", onMove);
      canvas.removeEventListener("pointerleave", onLeave);
    };
  }, []);

return <canvas ref={canvasRef} style={{ display: "block", width: "100%", height: "100%" }} />;
}