Skip to content

component

BalloonBackground

By Hamim Reza

Details

Summary

Floating balloons blast particles

Description

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

Introduction

Floating balloons blast particles

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150118538/148/228/309/79/15
  • All · #1806