---
title: "BubblePit — Free Framer component · Best of Framer"
description: "Free Framer component · by Antony Packia Titus · Backgrounds. BubblePit is a physics-based Framer code component that renders your images as glassy, light-refracting spheres that fall,…"
canonical: "https://framer.elliotli.dev/component/bubblepit"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/BubblePit

# BubblePit

Physics based glassy bubble pit

[View on Framer](https://framer.com/marketplace/components/bubblepit/?via=elliot-li)

![BubblePit preview image 1](https://framer.elliotli.dev/og/component/bubblepit/e5d771e0237acb61/1600x1200.jpg)

## Summary

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.

## Description

**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.

### What it does:

-   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
    

### Customizable controls:

-   **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/](https://www.linkedin.com/in/aptitus/)

**Support includes:**

-   Questions about the component
    
-   Bug reports and fixes
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #709

## Details

- **Author**: Antony Packia Titus
- **Published**: 2026-05-11
- **Updated**: 2026-05-12
- **Added**: 2026-04-22
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background