React SVG Fireworks Celebration

This React SVG Fireworks Celebration component delivers a festive visual experience without the overhead of heavy animation libraries like GSAP or Framer Motion. By combining React’s component composition with the lightweight performance of native CSS animations and SVG vector graphics, it renders crisp, scalable explosions suitable for congratulations screens or holiday themes.

Core Technique

The component creates a convincing illusion of chaos through a strictly controlled loop system.

1. Procedural Rocket Trails

The “smoke trail” of the rocket isn’t a static asset. It is generated procedurally using JavaScript to ensure no two rockets look exactly identical. The Utils.pathWave function calculates a path consisting of Quadratic Bezier curves (Q command). It linearly interpolates between start and end points while adding a randomized perpendicular offset to create a “wobbly” flight path.

// Generates a 'wobbly' SVG path d attribute
{
    // ... loop logic
    // Add random offset perpendicular to the line
    const angle = Math.atan2(y2 - y1, x2 - x1);
    const offset = this.random(-0.5, 0.5) * amplitude;
    
    x += Math.cos(angle + Math.PI / 2) * offset;
    y += Math.sin(angle + Math.PI / 2) * offset;
    // ...
    return d; // Returns SVG path data
}

2. Negative Delay Synchronization

The animation loop is driven by a single CSS variable --anim-dur. To make different fireworks appear at different times within the same cycle, the developer uses negative animation delays.

Instead of waiting for a delay to start (which would leave a blank screen initially), a negative delay (e.g., -0.675 * duration) tells the browser to start the animation as if it had already been running for that amount of time. This ensures the scene is fully populated instantly.

<FireworkRocket
    delay={-0.675 * duration} // Instantly starts at ~67% of the loop
    exhaustColor={color.purple}
    //...
/>

3. SVG Stroke Dashoffset Trick

The rocket’s movement is achieved purely via CSS using stroke-dasharray and stroke-dashoffset. The line is drawn dashed, where the “dash” is the length of the rocket tail and the “gap” is the length of the remaining path. By animating the offset, the dash travels along the path.

Accessibility (A11y)

The component includes aria-label="Fireworks" on the main SVG, providing context to screen readers.

• Recommendation: Since this involves flashing animation, it is crucial to respect the user’s motion preferences. In a production environment, you should wrap the CSS animations in a @media (prefers-reduced-motion: reduce) query to slow them down or disable them entirely.