Antigravity

antigravity

反重力粒子吸附背景 · 光标靠近把漂浮粒子吸入环绕轨道(波动+脉冲+取向)，离开缓回原位 · 磁吸半径/环半径/形状/自动巡游可调(canvas2d 零依赖·token 配色·reduced-motion 静态点阵)

用法

基础用法

默认短棒粒子铺满容器，移动鼠标即把附近粒子吸入环绕光标的轨道。

移动鼠标吸附粒子

tsx

<div
  className="relative h-64 overflow-hidden rounded-xl"
  style={{ background: "oklch(0.14 0.02 255)" }}
>
  <Antigravity className="absolute inset-0" />
</div>

形状与颜色

shape 可选 bar / dot / square；color 接受任意 CSS 颜色或主题 token。

移动鼠标吸附粒子

tsx

<Antigravity
  className="absolute inset-0"
  shape="dot"
  color="oklch(0.72 0.22 30)"
  count={320}
/>

自动巡游

autoAnimate 让光标静止 2s 后粒子自行巡游，适合无人值守的大屏展示。

移动鼠标吸附粒子

tsx

<Antigravity
  className="absolute inset-0"
  autoAnimate
  rotationSpeed={0.4}
  shape="square"
  color="var(--color-chart-2)"
/>

大磁场 · 大环

调大 magnetRadius / ringRadius / waveAmplitude 得到更舒展、更有机的轨道。

移动鼠标吸附粒子

tsx

<Antigravity
  className="absolute inset-0"
  magnetRadius={200}
  ringRadius={90}
  waveAmplitude={18}
  color="var(--color-chart-4)"
/>

何时用

需要整片粒子背景，光标靠近把粒子吸入环绕轨道、离开缓回（hero 区、大屏装饰）时用。它是 canvas2d 粒子吸附；要光标本身的果冻拖尾用 BlobCursor，要点击迸发火花用 ClickSpark，要边框流光描边用 BorderBeam。

导入

import { Antigravity } from "@hulianui/ui"

Props

名称	类型	默认	说明
count	`number`	`240`	粒子数量；越多越费性能，移动端建议 ≤ 200
magnetRadius	`number`	`130`	磁吸半径（px）；光标进入此范围的粒子被吸入轨道
ringRadius	`number`	`56`	环绕轨道基础半径（px）
waveSpeed	`number`	`0.4`	环上波动速度（轨道半径随角度/时间起伏快慢）
waveAmplitude	`number`	`10`	环上波动幅度（px），越大轨道越毛糙有机
particleSize	`number`	`4`	粒子基础尺寸（px）；dot=直径 / square=边长 / bar=长度
lerpSpeed	`number`	`0.12`	粒子追踪目标的缓动系数（0–1），越大越紧跟
color	`string`	`var(--color-chart-1)`	粒子颜色（自动明暗适配），可传任意 CSS 颜色
autoAnimate	`boolean`	`false`	光标静止 2s 后是否自动巡游（无人操作也动）
rotationSpeed	`number`	`0`	整环随时间旋转角速度（rad/s），0=不自转
pulseSpeed	`number`	`3`	粒子脉冲缩放速度（被吸住时大小呼吸快慢）
shape	`"dot" \| "square" \| "bar"`	`"bar"`	粒子形状
className	`string`	—	透传到根容器（canvas 包裹层 / fallback）

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion 或无 canvas2d 时的自定义静态备用内容

禁忌 / 坑

客户端组件（canvas2d）：父级须为定位上下文且有明确高度，组件用 absolute inset-0 铺满。
color 用 token 必须带 --color- 前缀（var(--color-chart-1)），canvas 喂裸 var(--chart-1) 不解析。见 [[hulian-token-color-var-needs-color-prefix]]。
count 直接影响性能，移动端/低端机控制在 ≤ 200。
reduced-motion 或无 canvas2d 环境降级为静态点阵，可用 fallback 自定义。

Playground

粒子数磁吸半径 px环半径 px粒子尺寸 px形状自动巡游

