Happy Birthday Animations

AI Overview: Happy Birthday Animation

This project is an interactive, full-screen web animation designed to celebrate a birthday with a dynamic visual display. It uses the HTML5 Canvas API to render a sequence of celebratory effects, including fireworks that transform into letters, floating balloons, and a constant stream of festive particles like hearts, stars, and confetti. The animation is designed to be a "looping" experience where the message is revealed, floats away, and then restarts with a fresh burst of celebration.

The core logic is driven by a state machine within the Letter object. Each letter of the message "HAPPY BIRTHDAY! MY LOVE" goes through four distinct phases: firework (shooting upward), contemplate (exploding into a visible letter), balloon (inflating and floating away), and done. This creates a choreographed sequence where the text doesn't just appear; it is "born" from an explosion and eventually drifts off-screen.

The project relies heavily on a central configuration object called opts. This object acts as a control panel for the entire animation, defining everything from the text content to the physics of gravity and the speed of the fireworks.

opts = {
  strings: [ 'HAPPY', 'BIRTHDAY!','MY LOVE' ],
  charSize: 30,
  gravity: .1,
  fireworkSpawnTime: 200,
  balloonBaseSize: 20,
};

The opts object allows developers to easily change the message or tweak the physics of the animation in one central location.

To keep the visuals interesting, the script uses several particle classes (Confetti, Heart, Star, Sparkle, and Ribbon). Each class has its own step method to calculate movement and a draw method to render the shape on the canvas. For example, the balloons use a custom path to create their iconic rounded shape.

function generateBalloonPath( x, y, size ){
  ctx.moveTo( x, y );
  ctx.bezierCurveTo( x - size / 2, y - size / 2,
                     x - size / 4, y - size,
                     x,            y - size );
  ctx.bezierCurveTo( x + size / 4, y - size,
                     x + size / 2, y - size / 2,
                     x,            y );
}

This function uses Bezier curves to draw a realistic balloon shape directly onto the canvas.

Finally, the anim() function serves as the engine of the project. It runs continuously using requestAnimationFrame, clearing the screen with a deep-space gradient and updating the position of every letter and particle. When all letters reach the "done" phase, the script triggers a massive "celebration" burst of confetti and ribbons before resetting the cycle.

if( done ) {
  for( var l = 0; l < letters.length; ++l )
    letters[ l ].reset();
  
  for (var i = 0; i < opts.confettiCount * 1.5; i++) {
    confetti.push(new Confetti(hw + (Math.random() - 0.5) * w, -150));
  }
}

This logic checks if the message has finished its animation and, if so, resets the letters and spawns extra confetti for a big finale.