Gravity Stars 背景

在画布上漂移的星点，靠近指针时会被吸引或推开，并在离开后逐渐恢复。

安装

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

终端

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

用法

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

gravity-stars.tsx

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

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

动效

星点以 movementSpeed 漂移，逐渐减速，从画布边缘环绕出现并发光。
指针附近（mouseInfluence）的星点受 mouseGravity 吸引或排斥并变亮；指针离开后最后位置仍继续作用。

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

API

属性	类型	默认值
starsCount	`number`	`75`
starsSize	`number`	`2`
starsOpacity	`number`	`0.75`
glowIntensity	`number`	`15`
glowAnimation	`'instant' \| 'ease' \| 'spring'`	`'ease'`
movementSpeed	`number`	`0.3`
mouseInfluence	`number`	`100`
mouseGravity	`'attract' \| 'repel'`	`'attract'`
gravityStrength	`number`	`75`
starsInteraction	`boolean`	`false`
starsInteractionType	`'bounce' \| 'merge'`	`'bounce'`
…props	`React.ComponentProps<'div'>`	`—`

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

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