# Pixel Canvas

> An interactive pixel grid canvas that responds to mouse movement with customizable colors.

<demo-pixel-canvas>



</demo-pixel-canvas>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import PixelCanvas from '~/components/ui/pixel-canvas/PixelCanvas.vue';
</script>

<template>
  <PixelCanvas
    :colors="['#e879f9', '#a78bfa', '#38bdf8', '#22d3ee']"
    class="h-100"
  />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        pixel-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        20
      </code>
    </td>
    
    <td>
      Size of each pixel in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7']
      </code>
    </td>
    
    <td>
      Array of colors to randomly select from
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fade-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.02
      </code>
    </td>
    
    <td>
      Speed at which pixels fade out (0-1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes for the container
    </td>
  </tr>
</tbody>
</table>