# Pixel Snow

> Pixel-art snowflakes drifting down in layers of depth, brushed aside by the cursor.

Crisp pixel-art snowflakes fall in five layers of depth on raw WebGL2: far flakes are small, slow and dim, near ones are large crystals that sparkle as they catch the light. A soft glow sits around every flake. Move the cursor through the snow to brush it aside and stir it along, and turn on `accumulate` to let it pile up in drifts along the bottom edge.

<demo-pixel-snow>



</demo-pixel-snow>

## Installation

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

## Usage

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

<template>
  <div class="relative h-125 w-full overflow-hidden bg-zinc-950">
    <PixelSnow
      color="#ffffff"
      variant="snowflake"
      :density="0.5"
      :wind="0.25"
      :glow="0.8"
      :twinkle="0.35"
    />
  </div>
</template>
```

On a light page, set `light-mode` and pick a deeper color such as `#7f9cc4` so the flakes read as colored pixels instead of light. Rendering stops when nothing moves, when the tab is hidden and while the snow is scrolled out of view.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Color of the snow. Any CSS color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        'snowflake' | 'square' | 'round'
      </code>
    </td>
    
    <td>
      <code>
        'snowflake'
      </code>
    </td>
    
    <td>
      Shape of the flakes: pixel crystals, square pixels or round pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How much snow is falling, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How fast the snow falls. Negative values make it rise.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wind
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      Sideways drift, from -2 to 2. Negative values blow to the left.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sway
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How much each flake swings as it falls.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flake-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size of the flakes, from 0 for mostly tiny specks to 2 for mostly large crystals.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pixel-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Size of one snow pixel in px, from 1 to 12.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        depth
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      How strongly far flakes fall slower and dimmer than near ones, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall brightness of the snow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Strength of the soft light around each flake.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        twinkle
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      How often flakes catch the light and sparkle, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accumulate
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Lets the snow pile up in soft drifts along the bottom edge.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Lets the cursor brush the snow aside and stir it as it moves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Lets the snow drift in from the top on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fade
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades the edges into the page, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Opacity of the whole effect, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws the snow as colored pixels for light backgrounds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        paused
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Freezes the snow in place.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dpr
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      auto
    </td>
    
    <td>
      Maximum device pixel ratio, capped at 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is `aria-hidden`. Put real content on top of it in your own markup.
- Pointer input is read from `window`, so content layered on top stays fully interactive while the cursor still brushes the snow.
- With `prefers-reduced-motion: reduce` the snow holds still, and the intro and cursor push are turned off.
- Ported from [React Bits](https://reactbits.dev/backgrounds/pixel-snow) by David Haz.