React Bubble Background

Floating bubbles that follow your mouse like a lava lamp came to life. Build mesmerizing React backgrounds with gooey SVG filters, TypeScript support, and smooth spring physics for Next.js applications with shadcn/ui.

Motion

Trying to implement bubble effects?

Join our Discord community for help from other developers.

Remember lava lamps? This React component creates that same hypnotic effect in your browser. Six bubbles floating, merging, and following your cursor with spring physics. The gooey effect isn't fake—it's real SVG filters making the bubbles merge like actual liquid.

Interactive floating bubbles

Watch bubbles merge and follow your cursor with spring physics:

Loading component...

'use client';import * as React from 'react';import {  motion,  type SpringOptions,  useMotionValue,  useSpring,} from 'motion/react';import { cn } from '@/lib/utils';type BubbleBackgroundProps = React.ComponentProps<'div'> & {  interactive?: boolean;  transition?: SpringOptions;  colors?: {    first: string;    second: string;    third: string;    fourth: string;    fifth: string;    sixth: string;  };};function BubbleBackground({  ref,  className,  children,  interactive = false,  transition = { stiffness: 100, damping: 20 },  colors = {    first: '18,113,255',    second: '221,74,255',    third: '0,220,255',    fourth: '200,50,50',    fifth: '180,180,50',    sixth: '140,100,255',  },  ...props}: BubbleBackgroundProps) {  const containerRef = React.useRef<HTMLDivElement>(null);  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);  const mouseX = useMotionValue(0);  const mouseY = useMotionValue(0);  const springX = useSpring(mouseX, transition);  const springY = useSpring(mouseY, transition);  React.useEffect(() => {    if (!interactive) return;    const currentContainer = containerRef.current;    if (!currentContainer) return;    const handleMouseMove = (e: MouseEvent) => {      const rect = currentContainer.getBoundingClientRect();      const centerX = rect.left + rect.width / 2;      const centerY = rect.top + rect.height / 2;      mouseX.set(e.clientX - centerX);      mouseY.set(e.clientY - centerY);    };    currentContainer?.addEventListener('mousemove', handleMouseMove);    return () =>      currentContainer?.removeEventListener('mousemove', handleMouseMove);  }, [interactive, mouseX, mouseY]);  return (    <div      ref={containerRef}      data-slot="bubble-background"      className={cn(        'relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900',        className,      )}      {...props}    >      <style>        {`            :root {              --first-color: ${colors.first};              --second-color: ${colors.second};              --third-color: ${colors.third};              --fourth-color: ${colors.fourth};              --fifth-color: ${colors.fifth};              --sixth-color: ${colors.sixth};            }          `}      </style>      <svg        xmlns="http://www.w3.org/2000/svg"        className="absolute top-0 left-0 w-0 h-0"      >        <defs>          <filter id="goo">            <feGaussianBlur              in="SourceGraphic"              stdDeviation="10"              result="blur"            />            <feColorMatrix              in="blur"              mode="matrix"              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"              result="goo"            />            <feBlend in="SourceGraphic" in2="goo" />          </filter>        </defs>      </svg>      <div        className="absolute inset-0"        style={{ filter: 'url(#goo) blur(40px)' }}      >        <motion.div          className="absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--first-color),0.8)_0%,rgba(var(--first-color),0)_50%)]"          animate={{ y: [-50, 50, -50] }}          transition={{ duration: 30, ease: 'easeInOut', repeat: Infinity }}        />        <motion.div          className="absolute inset-0 flex justify-center items-center origin-[calc(50%-400px)]"          animate={{ rotate: 360 }}          transition={{            duration: 20,            ease: 'linear',            repeat: Infinity,            repeatType: 'loop',          }}        >          <div className="rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0%,rgba(var(--second-color),0)_50%)]" />        </motion.div>        <motion.div          className="absolute inset-0 flex justify-center items-center origin-[calc(50%+400px)]"          animate={{ rotate: 360 }}          transition={{ duration: 40, ease: 'linear', repeat: Infinity }}        >          <div className="absolute rounded-full size-[80%] bg-[radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0%,rgba(var(--third-color),0)_50%)] mix-blend-hard-light top-[calc(50%+200px)] left-[calc(50%-500px)]" />        </motion.div>        <motion.div          className="absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0%,rgba(var(--fourth-color),0)_50%)] opacity-70"          animate={{ x: [-50, 50, -50] }}          transition={{ duration: 40, ease: 'easeInOut', repeat: Infinity }}        />        <motion.div          className="absolute inset-0 flex justify-center items-center origin-[calc(50%_-_800px)_calc(50%_+_200px)]"          animate={{ rotate: 360 }}          transition={{ duration: 20, ease: 'linear', repeat: Infinity }}        >          <div className="absolute rounded-full size-[160%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0%,rgba(var(--fifth-color),0)_50%)] top-[calc(50%-80%)] left-[calc(50%-80%)]" />        </motion.div>        {interactive && (          <motion.div            className="absolute rounded-full size-full mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--sixth-color),0.8)_0%,rgba(var(--sixth-color),0)_50%)] opacity-70"            style={{              x: springX,              y: springY,            }}          />        )}      </div>      {children}    </div>  );}export { BubbleBackground, type BubbleBackgroundProps };

