# Dither Prism Hero

> A prismatic dithered hero section with advanced WebGL shaders featuring ordered dithering, holographic iridescence, and floating particles.

<demo-dither-prism-hero>



</demo-dither-prism-hero>

## Installation

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

## Usage

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

<template>
  <DitherPrismHero title1="Experience" title2="The Future" />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        title1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      First line of the headline
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        title2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Second line of the headline
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#0f0f23'
      </code>
    </td>
    
    <td>
      Primary color (deep/dark)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#6366f1'
      </code>
    </td>
    
    <td>
      Secondary color (mid)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color3
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ec4899'
      </code>
    </td>
    
    <td>
      Tertiary color (light/accent)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Animation speed multiplier
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dither-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.15
      </code>
    </td>
    
    <td>
      Dithering intensity (0–1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        prism-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Prismatic refraction intensity (0–1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        50
      </code>
    </td>
    
    <td>
      Number of floating particles
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-particles
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show floating particles
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Particle color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>