Real bubble Animation

This tailwind example is contributed by JUGENDRA GANGWAR, on 24-Oct-2026. Component is made with Tailwind v4. It is responsive. similar terms for this example is Transitions

Other Animation

Author JUGENDRA GANGWAR

Tailwind v4 1

Fork Fullscreen

<div class="scene">
  <div class="rays"></div>
  <canvas id="c" width="2914" height="1924"></canvas>
  <div class="absolute left-0 right-0 top-6 text-center pointer-events-none px-4">
    <h1 class="text-3xl sm:text-5xl font-semibold tracking-tight">Bubbles</h1>
    <p class="mt-2 inline-block rounded-full px-4 py-1 text-sm backdrop-blur" style="background:var(--chip)">Click a bubble to pop it · move your cursor to nudge them</p>
  </div>
</div>

function resize() {
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    W = innerWidth; H = innerHeight;
    cv.width = W * dpr; cv.height = H * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }

function make(fromBottom = true) {
    const r = Math.pow(Math.random(), 2.2) * 48 + 5;   // many small, few large
    return {
      x: rnd(0, W), y: fromBottom ? H + r + rnd(0, 200) : rnd(0, H), r,
      vy: rnd(0.4, 1.4) * (1.6 - r / 60),               // big ones rise a bit slower
      vx: 0, ph: rnd(0, Math.PI * 2), wob: rnd(.2, .8), freq: rnd(.01, .03),
      a: rnd(.55, .9)
    };
  }

function drawBubble(b) {
    const { x, y, r, a } = b;
    ctx.save();
    ctx.globalAlpha = a;
    let g = ctx.createRadialGradient(x - r * .2, y - r * .2, r * .1, x, y, r);
    g.addColorStop(0, 'rgba(255,255,255,0.04)');
    g.addColorStop(.7, 'rgba(160,230,245,0.12)');
    g.addColorStop(.92, 'rgba(200,245,255,0.45)');
    g.addColorStop(1, 'rgba(255,255,255,0.75)');
    ctx.fillStyle = g;
    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
    ctx.strokeStyle = 'rgba(255,255,255,0.55)'; ctx.lineWidth = Math.max(.6, r * .02);
    ctx.stroke();
    g = ctx.createRadialGradient(x + r * .35, y + r * .4, r * .3, x + r * .35, y + r * .4, r * .9);
    g.addColorStop(0, 'rgba(255,120,200,0)');
    g.addColorStop(.8, 'rgba(255,170,220,0.22)');
    g.addColorStop(1, 'rgba(120,200,255,0)');
    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(255,255,255,0.9)';
    ctx.beginPath();
    ctx.ellipse(x - r * .38, y - r * .42, r * .22, r * .12, -.7, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(255,255,255,0.45)';
    ctx.beginPath(); ctx.arc(x + r * .4, y + r * .45, r * .07, 0, Math.PI * 2); ctx.fill();
    ctx.restore();
  }

resize();
  for (let i = 0; i < COUNT; i++) bubbles.push(make(false));
  frame();
})();
</script>

Related Examples

Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Coastal UI

1 year ago

2.6k
Loading dots
Black Loading dots

Anonymous

3 years ago

40.6k
Visernic Brand Logo | Logo Vector
Official SVG logo of Visernic Limited—a digital solutions agency offering software development, IT consulting, cybersecurity, and digital marketing worldwide. This vector asset is fully scalable and optimized for fast web performance.

Visernic

2 months ago

178
dashboard

Anonymous

1 week ago

7
barbershop

Ishimwe Shadad

10 months ago

649
Chat Interface Skeleton
Messaging interface skeleton built with Tailwind CSS.

JUGENDRA GANGWAR

1 week ago

11
Animated Gradient Background
animates a gradient background with vibrant colors. Slowly changes colors.

Anonymous

2 years ago

28.5k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10k
Indented Media Panels

Sherry Lynne

2 months ago

114
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
Active Beauty Main Page

Maxim

1 year ago

1.8k
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.9k