Skip to content

component

BubblePit

By Antony Packia Titus

Details

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/ Support includes: Questions about the component Bug reports and fixes

Introduction

Physics based glassy bubble pit

Rank history

Daily rank per list, from the first snapshot — lower is better.

12014014988/148/228/309/79/15
  • All · #498