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.
- Smooth particle animation with elastic behavior
- Real-time mouse tracking
- Customizable colors, sizes, and behaviors
- Responsive design
- TypeScript support
- Zero dependencies
npm install cursorburn
# or
yarn add cursorburn
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>
);
}
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 |
<CursorBurn
colors={["#ff4400", "#ff0000", "#ffbb00"]}
numParticles={100}
particleSpread={5} // Smaller spread
maxParticleSpeed={3}
decaySpeed={0.2} // Fast decay
maxIntensity={4}
growthTime={1}
/>
<CursorBurn
colors={["#ff8800", "#ff4400", "#ffcc00"]}
numParticles={80}
particleSpread={20} // Larger spread
maxParticleSpeed={6}
decaySpeed={0.05} // Slow decay
maxIntensity={3}
growthTime={2}
/>
<CursorBurn
colors={["#ff0000", "#ff4400", "#ff8800"]}
particleSpread={10}
particleAngleSpread={45}
particleUpwardForce={1}
numParticles={120}
maxParticleSpeed={10}
decaySpeed={0.12}
maxIntensity={5}
/>
<CursorBurn
colors={["#8800ff", "#aa00ff", "#cc88ff"]}
particleSpread={35}
particleAngleSpread={270}
particleUpwardForce={0.2}
filterBlur={12}
decaySpeed={0.05}
maxParticleSpeed={4}
/>
<CursorBurn
colors={["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"]}
particleSpread={25}
particleAngleSpread={120}
particleUpwardForce={0.4}
numParticles={80}
filterBlur={8}
decaySpeed={0.15}
/>
<CursorBurn
colors={["#ffffff", "#88ffff", "#0088ff"]}
particleSpread={40}
particleAngleSpread={180}
particleUpwardForce={-0.2}
numParticles={150}
maxParticleSpeed={3}
filterBlur={4}
decaySpeed={0.18}
/>
<CursorBurn
colors={["#ff3300", "#ff9900", "#ffcc00"]}
particleSpread={50}
particleAngleSpread={360}
particleUpwardForce={0}
numParticles={200}
maxParticleSpeed={15}
decaySpeed={0.08}
filterBlur={6}
maxIntensity={4}
/>
<CursorBurn
colors={["#ff00ff", "#00ffff", "#0066ff", "#9900ff"]}
particleSpread={60}
particleAngleSpread={360}
particleUpwardForce={0.1}
numParticles={150}
maxParticleSpeed={2}
decaySpeed={0.05}
filterBlur={15}
maxIntensity={3}
/>
<CursorBurn
colors={["#00ff00", "#33ff33", "#66ff66"]}
particleSpread={30}
particleAngleSpread={30}
particleUpwardForce={-1}
numParticles={180}
maxParticleSpeed={8}
decaySpeed={0.15}
filterBlur={3}
maxIntensity={2}
/>
<CursorBurn
colors={["#ffff00", "#aaff00", "#ffaa00"]}
particleSpread={100}
particleAngleSpread={360}
particleUpwardForce={0.2}
numParticles={50}
maxParticleSpeed={3}
decaySpeed={0.02}
filterBlur={4}
maxIntensity={2}
/>
<CursorBurn
colors={["#ff0000", "#ff6600", "#ff3300", "#ffcc00"]}
particleSpread={40}
particleAngleSpread={180}
particleUpwardForce={0.3}
numParticles={100}
maxParticleSpeed={4}
decaySpeed={0.06}
filterBlur={12}
maxIntensity={4}
/>
<CursorBurn
colors={["#ff00ff", "#00ffff", "#ffff00", "#ff00aa", "#00ff00"]}
particleSpread={70}
particleAngleSpread={360}
particleUpwardForce={0}
numParticles={250}
maxParticleSpeed={10}
decaySpeed={0.2}
filterBlur={2}
maxIntensity={3}
/>
MIT