Built for React applications with TypeScript and Next.js. The bubbles use Motion for smooth animations, while SVG filters create the realistic gooey merging effect. Enable interactive mode and watch them follow your cursor with configurable spring physics.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/bubble-background.json

npx shadcn@latest add https://www.shadcn.io/registry/bubble-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/bubble-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/bubble-background.json

Usage

import { BubbleBackground } from "@/components/ui/bubble-background";

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

Why most bubble backgrounds look fake

Most developers use basic circles with opacity. They don't merge, they just overlap. Some try to fake it with blur, but it looks flat. Real bubbles merge like liquid, with that characteristic gooey connection when they touch.

This React component uses SVG feGaussianBlur and feColorMatrix filters to create actual metaball effects. When bubbles get close, they merge smoothly like real liquid. Add spring physics for mouse tracking, and you've got bubbles that feel alive, not just animated circles floating around.

Features

Real metaball merging with SVG filters creating liquid-like connections
Spring physics mouse tracking with configurable stiffness and damping
Six customizable bubbles each with unique animation patterns
30-40 second animation cycles for natural, non-repetitive movement
TypeScript definitions for all props and configurations
Mix-blend-mode effects for color depth and transparency
Zero JavaScript animation overhead using CSS animations
shadcn/ui compatible with full Tailwind CSS support

API Reference

BubbleBackground

Main container component for the bubble effect.

Prop	Type	Default	Description
`interactive`	`boolean`	`false`	Enable mouse tracking for bubbles
`transition`	`SpringOptions`	`{ stiffness: 100, damping: 20 }`	Spring physics config for mouse tracking
`colors`	`ColorConfig`	See below	RGB values for bubble colors
`children`	`ReactNode`	-	Content to display over bubbles
`className`	`string`	-	Additional Tailwind CSS classes

Color Configuration

type ColorConfig = {
  first: string;   // RGB like "18,113,255"
  second: string;  // RGB like "221,74,255"
  third: string;   // RGB like "0,220,255"
  fourth: string;  // RGB like "200,50,50"
  fifth: string;   // RGB like "180,180,50"
  sixth: string;   // RGB like "140,100,255"
}

Common gotchas

Performance with filters: SVG filters can be heavy on weak GPUs. The blur and color matrix operations run per frame. Consider disabling on low-end devices.

Mouse tracking lag: Spring physics look smooth but add slight delay. Adjust stiffness (higher = snappier) and damping (lower = bouncier) to taste.

Color format: Colors must be RGB strings like "255,0,0", not hex or named colors. The component injects them as CSS variables.

Z-index layering: Content needs relative z-10. The bubbles sit at base level, filters need specific stacking.

Mobile interaction: Touch doesn't have hover, so interactive mode won't work well. Consider disabling on mobile or using touch events.

Explore other animated background components for React applications:

Interactive floating bubbles

Installation

Usage

Why most bubble backgrounds look fake

Features

API Reference

BubbleBackground

Color Configuration

Common gotchas

You might also like

Particles

Waves

Vortex

Sparkles

Gradient Animation

Noise

Questions developers actually ask

On this page

React Bubble Background