# Antigravity

> A field of particles that lifts into a glowing ring around the cursor and bursts outward on click.

A field of crisp, colorful particles drawn on raw WebGL2. Particles near the cursor lift off and swirl into a rippling ring on springy motion, and they stretch into streaks when they move fast. Move the cursor to drag the ring around, hold to pull it in and spin it faster, then release to burst the particles outward. When the cursor rests, the ring drifts on its own.

<demo-antigravity>



</demo-antigravity>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/antigravity.json"
```

## Usage

```vue
<script setup lang="ts">
  import Antigravity from '~/components/ui/antigravity/Antigravity.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden bg-zinc-950">
    <Antigravity
      :colors="['#5227FF', '#FF9FFC', '#B497CF']"
      color-mode="conic"
      particle-shape="capsule"
      :count="1500"
      :magnet-radius="9"
      :ring-radius="7"
    />
  </div>
</template>
```

On a light page, set `light-mode` so pale colors are deepened and stay visible. Rendering stops while the field is scrolled out of view and while the tab is hidden.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1500
      </code>
    </td>
    
    <td>
      Number of particles in the field.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        magnet-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        9
      </code>
    </td>
    
    <td>
      Size of the area around the cursor whose particles get pulled into the ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ring-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        7
      </code>
    </td>
    
    <td>
      Radius of the ring the particles form.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.4
      </code>
    </td>
    
    <td>
      How fast the ripples travel around the ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-amplitude
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How much the ring ripples. 0 gives a clean circle.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Number of ripples around the ring. Pair with a high <code>
        wave-amplitude
      </code>
      
       for a flower shape.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.9
      </code>
    </td>
    
    <td>
      Size of the particles.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lerp-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.05
      </code>
    </td>
    
    <td>
      How quickly the particles follow the cursor. Lower values leave longer trails.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      A single color for every particle. Overrides <code>
        colors
      </code>
      
       when set.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        ['#5227FF', '#FF9FFC', '#B497CF']
      </code>
    </td>
    
    <td>
      Palette the particles are colored from. How it is spread depends on <code>
        color-mode
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-mode
      </code>
    </td>
    
    <td>
      <code>
        'conic' | 'radial' | 'random'
      </code>
    </td>
    
    <td>
      <code>
        'conic'
      </code>
    </td>
    
    <td>
      Spreads the palette around the cursor, outward from the ring, or randomly per particle.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.05
      </code>
    </td>
    
    <td>
      How fast the conic palette turns around the cursor. 0 keeps it still.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        auto-animate
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The ring drifts on its own after a couple of seconds without cursor movement.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-variance
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How much each particle pulses in size, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      How fast the particles orbit the cursor. Negative values orbit the other way.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        depth-factor
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Strength of the 3D depth. Particles in front grow, particles behind shrink and soften.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pulse-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      How fast the particles pulse in size.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-shape
      </code>
    </td>
    
    <td>
      <code>
        'capsule' | 'sphere' | 'box' | 'tetrahedron'
      </code>
    </td>
    
    <td>
      <code>
        'capsule'
      </code>
    </td>
    
    <td>
      Shape of the particles. Capsules stretch into dashes that point at the cursor.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        field-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      How tightly the particles line up on the ring. Lower values spread them into a wider band.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ambient
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      How visible the particles away from the ring are, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interactive
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The ring follows the cursor or finger. Turn off for a purely ambient background.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-burst
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Pressing pulls the ring in and spins it faster. Releasing blasts the particles outward.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The particles float up into place on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Deepens pale colors so the particles stay visible on light backgrounds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall opacity, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-device-pixel-ratio
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Highest pixel ratio the canvas renders at.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is `aria-hidden`. Put real content on top of it in your own markup.
- Pointer input is read from `window`, so content layered on top stays fully interactive while the cursor still moves the ring.
- With `prefers-reduced-motion: reduce` the field moves at 30% speed, the auto drift, intro and click burst are turned off.
- Ported from [React Bits](https://reactbits.dev/backgrounds/antigravity) by David Haz.