React Soap Bubbles 2D Shaders

Realistic soap bubble simulation with procedural noise and cellular patterns. Pure WebGL shaders for React with TypeScript and shadcn/ui—smooth GPU animations.

React

WebGL

Building soap bubble effects?

Join our Discord community for help from other developers working with WebGL shaders.

Look, we've all tried to build realistic bubble effects. You either end up with basic circle animations that look nothing like proper soap bubbles or JavaScript calculations that can't handle complex bubble physics smoothly. This React component uses advanced WebGL shaders with cellular algorithms and procedural noise that actually runs at 60fps without melting your CPU.

Smooth soap bubbles animation

Mesmerizing 2D soap bubble simulation with realistic refraction and iridescence that won't destroy your performance metrics:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SoapBubbles2DShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  bubbleCount?: number;  bubbleSize?: number;  animationIntensity?: number;}const fragmentShader = `vec2 uv;vec2 hash2a(vec2 x, float anim) {    float r = 523.0 * sin(dot(x, vec2(53.3158, 43.6143)));    float xa1 = fract(anim);    float xb1 = anim - xa1;    anim += 0.5;    float xa2 = fract(anim);    float xb2 = anim - xa2;        vec2 z1 = vec2(fract(15.32354 * (r + xb1)), fract(17.25865 * (r + xb1)));    r = r + 1.0;    vec2 z2 = vec2(fract(15.32354 * (r + xb1)), fract(17.25865 * (r + xb1)));    r = r + 1.0;    vec2 z3 = vec2(fract(15.32354 * (r + xb2)), fract(17.25865 * (r + xb2)));    r = r + 1.0;    vec2 z4 = vec2(fract(15.32354 * (r + xb2)), fract(17.25865 * (r + xb2)));    return (mix(z1, z2, xa1) + mix(z3, z4, xa2)) * 0.5;}float hashNull(vec2 x) {    float r = fract(523.0 * sin(dot(x, vec2(53.3158, 43.6143))));    return r;}vec4 NC0 = vec4(0.0, 157.0, 113.0, 270.0);vec4 NC1 = vec4(1.0, 158.0, 114.0, 271.0);vec4 hash4(vec4 n) {     return fract(sin(n) * 753.5453123); }vec2 hash2(vec2 n) {     return fract(sin(n) * 753.5453123); }float noise2(vec2 x) {    vec2 p = floor(x);    vec2 f = fract(x);    f = f * f * (3.0 - 2.0 * f);        float n = p.x + p.y * 157.0;    vec2 s1 = mix(hash2(vec2(n) + NC0.xy), hash2(vec2(n) + NC1.xy), vec2(f.x));    return mix(s1.x, s1.y, f.y);}float noise3(vec3 x) {    vec3 p = floor(x);    vec3 f = fract(x);    f = f * f * (3.0 - 2.0 * f);        float n = p.x + dot(p.yz, vec2(157.0, 113.0));    vec4 s1 = mix(hash4(vec4(n) + NC0), hash4(vec4(n) + NC1), vec4(f.x));    return mix(mix(s1.x, s1.y, f.y), mix(s1.z, s1.w, f.y), f.z);}vec4 booble(vec2 te, vec2 pos, float numCells) {    float d = dot(te, te);        vec2 te1 = te + (pos - vec2(0.5, 0.5)) * 0.4 / numCells;    vec2 te2 = -te1;    float zb1 = max(pow(noise2(te2 * 1000.11 * d), 10.0), 0.01);    float zb2 = noise2(te1 * 1000.11 * d);    float zb3 = noise2(te1 * 200.11 * d);    float zb4 = noise2(te1 * 200.11 * d + vec2(20.0));        vec4 colorb = vec4(1.0);    colorb.xyz = colorb.xyz * (0.7 + noise2(te1 * 1000.11 * d) * 0.3);        zb2 = max(pow(zb2, 20.1), 0.01);    colorb.xyz = colorb.xyz * (zb2 * 1.9);        vec4 color = vec4(noise2(te2 * 10.8), noise2(te2 * 9.5 + vec2(15.0, 15.0)), noise2(te2 * 11.2 + vec2(12.0, 12.0)), 1.0);    color = mix(color, vec4(1.0), noise2(te2 * 20.5 + vec2(200.0, 200.0)));    color.xyz = color.xyz * (0.7 + noise2(te2 * 1000.11 * d) * 0.3);    color.xyz = color.xyz * (0.2 + zb1 * 1.9);        float r1 = max(min((0.033 - min(0.04, d)) * 100.0 / sqrt(numCells), 1.0), -1.6);    float d2 = (0.06 - min(0.06, d)) * 10.0;    d = (0.04 - min(0.04, d)) * 10.0;    color.xyz = color.xyz + colorb.xyz * d * 1.5;        float f1 = min(d * 10.0, 0.5 - d) * 2.2;    f1 = pow(f1, 4.0);    float f2 = min(min(d * 4.1, 0.9 - d) * 2.0 * r1, 1.0);    float f3 = min(d2 * 2.0, 0.7 - d2) * 2.2;    f3 = pow(f3, 4.0);        return vec4(color * max(min(f1 + f2, 1.0), -0.5) + vec4(zb3) * f3 - vec4(zb4) * (f2 * 0.5 + f1) * 0.5);}vec4 Cells(vec2 p, vec2 move, in float numCells, in float count, float blur) {    vec2 inp = p + move;    inp *= numCells;    float d = 1.0;    vec2 te;    vec2 pos;        for (int xo = -1; xo <= 1; xo++) {        for (int yo = -1; yo <= 1; yo++) {            vec2 tp = floor(inp) + vec2(xo, yo);            vec2 rr = mod(tp, numCells);            tp = tp + (hash2a(rr, iTime * 0.1 * u_speed) + hash2a(rr, iTime * 0.1 * u_speed + 0.25)) * 0.5;            vec2 l = inp - tp;            float dr = dot(l, l);            if (hashNull(rr) > count)                if (d > dr) {                    d = dr;                    pos = tp;                }        }    }        if (d >= 0.06 * u_bubbleSize) return vec4(0.0);    te = inp - pos;         if (d < 0.04 * u_bubbleSize) uv = uv + te * (d) * 2.0 * u_animationIntensity;        if (blur > 0.0001) {        vec4 c = vec4(0.0);        for (float x = -1.0; x < 1.0; x += 0.5) {            for (float y = -1.0; y < 1.0; y += 0.5) {                c += booble(te + vec2(x, y) * blur, p, numCells);            }        }        return c * 0.05;    }    return booble(te, p, numCells);}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    uv = (fragCoord.xy) / iResolution.y * 0.5;        vec2 l1 = vec2(iTime * 0.02, iTime * 0.02) * u_speed;    vec2 l2 = vec2(-iTime * 0.01, iTime * 0.007) * u_speed;    vec2 l3 = vec2(0.0, iTime * 0.01) * u_speed;        vec4 e = vec4(noise3(vec3(uv * 2.0, iTime * 0.1 * u_speed)),                   noise3(vec3(uv * 2.0 + vec2(200.0), iTime * 0.1 * u_speed)),                   noise3(vec3(uv * 2.0 + vec2(50.0), iTime * 0.1 * u_speed)), 0.0);        float cellScale = 2.0 / u_bubbleCount;        vec4 cr1 = Cells(uv, vec2(20.2449, 93.78) + l1, 2.0 * cellScale, 0.5, 0.005);    vec4 cr2 = Cells(uv, vec2(0.0, 0.0), 3.0 * cellScale, 0.5, 0.003);    vec4 cr3 = Cells(uv, vec2(230.79, 193.2) + l2, 4.0 * cellScale, 0.5, 0.0);    vec4 cr4 = Cells(uv, vec2(200.19, 393.2) + l3, 7.0 * cellScale, 0.8, 0.01);    vec4 cr5 = Cells(uv, vec2(10.3245, 233.645) + l3, 9.2 * cellScale, 0.9, 0.02);    vec4 cr6 = Cells(uv, vec2(10.3245, 233.645) + l3, 14.2 * cellScale, 0.95, 0.05);        e = max(e - vec4(dot(cr6, cr6)) * 0.1, 0.0) + cr6 * 1.6;    e = max(e - vec4(dot(cr5, cr5)) * 0.1, 0.0) + cr5 * 1.6;    e = max(e - vec4(dot(cr4, cr4)) * 0.1, 0.0) + cr4 * 1.3;    e = max(e - vec4(dot(cr3, cr3)) * 0.1, 0.0) + cr3 * 1.1;    e = max(e - vec4(dot(cr2, cr2)) * 0.1, 0.0) + cr2 * 1.4;    e = max(e - vec4(dot(cr1, cr1)) * 0.1, 0.0) + cr1 * 1.8;        fragColor = e;}`;export const SoapBubbles2DShaders = forwardRef<HTMLDivElement, SoapBubbles2DShadersProps>((  {    className,    speed = 1.0,    bubbleCount = 1.0,    bubbleSize = 1.0,    animationIntensity = 1.0,    ...props  },  ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={fragmentShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_bubbleCount: { type: '1f', value: bubbleCount },          u_bubbleSize: { type: '1f', value: bubbleSize },          u_animationIntensity: { type: '1f', value: animationIntensity },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});SoapBubbles2DShaders.displayName = "SoapBubbles2DShaders";export default SoapBubbles2DShaders;

