# Eye Tracking

> Animated eyes that follow your cursor with realistic blinking, reactive pupils, and idle micro-movements. Supports realistic, cartoon, minimal, and cyber variants.

<demo-eye-tracking>



</demo-eye-tracking>

## Installation

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

## Usage

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

<template>
  <EyeTracking :eye-size="120" variant="realistic" />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        eye-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        120
      </code>
    </td>
    
    <td>
      Diameter of each eye in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        40
      </code>
    </td>
    
    <td>
      Gap between eyes in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        iris-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#4A6741'
      </code>
    </td>
    
    <td>
      Primary iris color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        iris-color-secondary
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#6B8F62'
      </code>
    </td>
    
    <td>
      Secondary iris color (used in gradients)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pupil-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#0a0a0a'
      </code>
    </td>
    
    <td>
      Pupil color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sclera-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#F5F0EB'
      </code>
    </td>
    
    <td>
      Sclera (white of eye) color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pupil-range
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.7
      </code>
    </td>
    
    <td>
      How far the iris can move (0-1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-reflection
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show highlight reflection on pupil
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-iris-detail
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show iris fiber/circuit pattern detail
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        idle-animation
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Enable random micro-movements when idle
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        blink-interval
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        4000
      </code>
    </td>
    
    <td>
      Base interval between blinks in ms
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        eye-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Number of eyes to render
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        'realistic' | 'cartoon' | 'minimal' | 'cyber'
      </code>
    </td>
    
    <td>
      <code>
        'realistic'
      </code>
    </td>
    
    <td>
      Visual style variant
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reactive-pupil
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Pupil dilates based on cursor proximity
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-eyelids
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show eyelid shadow overlays
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>

## Variants

```vue
<!-- Realistic: blood vessels, radial gradient sclera, fiber iris lines -->
<EyeTracking variant="realistic" />

<!-- Cartoon: bold colors, thick outlines, solid iris -->
<EyeTracking variant="cartoon" />

<!-- Minimal: clean, thin outline, simple solid iris -->
<EyeTracking variant="minimal" />

<!-- Cyber: dark sclera, conic-gradient iris, scan line, cyan glow -->
<EyeTracking variant="cyber" iris-color="#00f0ff" />
```