# Glow Cursor

> Light that pours from the cursor, drifts softly through the air and cools as it fades, with a burst on click.

A WebGL fluid simulation that pours light from the cursor. Move the pointer over the area to draw a trail that starts white-hot at the head, then drifts, curls and cools to a second color as it fades. Click to release a burst of light. Set `theme="light"` on light backgrounds for an ink-like look.

<demo-glow-cursor>



</demo-glow-cursor>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import GlowCursor from '~/components/ui/glow-cursor/GlowCursor.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <GlowCursor
      color="#5f8bff"
      :trail-width="3"
      :linger="1.4"
      :glow="1.2"
      :hotspot="0.8"
      :follow-speed="0.6"
      :click-burst="true"
      quality="high"
      theme="dark"
    />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#5f8bff'
      </code>
    </td>
    
    <td>
      Color of the light where it is freshly drawn
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        secondary-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Color the light cools to as it drifts. Leave it out for a deeper shade of the main color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.3
      </code>
    </td>
    
    <td>
      Brightness of the light
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trail-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Thickness of the light where it is drawn, in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        linger
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.4
      </code>
    </td>
    
    <td>
      Seconds the light stays visible before it fades
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.2
      </code>
    </td>
    
    <td>
      Strength of the soft glow around the light
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hotspot
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Strength of the white-hot core near the cursor
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        follow-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      How tightly the light follows the cursor, from 0 to 1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Amount of film grain in the light
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-burst
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Releases a burst of light when you click
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        quality
      </code>
    </td>
    
    <td>
      <code>
        'low' | 'medium' | 'high'
      </code>
    </td>
    
    <td>
      <code>
        'high'
      </code>
    </td>
    
    <td>
      Resolution of the simulation. Lower it for weaker devices
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        theme
      </code>
    </td>
    
    <td>
      <code>
        'dark' | 'light'
      </code>
    </td>
    
    <td>
      <code>
        'dark'
      </code>
    </td>
    
    <td>
      Use light on light backgrounds for an ink-like look
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        blend-mode
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        auto
      </code>
    </td>
    
    <td>
      CSS blend mode of the canvas. Defaults to screen in dark and normal in light
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-device-pixel-ratio
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Maximum pixel density of the canvas
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        enabled
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Stops drawing new light while keeping what is already there
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra class names for the root element
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Content rendered above the light. The canvas never takes clicks
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and marked `aria-hidden`. Add a visible caption or an `aria-label` on a parent if the glow carries meaning.
- With `prefers-reduced-motion: reduce` the light no longer flows: the trail snaps to the cursor and only fades in place.
- The render loop stops while the component is offscreen or idle, and the WebGL context is released on unmount.
- Needs WebGL 2 with `EXT_color_buffer_float`. Without it the component renders only its slot content.
- Ported from [React Bits](https://reactbits.dev/animations/glow-cursor) by David Haz.