Grid Scramble Hover
A hover image covered by a symbol grid. Moving near a cell wakes it, spills activation across neighboring cells, and scrambles selected glyphs before the field cools back down.
npx shadcn@latest add https://ui.aryank.space/r/grid-scramble-hover.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 |
|---|---|---|---|
| image | string | Compronents-hosted JPG | Image covered by the symbol grid. |
| symbols | string[] | O / X / * / > / $ / W | Glyphs randomly assigned and scrambled in active cells. |
| blockSize / detectionRadius | number | 25 / 50 | Grid cell size and pointer activation radius in pixels. |
imageasset-urlThe image underneath the generated symbol grid.
symbols / blockSize / detectionRadiustupleGlyph set and grid sensitivity.
None.