移动鼠标吸附粒子

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.14 0.02 255)" }}>
  <Antigravity
    className="absolute inset-0"
    count={240}
    magnetRadius={130}
    ringRadius={56}
    particleSize={4}
    shape="bar"
    autoAnimate={false}
  />
</div>

用法

基础用法

默认短棒粒子铺满容器，移动鼠标即把附近粒子吸入环绕光标的轨道。

移动鼠标吸附粒子

tsx

<div
  className="relative h-64 overflow-hidden rounded-xl"
  style={{ background: "oklch(0.14 0.02 255)" }}
>
  <Antigravity className="absolute inset-0" />
</div>

形状与颜色

shape 可选 bar / dot / square；color 接受任意 CSS 颜色或主题 token。

移动鼠标吸附粒子

tsx

<Antigravity
  className="absolute inset-0"
  shape="dot"
  color="oklch(0.72 0.22 30)"
  count={320}
/>

自动巡游

autoAnimate 让光标静止 2s 后粒子自行巡游，适合无人值守的大屏展示。

移动鼠标吸附粒子

tsx

<Antigravity
  className="absolute inset-0"
  autoAnimate
  rotationSpeed={0.4}
  shape="square"
  color="var(--color-chart-2)"
/>

大磁场 · 大环

调大 magnetRadius / ringRadius / waveAmplitude 得到更舒展、更有机的轨道。

移动鼠标吸附粒子

tsx

<Antigravity
  className="absolute inset-0"
  magnetRadius={200}
  ringRadius={90}
  waveAmplitude={18}
  color="var(--color-chart-4)"
/>

Props

名称	类型	默认	说明
count	`number`	`240`	粒子数量；越多越费性能，移动端建议 ≤ 200
magnetRadius	`number`	`130`	磁吸半径（px）；光标进入此范围的粒子被吸入轨道
ringRadius	`number`	`56`	环绕轨道基础半径（px）
waveSpeed	`number`	`0.4`	环上波动速度（轨道半径随角度/时间起伏快慢）
waveAmplitude	`number`	`10`	环上波动幅度（px），越大轨道越毛糙有机
particleSize	`number`	`4`	粒子基础尺寸（px）；dot=直径 / square=边长 / bar=长度
lerpSpeed	`number`	`0.12`	粒子追踪目标的缓动系数（0–1），越大越紧跟
color	`string`	`var(--color-chart-1)`	粒子颜色（自动明暗适配），可传任意 CSS 颜色
autoAnimate	`boolean`	`false`	光标静止 2s 后是否自动巡游（无人操作也动）
rotationSpeed	`number`	`0`	整环随时间旋转角速度（rad/s），0=不自转
pulseSpeed	`number`	`3`	粒子脉冲缩放速度（被吸住时大小呼吸快慢）
shape	`"dot" \| "square" \| "bar"`	`"bar"`	粒子形状
className	`string`	—	透传到根容器（canvas 包裹层 / fallback）

插槽

类型

说明

fallback

ReactNode

reduced-motion 或无 canvas2d 时的自定义静态备用内容

禁忌 / 坑

客户端组件（canvas2d）：父级须为定位上下文且有明确高度，组件用 absolute inset-0 铺满。

color 用 token 必须带 --color- 前缀（var(--color-chart-1)），canvas 喂裸 var(--chart-1) 不解析。见 [[hulian-token-color-var-needs-color-prefix]]。

count 直接影响性能，移动端/低端机控制在 ≤ 200。

reduced-motion 或无 canvas2d 环境降级为静态点阵，可用 fallback 自定义。

Playground

粒子数磁吸半径 px环半径 px粒子尺寸 px形状自动巡游

移动鼠标吸附粒子

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.14 0.02 255)" }}>
  <Antigravity
    className="absolute inset-0"
    count={240}
    magnetRadius={130}
    ringRadius={56}
    particleSize={4}
    shape="bar"
    autoAnimate={false}
  />
</div>

Antigravity

用法

基础用法

形状与颜色

自动巡游

大磁场 · 大环

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

Antigravity

用法

基础用法

形状与颜色

自动巡游

大磁场 · 大环

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground