An interactive pixel grid canvas that responds to mouse movement with customizable colors.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/pixel-canvas.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<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>
| Prop | Type | Default | Description |
|---|---|---|---|
pixel-size | number | 20 | Size of each pixel in pixels |
colors | string[] | ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7'] | Array of colors to randomly select from |
fade-speed | number | 0.02 | Speed at which pixels fade out (0-1) |
class | string | — | Additional CSS classes for the container |