Bubble Background

"use client"

import { BubbleBackground } from "@/components/animate-ui/backgrounds/bubble"

export default function BubbleBackgroundDemo({
  interactive = true,
}: {
  interactive?: boolean
}) {
  return (
    <BubbleBackground interactive={interactive} className="absolute inset-0" />
  )
}

InstallationCopy Anchor Link

npx shadcn@latest add @animate-ui/backgrounds-bubble

pnpm dlx shadcn@latest add @animate-ui/backgrounds-bubble

yarn dlx shadcn@latest add @animate-ui/backgrounds-bubble

bun x shadcn@latest add @animate-ui/backgrounds-bubble

UsageCopy Anchor Link

import { BubbleBackground } from '@/components/animate-ui/backgrounds/bubble';

export function Hero() {
  return (
    <section className="relative h-[480px] overflow-hidden">
      <BubbleBackground className="absolute inset-0" />
    </section>
  );
}

AnimationCopy Anchor Link

• Five blurred, color-blended bubbles move on slow loops: two drift 100px back and forth (30s and 40s, eased in and out), three orbit around points off to the side (full turns in 20s, 40s and 20s, linear).
• With interactive, a sixth bubble follows the mouse on a spring (transition), relative to the center of the container. On touch screens, a tap moves it too.
• The loops pause off screen and while the tab is hidden.
• Under reduced motion, the bubbles hold a still frame and the follower stays put.

API ReferenceCopy Anchor Link

BubbleBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to GlitchWorker for the inspiration