BalloonBackground

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.

Features

• 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

Property Controls

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

Animation Styles

• Smooth — gentle sine wave wobble as default

• Bouncy — energetic movement with vertical bounce

• Zigzag — sharp horizontal oscillation

• Spiral — circular motion combined with upward float