Stars 背景

安装

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

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

用法

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

import { StarsBackground } from '@/components/animate-ui/backgrounds/stars';

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

动效

• 三层星点（1px、2px、3px）以不同速度向上循环，最小的一层在 speed 秒内走完 2000px，另外两层分别用两倍与三倍时间。
• 星空相对容器中心以 factor / transition 的弹簧做视差偏移，触屏点击同样生效；减少动效下停止滚动。

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

API

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

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