---
title: "Gravity Bouncing Balls | FramerHub"
canonical_url: "https://framerhub.io/components/bouncing-balls"
last_updated: "2026-06-15T14:46:28.188Z"
meta:
  description: "Interactive 2D physics simulation with gravity, collisions, and mouse repulsion. Free Framer component for client sites, portfolios, and product pages."
  "og:description": "Interactive 2D physics simulation with gravity, collisions, and mouse repulsion. Free Framer component for client sites, portfolios, and product pages."
  "og:title": "Gravity Bouncing Balls | FramerHub"
---

# **Gravity Bouncing Balls **

Interactive 2D physics simulation with gravity, collisions, and mouse repulsion.

One-time payment

Lifetime updates

Commercial license

## **Overview** Interactive 2D physics simulation with gravity, collisions, and mouse repulsion. - Real-time 2D physics engine - Mouse repulsion interaction - Customizable object sizes - Multiple color palettes - Adjustable bounciness and friction - Responsive canvas ## Interactive Physics Playground Transform your Framer site with a mesmerizing physics simulation. Watch colorful objects fall under gravity, bounce off walls and floors, and scatter when users interact with their mouse. A playful, attention-grabbing element for modern websites. ## Features**Realistic Physics Engine** Simulates gravity, velocity, restitution (bounciness), and friction. Objects interact with container boundaries naturally, creating lifelike movement.**Mouse Repulsion** Enable interactive mode to let users push and scatter objects with their cursor—adding a delightful layer of playfulness to your design.**Customizable Objects** Control object count, size range (min/max), color palettes, bounciness, and ground friction. Fine-tune every aspect of the simulation.**Color Palette Options** Choose from Random, Fixed Color, Warm Tones, Cool Tones, or Pastel modes to perfectly match your brand aesthetic.**Performance Optimized** Canvas-aware rendering reduces GPU load on the Framer canvas. Smooth animation loop with efficient collision detection. ## Use Cases**Hero Sections** — Create an engaging, interactive hero that captures visitor attention instantly.**About Pages** — Add personality and playfulness to tell your brand story.**Portfolio Showcase** — Stand out with dynamic, physics-driven visual elements.**Loading States** — Entertain users while content loads with bouncing animations.![Gravity Bouncing Balls Preview](https://framerhub.io/framerhub/img/components/control/BouncingBalls.png) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Bouncing Balls in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Quick Tips**Best Performance** — Keep object count between 10-30 for smooth animation. Reduce to 10-15 on mobile.**Color Combinations** — Dark backgrounds (black or deep blue) make vibrant objects pop. Try pastel mode for softer aesthetics.**Layering** — Place text content above the component. White text with subtle shadows provides best readability.**Physics Feel** — Lower bounciness (0.3-0.5) feels more grounded. Higher values (0.8-1.0) create energetic bouncing. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Bouncing Balls brings websites to life with genuine interactivity. It's not just a decoration—it's an experience that invites users to play, explore, and engage. Whether you want a subtle background effect or a bold statement piece, this component adapts to your creative vision with extensive customization options. --- ### **Gravity Bouncing Balls - FREE** Interactive 2D physics simulation with gravity, collisions, and mouse repulsion.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub.