ZeroGravity UI

Pointerstable

Antigravity

A particle field that flows around the cursor and settles into formations.

Customize

Formationshape of the cloud
900count
formation.shape
580 pxformation.radius
0.310formation.innerRatio
5formation.sides
0.500formation.depth
3.00formation.turns
0.000formation.jitter
0 °formation.angle
1.00formation.aspect
0 °/sformation.spin
18 °formation.tilt
1337seed
Deformliving blob distortion
35 pxdeform.amount
3.00deform.frequency
4deform.layers
0.40deform.speed
Particleshape of a single dot
particle.shape
2.75 pxparticle.size
0.000particle.sizeVariance
0.450particle.depthScale
4.00particle.length
0.350particle.thickness
5particle.points
0.500particle.depth
particle.rotation
90 °/sparticle.spin
0 °particle.angle
Colourpalette and shimmer
color.palette
color.mode
0.000 loops/scolor.cycle
0.850color.opacity
0.590color.opacityDepth
Pulseper-particle heartbeat
pulse.enabled
pulse.waveform
pulse.mode
0.290 Hzpulse.speed
0.300pulse.size
0.000pulse.opacity
1.00pulse.spread
Wavebreathing wave from the centre
wave.enabled
wave.waveform
0.240 Hzwave.speed
524 pxwave.wavelength
25 pxwave.displace
0.150wave.opacity
0.000wave.size
Burstsrandom shockwaves
burst.enabled
burst.origin
burst.waveform
3.00 sburst.minInterval
8.00 sburst.maxInterval
0.80burst.strength
700 px/sburst.speed
320 pxburst.width
Colour waverecolouring wave rolling across
colorWave.enabled
colorWave.origin
1.00 scolorWave.minInterval
4.00 scolorWave.maxInterval
8.00 scolorWave.duration
200 px/scolorWave.speed
1000 pxcolorWave.width
1.000colorWave.strength
85 %colorWave.saturation
62 %colorWave.lightness
colorWave.palette
Cursorfollow, repel, idle drift
follow.enabled
follow.returnToCenter
follow.source
0.012follow.smooth
0.015follow.lag
0.025follow.lagSpread
repel.enabled
220 pxrepel.radius
90 pxrepel.strength
repel.falloff
0.120repel.ease
20 pxdrift.amount
1.00drift.speed
Glow and rendercompositing, trails, quality
glow.enabled
400 pxglow.radius
glow.color
0.080glow.intensity
render.blend
0.000render.trail
render.background
2000 msrender.fadeIn
2.00render.dprCap
render.respectReducedMotion
paused

Usage

TSX
import { Antigravity } from "zerogravity"

<Antigravity />

Generated from the controls above. Only props that differ from their defaults are shown.

Props

