Gooey balls loader
Three balls that slide into each other and melt together like liquid, then pull apart with a stretchy neck.
Settings
Code
<svg width="0" height="0" style="position:absolute"><filter id="ul-goo"><feGaussianBlur stdDeviation="6"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -9"/></filter></svg><div class="ul-goo"><i></i><i></i><i></i></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 Loaders
Where to use it
The gooey effect makes shapes look like drops of something thick, which is great for brands with a liquid personality: a bubble tea shop, a juice bar’s ordering page or a paint and ink store. Two balls glide back and forth through a third that gently breathes, and they melt into one wherever they touch.
Only the main color is used, since the melt looks best when the blobs seem made of one material. Keep it at a medium or large size; when it is tiny, the stretchy neck between the balls disappears and it looks like three plain dots.