Cursor Burn

Cursor Burn is a React component that creates an interactive fire effect following the mouse cursor. The effect features a unique elastic, gooey animation that makes the fire particles blend smoothly, creating a liquid-like appearance.

Features

• Smooth particle animation with elastic behavior
• Real-time mouse tracking
• Customizable colors, sizes, and behaviors
• Responsive design
• TypeScript support
• Zero dependencies

Installation

npm install cursorburn
# or
yarn add cursorburn

Basic Usage

import CursorBurn from 'cursorburn';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', background: 'black' }}>
      <CursorBurn
        colors={["orange", "red", "yellow"]}
        particleSpread={20}
        particleAngleSpread={60}
        particleUpwardForce={0.8}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ------------------- | ------------------- | ----------------------------- | -------------------------- | | width | number | window.innerWidth * 2 | Canvas width | | height | number | window.innerHeight * 2 | Canvas height | | numParticles | number | 50 | Number of particles | | colors | string[] | ["orange", "red", "yellow"] | Array of particle colors | | minParticleSize | number | 1 | Minimum particle size | | maxParticleSize | number | 6 | Maximum particle size | | minParticleSpeed | number | 2 | Minimum particle speed | | maxParticleSpeed | number | 5 | Maximum particle speed | | particleSpread | number | 10 | Radius of particle spread | | particleAngleSpread | number | 90 | Angle spread in degrees | | particleUpwardForce | number | 0.5 | Upward force (0-1) | | radius | number | 12 | Cursor radius | | cursorColor | string | "white" | Cursor color | | speed | number | 0.5 | Animation speed | | maxIntensity | number | 3 | Maximum intensity on click | | decaySpeed | number | 0.1 | Particle decay speed | | filterBlur | number | 7 | Blur effect for gooey look | | background | string | undefined | Background color | | className | string | undefined | Additional CSS class | | style | React.CSSProperties | undefined | Additional CSS styles | | showSystemCursor | boolean | false | Show system cursor |

Examples

Concentrated Flame

<CursorBurn
  colors={["#ff4400", "#ff0000", "#ffbb00"]}
  numParticles={100}
  particleSpread={5}  // Smaller spread
  maxParticleSpeed={3}
  decaySpeed={0.2}    // Fast decay
  maxIntensity={4}
  growthTime={1}
/>

Dispersed Effect

<CursorBurn
  colors={["#ff8800", "#ff4400", "#ffcc00"]}
  numParticles={80}
  particleSpread={20}  // Larger spread
  maxParticleSpeed={6}
  decaySpeed={0.05}    // Slow decay
  maxIntensity={3}
  growthTime={2}
/>

Inferno

<CursorBurn
  colors={["#ff0000", "#ff4400", "#ff8800"]}
  particleSpread={10}
  particleAngleSpread={45}
  particleUpwardForce={1}
  numParticles={120}
  maxParticleSpeed={10}
  decaySpeed={0.12}
  maxIntensity={5}
/>

Ghost Fire

<CursorBurn
  colors={["#8800ff", "#aa00ff", "#cc88ff"]}
  particleSpread={35}
  particleAngleSpread={270}
  particleUpwardForce={0.2}
  filterBlur={12}
  decaySpeed={0.05}
  maxParticleSpeed={4}
/>

Rainbow Flow

<CursorBurn
  colors={["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"]}
  particleSpread={25}
  particleAngleSpread={120}
  particleUpwardForce={0.4}
  numParticles={80}
  filterBlur={8}
  decaySpeed={0.15}
/>

Ice Storm

<CursorBurn
  colors={["#ffffff", "#88ffff", "#0088ff"]}
  particleSpread={40}
  particleAngleSpread={180}
  particleUpwardForce={-0.2}
  numParticles={150}
  maxParticleSpeed={3}
  filterBlur={4}
  decaySpeed={0.18}
/>

Vortex

<CursorBurn
  colors={["#ff3300", "#ff9900", "#ffcc00"]}
  particleSpread={50}
  particleAngleSpread={360}
  particleUpwardForce={0}
  numParticles={200}
  maxParticleSpeed={15}
  decaySpeed={0.08}
  filterBlur={6}
  maxIntensity={4}
/>

Cosmic Nebula

<CursorBurn
  colors={["#ff00ff", "#00ffff", "#0066ff", "#9900ff"]}
  particleSpread={60}
  particleAngleSpread={360}
  particleUpwardForce={0.1}
  numParticles={150}
  maxParticleSpeed={2}
  decaySpeed={0.05}
  filterBlur={15}
  maxIntensity={3}
/>

Matrix Rain

<CursorBurn
  colors={["#00ff00", "#33ff33", "#66ff66"]}
  particleSpread={30}
  particleAngleSpread={30}
  particleUpwardForce={-1}
  numParticles={180}
  maxParticleSpeed={8}
  decaySpeed={0.15}
  filterBlur={3}
  maxIntensity={2}
/>

Fireflies

<CursorBurn
  colors={["#ffff00", "#aaff00", "#ffaa00"]}
  particleSpread={100}
  particleAngleSpread={360}
  particleUpwardForce={0.2}
  numParticles={50}
  maxParticleSpeed={3}
  decaySpeed={0.02}
  filterBlur={4}
  maxIntensity={2}
/>

Lava Flow

<CursorBurn
  colors={["#ff0000", "#ff6600", "#ff3300", "#ffcc00"]}
  particleSpread={40}
  particleAngleSpread={180}
  particleUpwardForce={0.3}
  numParticles={100}
  maxParticleSpeed={4}
  decaySpeed={0.06}
  filterBlur={12}
  maxIntensity={4}
/>

Pixel Storm

<CursorBurn
  colors={["#ff00ff", "#00ffff", "#ffff00", "#ff00aa", "#00ff00"]}
  particleSpread={70}
  particleAngleSpread={360}
  particleUpwardForce={0}
  numParticles={250}
  maxParticleSpeed={10}
  decaySpeed={0.2}
  filterBlur={2}
  maxIntensity={3}
/>

License

MIT