Balls Physics — Balls move naturally using gravity

Falling Balls Physics Background is a customizable animated background component for Framer, featuring smooth, physics-based motion and interactive behavior. Balls move naturally using gravity and collisions and react to user input such as mouse movement, clicks, scrolling, and wind forces.

The component is optimized for performance, uses SVG for crisp rendering on all screen sizes, and runs without unnecessary re-renders, making it suitable for production websites and landing pages.

Key Features

• Physics-based motion with gravity, reverse gravity, and elastic collisions

• Customizable ball count, size, size variation, and colors

• Mouse interaction with repel and magnetic push effects

• Scroll-based physics reacting to page movement

• Optional wind simulation with adjustable direction and force

• Flexible spawning modes (initial, click, or interval) and spawn locations

• Performance mode with adaptive frame rate

• SVG rendering for sharp, resolution-independent visuals

• Static fallback for Framer canvas and previews

Use Cases

• Hero and landing page backgrounds

• Interactive portfolios

• Experimental UI and motion design

• Playful brand visuals

• Scroll-reactive storytelling sections