Created by foxes in 2015-08-23

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL shaders with cellular pattern generation, multi-layered noise, and realistic bubble physics. Works seamlessly with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/soap-bubbles-2d-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/soap-bubbles-2d-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/soap-bubbles-2d-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/soap-bubbles-2d-shaders.json

Usage

import { SoapBubbles2DShaders } from "@/components/ui/soap-bubbles-2d-shaders";

export default function Hero() {
  return (
    <SoapBubbles2DShaders>
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </SoapBubbles2DShaders>
  );
}

Why most bubble implementations suck

Most developers try to animate bubbles with CSS animations or basic particle systems. Bad idea. You're dealing with unrealistic circular shapes, poor refraction effects, and wondering why your React app feels sluggish. Some use canvas drawing with JavaScript bubble physics, which sounds smart until you realize you're computing cellular algorithms for every bubble on every frame.

This React component uses mathematical cellular pattern generation with multi-layered procedural noise and realistic bubble distortion. The GPU handles everything using optimized hash functions with authentic iridescent color generation. No JavaScript calculations, no particle system overhead, just smooth 60fps mathematical bubble simulation.

Features

Zero JavaScript animation overhead - Pure WebGL cellular algorithms run on GPU
Cellular pattern generation with sophisticated hash functions for realistic bubble placement
Multi-layered procedural noise for authentic bubble surface textures
Realistic refraction effects with UV distortion and iridescent coloring
TypeScript definitions for proper IDE support in React projects
Customizable parameters with 4 props for complete control
Performance optimization through efficient cellular algorithms
shadcn/ui compatible for consistent design systems
Responsive design with automatic canvas resizing

