Hole 背景

由圆环组成的隧道向深处滑动，粒子从隧道中升起，上面覆着一层每 5s 换色的极光。

安装

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

终端

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

用法

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

hole.tsx

import { HoleBackground } from '@/components/animate-ui/backgrounds/hole';

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

动效

画布按设备像素比适配容器；圆环与粒子每个显示帧推进一步，因此在 120Hz 屏幕上会更快。
极光每 5s 沿色相循环一次；减少动效下保留静态构图。

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

API

属性	类型	默认值
strokeColor	`string`	`'#737373'`
numberOfLines	`number`	`50`
numberOfDiscs	`number`	`50`
particleRGBColor	`[number, number, number]`	`[255, 255, 255]`
…props	`React.ComponentProps<'div'>`	`—`

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

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