# Noise

> Film grain overlay for photos and pages, from fine 35mm grain to dust, scratches, paper and TV static.

Noise lays animated film grain over whatever sits under it. One small grain tile is painted once and jittered every frame, so it stays light even at full screen. Add dust, hairs, vertical scratches, scanlines and flicker for an old film print, or set `fps` to 0 for a still paper texture. Use the panel to try the presets.

<demo-noise>



</demo-noise>

## Installation

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

## Usage

The overlay fills its nearest positioned parent (`position: absolute; inset: 0`) and never blocks pointer events.

```vue
<script setup lang="ts">
  import Noise from '~/components/ui/noise/Noise.vue';
</script>

<template>
  <div class="relative h-125 overflow-hidden">
    <img src="/photo.jpg" alt="" class="size-full object-cover" />
    <Noise
      :opacity="0.16"
      :fps="18"
      :dust="0.55"
      :scratches="0.5"
      :flicker="0.25"
    />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      Strength of the grain, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size of each grain in CSS pixels. 0.5 is one device pixel on retina screens.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fps
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        24
      </code>
    </td>
    
    <td>
      How many times per second the grain changes. 0 keeps it still, like paper.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        blend-mode
      </code>
    </td>
    
    <td>
      <code>
        'normal' | 'overlay' | 'soft-light' | 'multiply' | 'screen' | 'difference'
      </code>
    </td>
    
    <td>
      <code>
        'overlay'
      </code>
    </td>
    
    <td>
      How the grain mixes with what is underneath. Overlay and soft light keep the color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        contrast
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      From soft, fine grain at 0 to harsh, punchy grain at 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dust
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Specks, hairs and fibers that flicker over the frame, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scratches
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      How often thin vertical scratches run down the frame for a few seconds, 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        colored
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Uses colored grain instead of gray.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scanlines
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Adds rolling horizontal lines, like an old screen, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flicker
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Makes the grain strength jump a little every frame, like a film projector.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fixed
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Covers the whole viewport instead of the nearest positioned parent.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        z-index
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        -
      </code>
    </td>
    
    <td>
      Stacking order of the overlay.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the overlay.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The overlay is decorative (`aria-hidden="true"`) and uses `pointer-events: none`, so it never blocks clicks, focus or text selection.
- With `prefers-reduced-motion: reduce` the grain is drawn once and stays still.
- The animation loop stops while the overlay is offscreen.
- Ported from [React Bits](https://reactbits.dev/animations/noise) by David Haz.