# Prismatic Burst

> A burst of prismatic light rays that leans toward the cursor and sends a wave of light outward on click.

A raymarched burst of colored light rays drawn with raw WebGL2. It ignites from the center when it mounts. Move the cursor over it and the burst leans toward you while the rays near the cursor brighten. Click to send a wave of light racing outward.

<demo-prismatic-burst>



</demo-prismatic-burst>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import PrismaticBurst from '~/components/ui/prismatic-burst/PrismaticBurst.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden bg-black">
    <PrismaticBurst
      :colors="['#A855F7', '#7C3AED', '#6366F1']"
      animation-type="rotate3d"
      :intensity="2"
      :speed="0.5"
    />
  </div>
</template>
```

The rays render at a reduced resolution into a float buffer, then a second
pass upscales them with a bicubic filter and adds the optional bloom, edge
fade and light-mode ink. The render scale drops on its own when frames run
slow. The loop stops when the burst is paused and settled, off screen, or 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>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Colors blended through the rays, up to 64. Leave empty for a full spectrum.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Overall brightness of the rays.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How fast the burst turns and shifts.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animation-type
      </code>
    </td>
    
    <td>
      <code>
        'rotate' | 'rotate3d' | 'hover'
      </code>
    </td>
    
    <td>
      <code>
        'rotate3d'
      </code>
    </td>
    
    <td>
      Flat rotation, full 3D rotation, or a burst that turns to follow the cursor.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        zoom
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How close the burst is. Higher values zoom in.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ray-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Thickness of the rays, from thin threads to broad beams.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ray-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Splits the light into this many evenly spaced spokes. 0 keeps it organic.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        distort
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Bends the rays into flowing, organic shapes.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        twist
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Swirls the rays into a spiral. Negative values turn the other way.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Streams the colors through the burst. Negative values reverse it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        center-fade
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size of the dark core at the heart of the burst, 0.5 to 3.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Soft bloom around the brightest rays.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Film grain over the light, 0.3 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        offset
      </code>
    </td>
    
    <td>
      <code>
        { x?: number | string; y?: number | string }
      </code>
    </td>
    
    <td>
      <code>
        { x: 0, y: 0 }
      </code>
    </td>
    
    <td>
      Moves the center of the burst, in pixels. Positive y moves it up.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The burst leans toward the cursor and the rays near it brighten.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How strongly the burst reacts to the cursor.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hover-dampness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      How smoothly the burst follows the cursor, 0 to 1. Higher feels heavier.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-burst
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking sends a wave of light racing out along the rays.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The burst ignites from the center when it mounts.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fade
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades the edges into the page, 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        quality
      </code>
    </td>
    
    <td>
      <code>
        'low' | 'medium' | 'high'
      </code>
    </td>
    
    <td>
      <code>
        'high'
      </code>
    </td>
    
    <td>
      Render resolution. Lower settings are lighter on slower devices.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        resolution
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Exact render scale from 0.2 to 1. Overrides <code>
        quality
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws the burst as colored ink on a white background.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mix-blend-mode
      </code>
    </td>
    
    <td>
      <code>
        CSSProperties['mixBlendMode']
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      CSS blend mode for the canvas, such as <code>
        screen
      </code>
      
       or <code>
        lighten
      </code>
      
      .
    </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 burst renders a still frame: no intro, no rotation, no cursor lean and no click waves.
- Pointer tracking is passive and never blocks scrolling or clicks on content above the burst.
- Ported from [React Bits](https://reactbits.dev/backgrounds/prismatic-burst) by David Haz.