A physics-based floating balloon background with mouse-pop interaction, particle burst effects, and realistic spring tail physics. Four animation styles, gradient balloon shading, and auto-respawn on pop or off-screen exit. Built for celebration pages, children's content, playful brand experiences, and any hero section that needs energetic ambient motion.
Physics-based balloon float with realistic spring tail animation
Mouse interaction — balloons pop when cursor gets close
20-particle burst explosion on each pop
Gravity-affected particles with fade-out and auto-cleanup
Auto-respawn — popped balloons regenerate after random delay
Balloons that float off-screen respawn at the bottom
Four animation styles — smooth, bouncy, zigzag, spiral
Three-color gradient shading per balloon — light, base, dark
Configurable balloon count (5–100)
Configurable min and max balloon size (10–100px)
Customizable balloon color sets — base, light, dark per set
Wobble intensity control (0–3)
Float speed multiplier (0.1–3)
Optional radial gradient background overlay
Hardware-accelerated canvas rendering at 60fps
High-DPI and Retina display support
Pauses animation in Framer canvas editor
No dependencies
Balloons
Balloon Count — number of balloons (5–100)
Min Size · Max Size — balloon radius range (10–100px)
Balloon Colors — array of color sets · base, light, dark per set
Animation
Animation Style — smooth, bouncy, zigzag, spiral
Wobble Intensity — side-to-side movement strength (0–3)
Float Speed — vertical ascent multiplier (0.1–3)
Background
Background Color — base background color
Gradient — toggle radial gradient overlay
Smooth — gentle sine wave wobble as default
Bouncy — energetic movement with vertical bounce
Zigzag — sharp horizontal oscillation
Spiral — circular motion combined with upward float
HTML5 Canvas 2D rendering for GPU-accelerated 60fps animation
Spring-damper tail physics with gravity simulation
Proportional tail scaling — 1.3x and 4x balloon radius
Device pixel ratio support for crisp Retina and 4K displays
RequestAnimationFrame loop with proper cleanup on unmount
Static renderer detection pauses animation in Framer canvas
Event listener cleanup on unmount prevents memory leaks
20 balloons · 20px min size · 50px max size
Smooth animation · Wobble 1.0 · Float speed 1.0
Gradient overlay enabled
Celebration pages · Birthday and event sites · Children's content · Playful brand experiences · Hero section backgrounds · Landing page decorations · Interactive portfolio pieces · Party and festive themes
Hamim Reza
