pompas
Popping soap bubble
A bubble with an iridescent film that wobbles and dodges the cursor; tap it and it bursts into droplets, then floats back.
Settings
Code
<div class="uvq11-bub"><div class="bg" aria-hidden="true"></div><i class="wd" aria-hidden="true"></i><button type="button" class="bb" aria-label="Pop the bubble"><span class="fm"></span><span class="hl"></span></button><span class="sp" aria-hidden="true"><i style="--a:0deg;--d:3.4em"></i><i style="--a:30deg;--d:4.1em"></i><i style="--a:60deg;--d:4.8em"></i><i style="--a:90deg;--d:3.4em"></i><i style="--a:120deg;--d:4.1em"></i><i style="--a:150deg;--d:4.8em"></i><i style="--a:180deg;--d:3.4em"></i><i style="--a:210deg;--d:4.1em"></i><i style="--a:240deg;--d:4.8em"></i><i style="--a:270deg;--d:3.4em"></i><i style="--a:300deg;--d:4.1em"></i><i style="--a:330deg;--d:4.8em"></i></span><p class="ct"><output>0</output> <span>bubbles</span></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
A soap bubble over a sunny meadow, made with a conic gradient masked to the rim for the thin film colors, an animated angle so the swirl keeps turning and two window reflections. The outline wobbles slowly, the bubble drifts away from a nearby pointer, and popping it sprays droplets before a new one grows from the wand.
The two colors steer the iridescence, and a counter keeps track of the bubbles you pop. It is a cheerful touch for kids’ apps, success screens, empty states or a playful call to action on a landing page.