Bubble Popper is a fully interactive component that renders realistic, iridescent bubbles with real-time physics. Bubbles float upward with natural drift and wobble, and burst into particle effects when clicked or tapped. Use it as an ambient background layer, a playful hero section, a gamified loading screen, or a standalone interactive experience. Every visual parameter is customisable directly from the Framer properties panel.
Four distinct pop effects - Realistic water spray, Burst, Implode, and Sparkle - each with multi-layered particle systems
Iridescent bubble rendering with adjustable rainbow film intensity and customisable bubble tint
Real-time physics including buoyancy, horizontal drift, Brownian micro-motion, and optional ripple waves that push nearby bubbles on pop
Smooth fade-in and fade-out zones so bubbles appear and disappear naturally at screen edges
Optional pop score counter with font control for full typographic customisation
Transparent background by default - layer it over any section of your site
Bubble Count - max bubbles on screen at once (5-30)
Spawn Rate - how quickly new bubbles appear (/sec)
Bubble Size - average radius in pixels (20-80)
Pop Effect - Realistic, Burst, Implode, or Sparkle
Iridescence - rainbow film intensity (0-1)
Bubble Tint - base colour for every bubble
Splash Color - colour of the water droplets on pop
Pop Ripple - toggle ripple wave that pushes nearby bubbles
Ripple Strength - force of the ripple effect
Rise Speed - how fast bubbles float upward
Wobble - horizontal drift amplitude
Auto Refill - continuously spawn new bubbles to maintain count
Show Score - display a pop counter overlay
Fade In/Out - bubbles fade in at bottom and out at top
Background - canvas background colour
Font picker for full typographic control over the score display
Hero sections and landing pages - add depth and delight above the fold without affecting performance
Portfolio and agency sites - create a memorable first impression with an ambient interactive background
Gamified experiences and loading screens - give visitors something to play with while content loads or between sections
Event and product launch pages - build anticipation with a playful, on-brand interactive layer
Drop it onto your canvas, adjust the controls, and ship a page that visitors actually want to touch.
Aidan Looker
