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 125

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

Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.7k
background animation
background animation

Anonymous

3 years ago

53.2k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22.1k
background animation
background animation

Jayendra Madara

2 years ago

4k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.5k
Moving Background Animation

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

1 year ago

4.4k
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.8k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Nick Girga

1 year ago

2k
Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

1 year ago

1.4k
background animation
background animation

Anonymous

11 months ago

1.2k