BubblePit is a physics-based Framer code component that renders your images as glassy, light-refracting spheres that fall, bounce, and react to your cursor in real time.
Bubbles spawn on load (or when a trigger element enters the viewport)
Cursor pushes bubbles away with adjustable air pressure
Click anywhere to spawn new bubbles
Each bubble gets a glassy lens effect baked from your image
Images - up to 20 images (icons, logos, photos)
Bubble Count - 5 to 100
Gravity - 0 (float) to 3 (heavy drop)
Bounciness - 0 to 1
Min / Max Radius - control bubble size range
Spawn Duration - stagger timing across load
Spawn on Click + Spawn Count
Air Pressure - cursor push strength
Background color + optional vignette
Trigger ID - link spawn to any element's scroll position
Animation toggle - enable/disable entirely
Questions? Connect on LinkedIn: https://www.linkedin.com/in/aptitus/
Support includes:
Questions about the component
Bug reports and fixes
BubblePit is a physics-based Framer code component that renders your images as glassy, light-refracting spheres that fall, bounce, and react to your cursor in real time.
Bubbles spawn on load (or when a trigger element enters the viewport)
Cursor pushes bubbles away with adjustable air pressure
Click anywhere to spawn new bubbles
Each bubble gets a glassy lens effect baked from your image
Images - up to 20 images (icons, logos, photos)
Bubble Count - 5 to 100
Gravity - 0 (float) to 3 (heavy drop)
Bounciness - 0 to 1
Min / Max Radius - control bubble size range
Spawn Duration - stagger timing across load
Spawn on Click + Spawn Count
Air Pressure - cursor push strength
Background color + optional vignette
Trigger ID - link spawn to any element's scroll position
Animation toggle - enable/disable entirely
Questions? Connect on LinkedIn: https://www.linkedin.com/in/aptitus/
Support includes:
Questions about the component
Bug reports and fixes
