---
title: "BalloonBackground — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Backgrounds. Floating balloons blast particles"
canonical: "https://framer.elliotli.dev/component/balloonbackground"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/BalloonBackground

# BalloonBackground

Floating balloons blast particles

[View on Framer](https://framer.com/marketplace/components/balloonbackground/?via=elliot-li)

![BalloonBackground preview image 1](https://framer.elliotli.dev/og/component/balloonbackground/edaff57a5c339479/1600x1200.jpg)

## 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5444

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-04-13
- **Updated**: 2026-07-09
- **Added**: 2026-04-02
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background