components / grain
grain.
paper / film texture overlay — speckle, fibrous paper stock, or a dot screen. the texture is an inline feTurbulence data uri rather than a bundled png, so it is a few hundred bytes and resolution-independent. pointer-events-none and aria-hidden, so it can sit over live ui at any z-index.
textured.
installation
bunx @justin06lee/chrome@latest add grainprops
| name | type | default | description |
|---|---|---|---|
| variant | 'noise' | 'paper' | 'dots' | 'noise' | |
| opacity | number | 0.05 | past ~0.12 grain reads as dirt. |
| scale | number | - | turbulence base frequency for noise/paper (default 0.8, higher is finer), or dot pitch in px for dots (default 4). |
| animate | boolean | false | jitter the texture like film grain; frozen under reduced motion. |
| fixed | boolean | true | cover the viewport; false covers the nearest positioned ancestor instead. |
| blend | CSSProperties['mixBlendMode'] | - | mix-blend-mode for the layer. |
| className | string | - |