Sparkling Pixels
A customizable animated component for React and Framer.
Hover me
Installation
npx shadcn@latest add https://puzzlui.com/registry/sparkling-pixels.jsonFirst time using Puzzl UI? Read ourinstallation guide.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| pixelColors | string[] | Array of colors for the pixels. Values must be rgb(r,g,b) values. (required) | |
| className | string | Additional class names to apply to the container. | |
| bgColor | string | black | Background color of the canvas. |
| pixelSize | number | 2 | Size of each pixel in the grid. |
| pixelSpacing | number | 4 | Spacing between pixels in the grid. |
| vignetteStartRadius | number | 0 | Initial radius of the vignette effect. |
| vignetteEndRadius | number | 1000 | Final radius of the vignette effect. |
| vignetteDuration | number | 1000 | Duration of the vignette effect in milliseconds. |
| vignetteFrom | center top bottom left right top-left top-right bottom-left bottom-right mouse | center | Starting point of the vignette effect. |
| start | onload onmouseover | onload | When the animation should start. |
| randomHighlightRate | number | 0.001 | Rate at which random pixels are highlighted. |
| followMouse | boolean | false | Whether the pixels should follow the mouse movement. Available only if start is "onmouseover". |