A beautiful, interactive birthday animation website featuring a starry night sky, animated text, shooting stars, and mobile-responsive design with rotation prompts.
- Starry Night Sky: Animated twinkling stars with layered background
- Shooting Stars: Random shooting star effects across the canvas
- Text Animation: "WISH YOU HAPPY BIRTHDAY ANUSHA 💗" animated with particle effects
- Explosions: Click/tap anywhere to create colorful explosion effects
- Bear Character: Interactive bear image with hover effects
- Orientation Detection: Automatically detects mobile devices
- Rotation Prompt: Beautiful animated popup when device is in portrait mode
- Progressive Unlock: Shows rotation message first, then birthday content after rotating
- Touch Support: Optimized for touch interactions
- Responsive Canvas: Adapts to any screen size
- Particle Text: Birthday message forms from animated dots
- Continuous Effects: Stars twinkle, shooting stars appear randomly
- Interactive Explosions: Click explosions with physics
- Smooth Transitions: All animations use requestAnimationFrame for performance
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No server required - runs locally
- Clone or download the project files
- Open
index.htmlin your web browser - Enjoy the animation!
Happy-Birthday/
├── index.html # Main HTML structure
├── script.js # Animation logic and interactions
└── style.css # Styling and animations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HAPPY BIRTHDAY ANUSHA</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas"></canvas> <!-- Main animation canvas -->
<div id="rotateNotice"> <!-- Mobile rotation prompt -->
<div class="overlay">
<div class="rotate-content">
<div class="emoji-top">🎂 WAIT! 🎂</div>
<p class="rotate-message">Please rotate your screen</p>
<p class="rotate-message">to see the magic ✨</p>
<div class="phone-icon">📱</div>
</div>
</div>
</div>
<img id="bear" src="bear-gif-url" alt="Bear" /> <!-- Bear character -->
<script src="script.js"></script>
</body>
</html>- Canvas Setup: Initializes HTML5 canvas with error handling
- Animation Loop: Main animation loop using requestAnimationFrame
- State Management: Manages animation states and intervals
- Event Handlers: Click/touch events for interactions
// Core initialization
checkOrientation() // Detects mobile orientation
resizeCanvas() // Handles window resizing
animate() // Main animation loop
// Animation effects
drawStars() // Renders twinkling stars
drawShootingStars() // Renders shooting star effects
createExplosion() // Creates particle explosions
shootDot() // Animates text formation
// Text generation
generateCharDots() // Converts text to particle coordinates
generateAllTargetDots() // Prepares text animation datastars[]: Array of star objects with position, size, and opacityshootingStars[]: Array of shooting star objectsexplosions[]: Array of explosion particlesdots[]: Current animated particlestargetDotsQueue[]: Target positions for text formation
- Full-screen Canvas: Covers entire viewport
- Night Sky Background: Radial gradient with star patterns
- Fixed Positioning: Bear and rotation notice positioning
@keyframes bounce /* Bouncing emoji animation */
@keyframes pulse-glow /* Pulsing overlay effect */
@keyframes fade-in-out /* Text fade animation */
@keyframes rotate-phone /* Phone rotation animation */- Mobile Detection: Uses JavaScript for orientation checking
- Touch Optimization: Prevents ghost clicks on mobile
- Flexible Layout: Adapts to different screen sizes
Edit the fullText array in script.js:
const fullText = ["YOUR CUSTOM MESSAGE HERE"];Update the background gradient in style.css:
background: radial-gradient(circle at top, #your-color1 0%, #your-color2 40%, #your-color3 100%);Modify interval timings in script.js:
shootInterval = setInterval(shootDot, 50); // Text formation speed
shootStarInterval = setInterval(createShootingStar, 1500); // Shooting star frequencyUpdate the src attribute in index.html:
<img id="bear" src="your-image-url.gif" alt="Bear" />- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- RequestAnimationFrame: Smooth 60fps animations
- Canvas Reuse: Single canvas context
- Efficient Loops: Optimized particle systems
- Memory Management: Proper cleanup of intervals
- Canvas context availability checks
- Image loading error handling
- Graceful degradation for unsupported features
- Console logging for debugging
function checkOrientation() {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
const isPortrait = window.innerHeight > window.innerWidth;
if (isMobile) {
if (!hasRotatedToLandscape) {
if (isPortrait) {
// Show initial rotation message
updateRotationMessage("initial");
showRotationNotice();
} else {
// User rotated to landscape - unlock content
hasRotatedToLandscape = true;
updateRotationMessage("success");
setTimeout(() => {
hideRotationNotice();
startBirthdayAnimations();
}, 10000); // 10 second success message
}
}
}
}- Step 1: Show rotation prompt on mobile (portrait or landscape)
- Step 2: User rotates to landscape mode
- Step 3: Show success message briefly
- Step 4: Unlock and start birthday animations
- Touch Start: Creates explosions at touch points
- Prevent Default: Avoids unwanted scrolling/zooming
- Passive Events: Improves scroll performance
- 300 Stars: Randomly positioned across canvas
- Twinkling Effect: Opacity animation with sine waves
- Layered Background: CSS background-image stars
- Particle System: Text forms from individual dots
- Physics: Dots "shoot" from bear position to target locations
- Character-by-Character: Sequential text formation
- 20 Particles: Per explosion event
- Physics Simulation: Velocity, gravity, and opacity decay
- Colorful: Random particle colors
- Open
index.htmldirectly in browser - No build process required
- Hot reload by refreshing browser
# Using Python
python -m http.server 8000
# Using Node.js
npx http-server
# Access at http://localhost:8000- Upload files to GitHub repository
- Enable GitHub Pages in repository settings
- Access via
https://username.github.io/repository-name
Canvas not showing:
- Check browser console for errors
- Ensure JavaScript is enabled
- Verify canvas element exists in DOM
Animations not smooth:
- Check browser performance
- Reduce particle counts if needed
- Ensure hardware acceleration is enabled
Mobile rotation notice not appearing:
- Test on actual mobile device
- Check device orientation API support
- Verify user agent detection
Bear image not loading:
- Check image URL validity
- Verify internet connection
- Image will hide automatically on load failure
This project is open source. Feel free to use, modify, and distribute.
- Starry night sky inspired by real night skies
- Bear character from online GIF resources
- Animation techniques from HTML5 Canvas tutorials
- Mobile responsiveness best practices
Happy Birthday Anusha! 🎂✨