# Prism Gradient

> WebGL2 hero gradient — three colors swirled through sixteen iterations of sinusoidal distortion, tracking light and dark mode automatically.

<demo-prism-gradient>



</demo-prism-gradient>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import PrismGradient from '~/components/ui/prism-gradient/PrismGradient.vue';
</script>

<template>
  <section class="relative min-h-screen">
    <PrismGradient :speed="1" :noise="{ opacity: 0.5 }" />
    <div class="relative z-10">
      <!-- hero content -->
    </div>
  </section>
</template>
```

The component absolutely fills its nearest positioned ancestor and renders
behind your content (`z-0`). Palettes are fixed to the upstream design —
near-black/blue/white in dark mode, inverted in light mode — and switch
automatically with the site color mode. Falls back to a static radial
gradient without WebGL2 and freezes when `prefers-reduced-motion` is set.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Animation speed multiplier (0 = still)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise
      </code>
    </td>
    
    <td>
      <code>
        { opacity: number; scale?: number }
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Optional grain overlay
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '0px'
      </code>
    </td>
    
    <td>
      Border radius of the gradient
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes on the wrapper
    </td>
  </tr>
</tbody>
</table>

## Credits

- Ported from [componentry.fun](https://www.componentry.dev/docs/components/prism-gradient)