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.
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.
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.
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
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.
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
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!
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.
FramerHub.io 
