ultra-cake

bysudharsan m

i need you to Create a premium-quality interactive birthday web component/add-on that can be embedded into an existing birthday website. Requirements: Overall Experience Display a beautiful, realistic birthday cake centered on the screen. The cake should have multiple animated candles with flickering flames. The page should feel modern, polished, and celebration-themed. Use smooth 60fps animations and professional visual effects. Design must work on desktop and mobile devices. Blow Detection Request microphone permission from the user. Detect blowing into the microphone using the Web Audio API. Implement noise filtering and sensitivity calibration to distinguish blowing from normal speech. Show a subtle indicator that the microphone is listening. When a strong blow is detected: Candle flames should realistically extinguish. Small smoke particles should rise from each candle. Flame glow should fade naturally instead of disappearing instantly. Trigger the celebration sequence. Celebration Sequence After all candles are blown out: Display large animated text: "Happy Birthday Sammy!" Text animation: Elegant scale-up entrance. Sparkling glow effect. Smooth easing. Gold and white celebratory styling. Launch celebration effects: Realistic confetti explosion. Party poppers shooting confetti from both sides. Floating balloons rising upward. Twinkling stars. Sparkles and glitter particles. Firework bursts in the background. Ribbon streamers. Celebration particles with physics. Effects should continue for several seconds and then transition into a pleasant idle celebration state. Animation Quality High-end animation quality similar to premium interactive event websites. Use GSAP or equivalent professional animation library. Smooth particle systems. Natural motion physics. Layered visual effects. Responsive performance on mobile devices. Technical Requirements Pure HTML, CSS, and JavaScript. No backend required. Use Web Audio API for microphone access and blow detection. Modular architecture. Clean, well-commented code. Accessible and responsive. Include fallback button: "Tap to Blow Candles" in case microphone access is denied. Visual Style Magical birthday atmosphere. Warm candle lighting before blowing. Rich gradients and subtle shadows. Modern glassmorphism UI elements. Premium color palette. Cute but elegant, not childish. Deliverables Provide: Complete HTML. Complete CSS. Complete JavaScript. All required animations. Blow detection implementation. Confetti, balloons, stars, fireworks, smoke, and party popper effects. Instructions for embedding the component into an existing website. The final result should feel like a professional interactive birthday greeting card that delights users and creates a memorable "blow out the candles" experience.