Pixelated Shader
Pixelated Shader with threejs
Installation
Run the following command
npx shadcn@latest add https://ui.cloffstudio.com/r/pixelated-shader.jsonProps
| Props | Type | Default | Description |
|---|---|---|---|
src | string | undefined | URL or path to the image to display (required). |
alt | string | "" | Accessible alt text for the image. |
className | string | "" | Additional CSS classes applied to the container. |
speed | number | 1.5 | Responsiveness multiplier — higher = snappier movement. |
intensity | number | 1.2 | Strength of distortion/chromatic aberration. |
decay | number | 0.08 | Per-frame decay applied to the aberration (larger = quicker fade). |
width | string | number | "100%" | Container width (CSS value, e.g. '500px' or 100). |
height | string | number | "auto" | Container height (CSS). If 'auto', a minHeight of 200px is applied. |
objectFit | 'cover' | 'contain' | 'cover' | How the image fits the container: 'cover' fills, 'contain' shows whole image. |