BouncingBalls

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.

Customization

Tweak every aspect of the simulation to match your vision:

CategoryControlRangePhysicsObject Count1 - 100Gravity0.01 - 2Bounciness0.1 - 1Friction0.5 - 1VisualMin/Max Size5 - 100Color ModeRandom, Fixed, Warm, Cool, PastelBackgroundAny colorInteractionMouse RepulsionOn/OffRadius50 - 500Strength0.1 - 10

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

Physics Gravity 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.