# Evil Eye

> A procedural evil eye shader with an animated iris, a slit pupil that follows the cursor, and a fiery outer glow.

A procedural evil eye drawn in one fragment shader with ogl. Flames flicker through the iris rings and the outer glow, driven by a tileable noise texture built on mount. Move the cursor over it and the slit pupil glides toward it. Light mode turns the glow into saturated ink over a light background.

<demo-evil-eye>



</demo-evil-eye>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import EvilEye from '~/components/ui/evil-eye/EvilEye.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <EvilEye
      eye-color="#FF6F37"
      background-color="#120F17"
      :intensity="1.5"
      :pupil-size="0.6"
      :iris-width="0.25"
      :glow-intensity="0.35"
      :scale="0.8"
      :pupil-follow="1"
      :flame-speed="1"
    />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        eye-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#FF6F37'
      </code>
    </td>
    
    <td>
      Primary eye color in HEX format.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Brightness / HDR intensity of the eye color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pupil-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Size and darkness of the pupil slit.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        iris-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      Width of the main iris ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      Strength of the outer eye glow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Zoom level of the eye. Values above 1 zoom in, below 1 out.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise-scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Scale of the fire/noise texture sampling.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pupil-follow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Intensity of pupil cursor tracking. <code>
        0
      </code>
      
       disables it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flame-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Independent flame flicker animation speed.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#000000'
      </code>
    </td>
    
    <td>
      Background color in HEX format.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws the eye as saturated ink over a light background color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes merged on the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and marked `aria-hidden="true"`. Put real content above it.
- The pupil follows mouse movement over the container only; it never takes focus or blocks clicks.
- With `prefers-reduced-motion: reduce` the flames and the pupil hold still and the eye is drawn once.
- The render loop stops when the eye is offscreen or the tab is hidden.
- Ported from [React Bits](https://reactbits.dev/backgrounds/evil-eye) by David Haz.