Confetti Animation

Create an interactive Confetti Burst Button that triggers a physics-based animation when clicked. The animation should simulate realistic confetti particles with gravity, motion, rotation, and fade-out effects.

This project focuses on DOM animation, physics simulation, and performance-safe rendering using requestAnimationFrame.

Functional Requirements

• Display a button labeled "Celebrate!"
• On click, generate 50–75 confetti particles
• Each particle must have:
  • Random color
  • Random shape (circle, square, triangle)
  • Random velocity
  • Random rotation speed
• Apply physics simulation:
  • Gravity pulling particles downward
  • Horizontal drift (wind effect optional)
  • Rotation over time
• Particles must gradually fade out as they fall
• Add a Reset button to clear all particles instantly
• Show live particle count in format:
  • Particles: X
• Disable buttons while animation is running
• Use requestAnimationFrame for smooth animation loop
• Ensure proper cleanup of particles to avoid memory leaks

Physics Requirements

Each particle should include:

• Position (x, y)
• Velocity (vx, vy)
• Gravity effect (constant acceleration)
• Rotation angle
• Rotation speed
• Opacity (for fade-out)
• Shape type (circle / square / triangle)

Animation Rules

• Use requestAnimationFrame for updates
• Update particle positions every frame
• Apply gravity continuously
• Reduce opacity over time
• Remove particles when:
  • They go off-screen OR
  • Opacity reaches 0
• Stop animation when all particles are removed

UI Requirements

• Button: Celebrate!
• Button: Reset
• Particle count display

Required Testing Identifiers

Confetti Container

• data-testid="confetti-container"

Particle Count Display

Must show text like: Particles: 0

Buttons

• Celebrate Button:

  • Must contain text: "Celebrate!"
  • Must trigger animation on click

• Reset Button:

  • Must contain text: "Reset"
  • Must clear all particles

Button Behavior Rules

• While animation is running:

  • Disable Celebrate button
  • Disable Reset button (optional but recommended)

• After animation ends:

  • Re-enable both buttons

Performance Constraints

• Must support at least 75 particles smoothly
• Must avoid memory leaks
• Must remove particles from memory when not visible
• Must stop animation loop when no particles remain

Expected Output Behavior

On clicking Celebrate!:

• Confetti bursts from center/top area
• Particles scatter randomly
• Gravity pulls them downward
• Rotation + fading occurs
• Particles disappear naturally

On clicking Reset:

• All particles immediately removed
• Count resets to 0
• Animation stops