Antigravity
antigravityPulls drifting particles into pointer-centered orbits before easing them back into place.
Usage
Basic usage
By default, short stick particles fill the container. Moving the mouse will suck nearby particles into the orbit around the cursor.
<div
className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}
>
<Antigravity className="absolute inset-0" />
</div>Shape and Color
shape Optional bar / dot / square; color Accepts any CSS color or theme token.
<Antigravity
className="absolute inset-0"
shape="dot"
color="oklch(0.72 0.22 30)"
count={320}
/>Automatic patrol
autoAnimate Make the cursor stationary 2s and then the particles will cruise on their own, suitable for unattended large-screen display.
<Antigravity
className="absolute inset-0"
autoAnimate
rotationSpeed={0.4}
shape="square"
color="var(--color-chart-2)"
/>Large magnetic field · Large ring
Turn up the magnetRadius / ringRadius / waveAmplitude for a more stretched, organic track.
<Antigravity
className="absolute inset-0"
magnetRadius={200}
ringRadius={90}
waveAmplitude={18}
color="var(--color-chart-4)"
/>When to Use
Use it for a full particle backdrop whose particles gather around a nearby pointer, then ease back into place, such as a hero or display wall. This is a Canvas 2D attraction field. Use BlobCursor for a liquid pointer trail, ClickSpark for click bursts, or BorderBeam for a moving border highlight.
Import
import { Antigravity } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| count | number | 240 | Particle count; higher values cost more, so keep mobile usage at or below 200 |
| magnetRadius | number | 130 | Attraction radius in pixels; particles inside this pointer range join the orbit |
| ringRadius | number | 56 | Orbital base radius (px) |
| waveSpeed | number | 0.4 | Speed of the radial wave traveling around the ring |
| waveAmplitude | number | 10 | Ring-wave amplitude in pixels; larger values make the orbit rougher and more organic |
| particleSize | number | 4 | Particle base size (px); dot=diameter / square=side length / bar=length |
| lerpSpeed | number | 0.12 | Target interpolation factor from 0 to 1; higher values track more tightly |
| color | string | var(--color-chart-1) | Particle color; accepts any CSS color and defaults to a theme-aware token |
| autoAnimate | boolean | false | Start an automatic pointer path after two seconds of inactivity |
| rotationSpeed | number | 0 | Angular speed of the entire ring in radians per second; 0 disables rotation |
| pulseSpeed | number | 3 | Scale-pulse speed while particles are attracted |
| shape | "dot" | "square" | "bar" | "bar" | Particle shape |
| className | string | — | Class name forwarded to the root canvas wrapper or fallback |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Custom static content for reduced motion or unavailable Canvas 2D |
Usage Guidelines
- This Canvas 2D client component needs a positioned parent with an explicit height. Use
absolute inset-0to fill it. - Token-valued
colorprops need the--color-prefix. Canvas cannot resolve barevar(--chart-1); usevar(--color-chart-1). See [[hulian-token-color-var-needs-color-prefix]]. countdirectly affects performance. Keep it at or below 200 on mobile and lower-end devices.- Reduced-motion and unavailable Canvas 2D environments render a static dot field; replace it through
fallbackif needed.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<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>