Bubble Burst

Interactive 3D Physics for Framer

Add dynamic floating spheres that respond to mouse movement with realistic physics. Perfect for hero sections, backgrounds, and interactive brand experiences.

Designed for designers who want premium 3D effects without touching code.

Features

Realistic Physics Engine Gravity, friction, and wall collisions create natural movement. Balls bounce, roll, and interact like real objects.

Interactive Mouse Control Your cursor becomes a magnetic sphere that attracts and pushes balls. Creates engaging user interactions automatically.

Full Visual Control Choose three custom colors for your spheres. Adjust metalness, roughness, and clearcoat for glass, metal, or matte finishes.

Flexible Scale Control ball count from 10 to 500, adjust sizes, and set boundary limits to fit any layout or section size.

Lighting System Fine-tune ambient and point light intensity to match your design style—from subtle elegance to dramatic contrast.

Performance First Smooth 60fps animation that adapts to device capabilities. Optimized for both desktop and mobile experiences.

Use Cases

Hero Sections — Create memorable first impressions with interactive 3D backgrounds

Product Launches — Showcase innovation with physics-driven animations that demand attention

Agency Portfolios — Demonstrate technical capabilities with polished 3D interactions

Brand Experiences — Build unique, on-brand visuals with custom colors and materials

Landing Pages — Add premium depth and interactivity that elevates perceived value

Event Pages — Generate excitement with dynamic backgrounds that visitors can play with

How to Use

Installation

After purchasing from FramerHub:

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Bubble Burst 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)

Customization

Control everything from Framer's properties panel:

Physics Settings

• Ball Count: 10–500 particles
• Gravity: Control downward force
• Friction: Adjust movement smoothness
• Wall Bounce: Set elasticity of collisions
• Max Velocity: Limit movement speed

Visual Style

• Three custom colors for sphere variety
• Min/Max Size: Control sphere scale range
• Cursor Ball Size: Adjust interactive sphere
• Metalness, Roughness, Clearcoat: Define surface appearance

Lighting

• Ambient Intensity: Overall scene brightness
• Light Intensity: Spotlight strength

Boundaries

• Max X, Y, Z: Define container dimensions

Quick Tips

Color Harmony — Use colors from your brand palette. High contrast creates visual interest

Performance Balance — Start with 150–200 balls. Add more if performance remains smooth

Cursor Interaction — Enable "Display Cursor" for interactive experiences. Disable for ambient backgrounds

Material Finish — High metalness + low roughness = glossy. Low metalness + high roughness = matte

Layering — Place text or content above the component. Dark text on light spheres works best

License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

Why Designers Choose This

One component, endless possibilities. Start with beautiful physics-based motion, then customize colors, materials, and behavior to match any brand. No physics knowledge required—just intuitive controls in Framer's properties panel.

Perfect for agencies delivering premium work fast and designers who want to add depth and interactivity that makes projects stand out.