# Orb

> A glowing ring of swirling color that breathes, trails an orbiting light and reaches toward the cursor.

A glowing ring of swirling color drawn in one raw WebGL2 pass. It powers on with a spring and a swirl, then breathes while a light orbits it. Move the cursor close and the ring reaches toward you, lights up on that side and the orbiting light swings to meet you. Click the orb to make it pulse and send out an echo ring.

<demo-orb>



</demo-orb>

## Installation

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

## Usage

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

<template>
  <div class="relative h-125 w-full overflow-hidden bg-black">
    <Orb
      :colors="['#9c43fe', '#4cc2e9', '#101499']"
      :hover-intensity="1"
      :tilt-x="0"
      rotate-on-hover
      follow-cursor
      click-pulse
    />
  </div>
</template>
```

The canvas is transparent. Set `background-color` to the color of the page behind it: a light color switches the orb to a soft, filled style that reads on white.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        ['#9c43fe', '#4cc2e9', '#101499']
      </code>
    </td>
    
    <td>
      Two colors that swirl around the ring, then the deep color of the glow. Any CSS color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hue
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Shifts the hue of every color, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#000000'
      </code>
    </td>
    
    <td>
      Color the orb sits on. Light colors switch it to a soft, filled style.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size of the orb relative to the container.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How soft and wide the glow around the ring is.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        bleed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How far the glow bleeds into the inside of the orb. 0 keeps a tight ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wobble
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How much the ring breathes and warps at rest.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        highlight
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Brightness of the light that orbits the ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trail
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Length of the glowing tail behind the orbiting light. 0 removes it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt-x
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Tilts the ring back in perspective, in degrees. Positive pushes the top away.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt-y
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Turns the ring sideways in perspective, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Speed of the swirl, the orbiting light and the breathing.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hover-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How far the ring reaches toward the cursor and how brightly it lights up.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotate-on-hover
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Slowly turns the orb while it is hovered.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        force-hover-state
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Keeps the hover effect on without hovering.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        follow-cursor
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The orbiting light swings toward the cursor while the orb is hovered.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-pulse
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking the orb makes it pulse and swirl.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Powers the orb on with a spring and a swirl.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Opacity of the whole effect.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        paused
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Freezes the animation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dpr
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      auto
    </td>
    
    <td>
      Maximum device pixel ratio, capped at 2.
    </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 decorative and marked `aria-hidden="true"`. Put real content on top of it.
- With `prefers-reduced-motion: reduce` the orb renders a still ring: no intro, no swirl, no reach toward the cursor and no click pulse.
- Pointer tracking is passive and never blocks scrolling or clicks on content above the orb.
- Animation stops when the orb is offscreen or the tab is hidden.
- Ported from [React Bits](https://reactbits.dev/backgrounds/orb) by David Haz.