92 documented props on Antigravity
PropertyTypeDefaultDescription
countnumber900Particles. Range 50 to 8000.
formation.shape"ring" | "disc" | "star" | "polygon" | "heart" | "spiral" | "grid" | "wave" | "lissajous" | "blackhole" | "planet" | "torus" | "sunflower" | "arms" | "rays" | "dna" | "atom" | "tree""ring"Shape.
formation.radiusnumber580Radius. Range 40 to 1200 px.
formation.innerRationumber0.31Inner hole. Range 0 to 0.98.
formation.sidesnumber5Sides / spikes. Range 2 to 16.
formation.depthnumber0.5Spike depth. Range 0 to 0.95.
formation.turnsnumber3Spiral turns. Range 0.25 to 8.
formation.jitternumber0Jitter. Range 0 to 1.
formation.anglenumber0Rotation. Range -180 to 180 °.
formation.aspectnumber1X stretch. Range 0.2 to 3.
formation.spinnumber0Spin. Range -90 to 90 °/s.
formation.tiltnumber18Tilt (planet / torus). Range -90 to 90 °.
seednumber1337Seed. Range 1 to 9999.
deform.amountnumber35Amount. Range 0 to 200 px.
deform.frequencynumber3Frequency. Range 0.5 to 12.
deform.layersnumber4Harmonics. Range 1 to 4.
deform.speednumber0.4Speed. Range 0 to 3.
particle.shape"dot" | "square" | "diamond" | "bar" | "triangle" | "ring" | "cross" | "star""dot"Shape.
particle.sizenumber2.75Size. Range 0.3 to 14 px.
particle.sizeVariancenumber0Size variance. Range 0 to 1.
particle.depthScalenumber0.45Depth influence. Range 0 to 1.
particle.lengthnumber4Length (bar). Range 0.5 to 20.
particle.thicknessnumber0.35Thickness (bar / ring / cross). Range 0.05 to 1.
particle.pointsnumber5Points (star). Range 2 to 12.
particle.depthnumber0.5Spike depth (star). Range 0 to 0.95.
particle.rotation"none" | "radial" | "tangential" | "velocity" | "spin""none"Rotation bound to.
particle.spinnumber90Spin speed. Range -720 to 720 °/s.
particle.anglenumber0Base angle. Range -180 to 180 °.
color.palettestring[]["#ffffff", "#d2e1ff", "#e6d2ff", "#c8fff5", "#f0f0fa"]Palette.
color.mode"random" | "radial" | "angular" | "linear" | "depth""random"Assignment.
color.cyclenumber0Palette scroll. Range 0 to 1 loops/s.
color.opacitynumber0.85Opacity. Range 0 to 1.
color.opacityDepthnumber0.59Depth influence. Range 0 to 1.
pulse.enabledbooleantrueEnabled.
pulse.waveform"sine" | "triangle" | "sawtooth" | "square" | "heartbeat" | "decay" | "organic""sine"Pulse shape.
pulse.mode"sync" | "scatter" | "radial" | "angular""scatter"Phase spread.
pulse.speednumber0.29Speed. Range 0 to 4 Hz.
pulse.sizenumber0.3Size amount. Range 0 to 2.
pulse.opacitynumber0Opacity amount. Range 0 to 1.
pulse.spreadnumber1Spatial spread. Range 0 to 6.
wave.enabledbooleantrueEnabled.
wave.waveform"sine" | "triangle" | "sawtooth" | "square" | "heartbeat" | "decay" | "organic""sine"Wave shape.
wave.speednumber0.24Speed. Range 0 to 3 Hz.
wave.wavelengthnumber524Wavelength. Range 40 to 2000 px.
wave.displacenumber25Displacement. Range 0 to 200 px.
wave.opacitynumber0.15Opacity. Range 0 to 1.
wave.sizenumber0Size. Range 0 to 1.
burst.enabledbooleanfalseEnabled.
burst.origin"center" | "random""center"Origin.
burst.waveform"sine" | "triangle" | "sawtooth" | "square" | "heartbeat" | "decay" | "organic""sine"Front shape.
burst.minIntervalnumber3Gap from. Range 0.2 to 20 s.
burst.maxIntervalnumber8Gap to. Range 0.2 to 30 s.
burst.strengthnumber0.8Strength. Range 0 to 3.
burst.speednumber700Front speed. Range 50 to 3000 px/s.
burst.widthnumber320Front width. Range 20 to 1200 px.
colorWave.enabledbooleantrueEnabled.
colorWave.origin"center" | "random""random"Origin.
colorWave.minIntervalnumber1Gap from. Range 0 to 20 s.
colorWave.maxIntervalnumber4Gap to. Range 0 to 30 s.
colorWave.durationnumber8Duration. Range 1 to 25 s.
colorWave.speednumber200Speed. Range 20 to 2000 px/s.
colorWave.widthnumber1000Width. Range 50 to 2500 px.
colorWave.strengthnumber1Strength. Range 0 to 1.
colorWave.saturationnumber85Saturation. Range 0 to 100 %.
colorWave.lightnessnumber62Lightness. Range 0 to 100 %.
colorWave.palettestring[][]Own colours (empty = random).
follow.enabledbooleantrueFollow the cursor.
follow.returnToCenterbooleantrueRecentre when the cursor leaves.
follow.source"parent" | "window""parent"Pointer area.
follow.smoothnumber0.012Centre smoothing. Range 0.001 to 0.3.
follow.lagnumber0.015Particle lag. Range 0.001 to 0.3.
follow.lagSpreadnumber0.025Lag spread. Range 0 to 0.2.
repel.enabledbooleanfalsePush particles away from the cursor.
repel.radiusnumber220Repel radius. Range 40 to 700 px.
repel.strengthnumber90Repel strength (negative attracts). Range -300 to 400 px.
repel.falloff"linear" | "smooth" | "sharp""smooth"Repel falloff.
repel.easenumber0.12Repel snappiness. Range 0.01 to 0.5.
drift.amountnumber20Idle drift. Range 0 to 120 px.
drift.speednumber1Drift speed. Range 0 to 4.
glow.enabledbooleantrueCursor glow.
glow.radiusnumber400Glow radius. Range 40 to 1200 px.
glow.colorstring"#c8dcff"Glow colour.
glow.intensitynumber0.08Glow intensity. Range 0 to 0.6.
render.blend"normal" | "lighter""normal"Blending.
render.trailnumber0Trail. Range 0 to 0.98.
render.backgroundstring | nullnullCanvas background.
render.fadeInnumber2000Fade in. Range 0 to 6000 ms.
render.dprCapnumber2Max DPR. Range 1 to 3.
render.respectReducedMotionbooleantrueRespect reduced motion.
pausedbooleanfalsePaused.
onStats(stats: AntigravityStats) => void—Frame statistics: fps, particles drawn, batches, ms per frame.
refRef<AntigravityHandle>—Imperative handle exposing burst() and colorBurst().

Dependencies

0 external runtime dependencies

Ships with nothing but React.