API Reference

SoapBubbles2DShaders

Main container component for the soap bubbles effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation speed multiplier (0.1 to 3.0)
`bubbleCount`	`number`	`1.0`	Bubble density and quantity (0.5 to 2.0)
`bubbleSize`	`number`	`1.0`	Size of individual bubbles (0.5 to 2.0)
`animationIntensity`	`number`	`1.0`	Bubble movement intensity (0.1 to 2.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Common gotchas

Animation not working: WebGL might not be supported in the browser. The component logs warnings when WebGL initialization fails. Check browser compatibility.

Performance issues on mobile: Some older phones struggle with complex cellular algorithms and multi-layered noise. Consider reducing speed and animationIntensity props for better performance.

Bubbles too small/large: Adjust the bubbleSize prop. Lower values (0.5-0.7) create smaller, more delicate bubbles, higher values (1.5-2.0) create larger, more prominent bubbles.

Too many/few bubbles: Use the bubbleCount prop to control bubble density. Lower values create sparse bubble fields, higher values create dense bubble clusters.

Movement too chaotic: Lower the animationIntensity prop for more gentle bubble movement. Values around 0.5-0.7 work well for subtle floating effects.

Explore other shader-based background components for React applications:

React Soap Bubbles 2D Shaders

Smooth soap bubbles animation

Installation

Usage

Why most bubble implementations suck

Features

API Reference

SoapBubbles2DShaders

Common gotchas

You might also like

Plasma Shaders

Sparks Drifting Shaders

Sphere Field Shaders

Cosmic Waves Shaders

Nebula Shaders

Aurora Shaders

Questions developers actually ask

On this page

React Soap Bubbles 2D Shaders