Bubble 背景

五个经过模糊与颜色混合的气泡缓慢移动，可作为首屏或区块背景；开启 interactive 后第六个气泡跟随鼠标。

安装

背景是项目里的一个文件，用 shadcn CLI 添加，然后按需要改颜色与速度。

终端

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

用法

把背景放进一个定位容器，内容渲染在上层；容器需要自己处理溢出。

bubble.tsx

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>
  );
}

动效

两个气泡以 30s 与 40s 的缓入缓出往返漂移 100px；三个气泡分别用 20s、40s、20s 绕画面外的一点做匀速圆周。
跟随鼠标的气泡使用 transition 弹簧（默认 stiffness 100 / damping 20），触屏点击也会移动；离开屏幕或标签页隐藏时暂停，减少动效下停在静止帧。

所有背景都会在离开视口与标签页隐藏时暂停；减少动效时保留静止构图，不播放位移与循环。

API

属性	类型	默认值
interactive	`boolean`	`false`
transition	`SpringOptions`	`{ stiffness: 100, damping: 20 }`
colors	`{ first: string; second: string; third: string; fourth: string; fifth: string; sixth: string }`	`{ 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	`React.ComponentProps<'div'>`	`—`

背景接受容器 div 的全部属性，className 用来控制位置与尺寸；内容作为children 渲染在背景之上。

内容对应官方文档 2026-10-18 版本。