Sandy Grain Background
A near-black sandy backdrop where the pointer paints a warm amber glow that slowly burns off under a live film-grain overlay, while a small square cursor dot eases after the pointer and swells over links and buttons.
npx shadcn@latest add https://ui.aryank.space/r/sandy-grain-background.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| baseColor | string | "#090703" | Backdrop color under the glow and grain. |
| glowColor | [number, number, number] | [152, 99, 0] | Pointer-trail glow color as an RGB triple. |
| cursorColor | string | "#c8b89a" | Fill of the square cursor dot. |
| grainOpacity | number | 0.32 | Opacity of the animated grain overlay. |
| children | React.ReactNode | undefined | Content layered above the backdrop; its links and buttons grow the cursor on hover. |
baseColor / cursorColorcolorThe near-black backdrop and the square cursor dot.
glowColortextThe amber pointer glow as an [r, g, b] triple, blended additively over the backdrop.
grainOpacitytextStrength of the film-grain overlay, 0 to 1.
None.