# Side Rays

> Shafts of light that fan in from a corner or side, shimmer slowly and lean toward the cursor.

Soft shafts of light fan in from a corner or a side of the container and shimmer slowly. They grow out from their source on load, lean toward the cursor and brighten the ray under it. Add drifting dust for a cathedral look, or switch to light mode for white pages.

<demo-side-rays>



</demo-side-rays>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import SideRays from '~/components/ui/side-rays/SideRays.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden bg-zinc-950">
    <SideRays
      ray-color1="#ffe2b0"
      ray-color2="#ffd28a"
      :spread="2.6"
      :density="12"
      :sharpness="0.8"
      :dust="0.5"
    />
  </div>
</template>
```

The rays render into a transparent WebGL2 canvas with `pointer-events: none`,
so the container's background shows through and content above stays clickable.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        ray-color1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#FFC46B'
      </code>
    </td>
    
    <td>
      Color of the first layer of rays, on the upper side of the fan.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ray-color2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#96c8ff'
      </code>
    </td>
    
    <td>
      Color of the second layer of rays, on the lower side of the fan.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        blend
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Balance between the two layers, from 0 (only the first color) to 1 (only the second).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        origin
      </code>
    </td>
    
    <td>
      <code>
        'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'right' | 'left'
      </code>
    </td>
    
    <td>
      <code>
        'top-right'
      </code>
    </td>
    
    <td>
      Corner or side the light shines in from.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2.5
      </code>
    </td>
    
    <td>
      How fast the rays shimmer and sway. 0 freezes them.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Brightness of the light.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spread
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      How wide the rays fan out.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        5
      </code>
    </td>
    
    <td>
      How many separate rays the light breaks into. Higher values give finer rays.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sharpness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How crisp the edges of the rays are, from soft haze at 0 to defined beams at 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Rotates the rays, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        falloff
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.6
      </code>
    </td>
    
    <td>
      How quickly the light fades with distance. Lower values let the rays reach further.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Brightness of the glow where the light enters.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        saturation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Color saturation of the light. 0 is grayscale.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dust
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Amount of dust drifting in the light, from 0 to 1. Specks only show inside the rays.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        follow-mouse
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The rays lean toward the cursor and the ray under it brightens.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-influence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How strongly the rays follow the cursor, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The rays grow out from their source on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Renders the rays as soft tinted light for 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 decorative and has `aria-hidden="true"`. The container ignores pointer events, so it never blocks content.
- With `prefers-reduced-motion: reduce`, the rays stop swaying, shimmer at a much slower pace and ignore the cursor.
- The animation pauses while the container is offscreen or the tab is hidden, and recovers if the WebGL context is lost.
- Ported from [React Bits](https://reactbits.dev/backgrounds/side-rays) by David Haz.