# Pixel Card

> A card that fills with twinkling pixels in a glowing reveal wave from the center or the cursor, on hover, click or always on.

A card with a canvas of crisp pixels behind its content. Hover or focus the card and the pixels pop in as a wave from the center (or from where the pointer entered), twinkle, swell under a soft spotlight that follows the cursor and ripple out from every click. Set `trigger` to `click` to toggle it, or `always` to keep it on. `fade` clears the middle so text stays readable. In the demo the featured plan is always on; pick a preset, scene and trigger in the panel.

<demo-pixel-card>



</demo-pixel-card>

## Installation

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

## Usage

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

<template>
  <!-- A ready-made palette -->
  <PixelCard variant="blue">
    <h3 class="text-xl font-semibold">Hover me</h3>
  </PixelCard>

  <!-- Custom look, sized with classes -->
  <PixelCard
    class="h-93 w-60"
    :colors="['#ccfbf1', '#5eead4', '#14b8a6']"
    glow-color="#14b8a6"
    :gap="9"
    :pixel-size="4"
    shape="circle"
    origin="pointer"
    :spotlight="1"
    :opacity="0.35"
    :fade="0.7"
    trigger="click"
    :intro-delay="140"
  >
    <p class="text-sm font-semibold">Pro</p>
  </PixelCard>
</template>
```

The card is `300 × 400` by default; pass size classes (`class="size-full"`, `class="h-93 w-60"`) to change it. Content is centered and sits above the pixels.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        'default' | 'blue' | 'yellow' | 'pink'
      </code>
    </td>
    
    <td>
      <code>
        'default'
      </code>
    </td>
    
    <td>
      A ready-made palette with its own gap and speed. Any prop you pass overrides it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string | string[]
      </code>
    </td>
    
    <td>
      From variant
    </td>
    
    <td>
      Pixel colors, as an array or a comma-separated string. Each pixel picks one at random.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      From variant
    </td>
    
    <td>
      Color of the soft light that follows the cursor across the card.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      From variant
    </td>
    
    <td>
      Distance between pixels, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pixel-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Largest size a pixel grows to, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      From variant
    </td>
    
    <td>
      How fast the pixels twinkle, from 0 to 100. 0 holds them still.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape
      </code>
    </td>
    
    <td>
      <code>
        'square' | 'circle' | 'diamond'
      </code>
    </td>
    
    <td>
      <code>
        'square'
      </code>
    </td>
    
    <td>
      Shape of each pixel.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        origin
      </code>
    </td>
    
    <td>
      <code>
        'center' | 'pointer'
      </code>
    </td>
    
    <td>
      <code>
        'center'
      </code>
    </td>
    
    <td>
      Where the reveal wave starts: the middle of the card, or where the pointer enters.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reveal-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        600
      </code>
    </td>
    
    <td>
      How long the wave takes to sweep across the card, in ms.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spotlight
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How much pixels near the cursor swell and brighten, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Strength of the soft light under the pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Opacity of the pixels and glow. Lower it to keep text on the card easy to read.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fade
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades the pixels out toward the middle so they frame your content, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger
      </code>
    </td>
    
    <td>
      <code>
        'hover' | 'click' | 'always'
      </code>
    </td>
    
    <td>
      <code>
        'hover'
      </code>
    </td>
    
    <td>
      What turns the effect on: hovering or focusing the card, clicking it on and off, or always on.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-pulse
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking sends a ripple of brighter pixels out from the click.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Plays the reveal once when the card first scrolls into view.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro-delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Wait before the intro, in ms. Stagger it across a row of cards.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        no-focus
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      From variant
    </td>
    
    <td>
      Stops keyboard focus from triggering the effect.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        theme
      </code>
    </td>
    
    <td>
      <code>
        'dark' | 'light'
      </code>
    </td>
    
    <td>
      <code>
        'dark'
      </code>
    </td>
    
    <td>
      Color theme of the card surface and default palette.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        24
      </code>
    </td>
    
    <td>
      Corner radius of the card, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes, merged with the default <code>
        h-100 w-75
      </code>
      
       size.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Card content. It is centered and sits above the pixels.
    </td>
  </tr>
</tbody>
</table>

The root carries `data-active` while the effect is on, so content can react with `group-data-active:` classes.

## Accessibility

- The card is focusable (unless `no-focus`); focus turns the effect on in hover mode.
- In click mode the card is a `button` with `aria-pressed`; Enter and Space toggle it, and a click outside turns it off.
- The canvas is `aria-hidden`. With `prefers-reduced-motion`, pixels appear without the wave, twinkle, spotlight or ripples.
- The animation pauses when the card is off screen.
- Ported from [React Bits](https://reactbits.dev/components/pixel-card) by David Haz.