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 @compronents/grid-scramble-hoverInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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.