Blazing Fire Trail — CSS & JavaScript Fire Particle Effect
The Blazing Fire Trail is a mesmerizing cursor interaction effect that makes your website come alive with a blazing fire-ember trail following the mouse. Built using only vanilla JavaScript and CSS keyframe animations, this effect creates glowing particle elements positioned at the cursor’s location, each fading upward like real fire embers.
How It Works
When the user moves their mouse, a JavaScript mousemove event listener fires and dynamically appends small <div> elements to the <body>. Each div is positioned at the cursor’s current clientX/clientY coordinates with a slight random offset to create a natural spread. The CSS @keyframes fadeOut animation handles the particle rising and fading, and a setTimeout cleans each element from the DOM after it completes.
Use Cases
This effect is perfect for:
- Dark-mode hero sections on marketing websites
- Portfolio sites that want a distinctive, memorable impression
- Loading screens or interactive landing pages
- Gaming or entertainment websites
How to Use in Your Project
- Click the Source Code tab above to view the complete HTML, CSS, and JS
- Click Copy All Code to copy everything to clipboard
- Paste the HTML and CSS into your page, and the JS into a
<script>tag before</body> - Customize the ember colors in the CSS
background: radial-gradient(...)property
Frequently Asked Questions
Does this effect work on mobile or touch devices?
The effect responds to mousemove events, which are desktop-only. On touch devices, the event won’t fire, so the effect degrades gracefully — no errors, no broken UI.
Will spawning DOM elements affect performance?
Each ember element lives for less than one second before being removed from the DOM. The spawn rate is tuned to 3 particles per mouse-move event, keeping paint operations minimal. For extremely performance-sensitive applications, consider throttling the event with requestAnimationFrame.
Can I change the ember color?
Yes! In the CSS .ember rule, modify the background: radial-gradient(circle, #ff4c00, #ffcc00, transparent) values. Replace #ff4c00 (orange-red core) and #ffcc00 (yellow outer glow) with any colors you like.
Is there a way to add more particles per mouse move?
Yes, increase the count variable in the JavaScript from 3 to any higher number (e.g., 6 or 8). Note that higher values create more DOM nodes and may reduce performance on low-end devices.
