KQ-384 · GLASS/SHARDS
Glass Shards
The interface as a pane broken into shards. Each shard tilts toward the cursor and refracts what is behind it a little differently from its neighbours, with a bright edge along every crack; near the pointer, shards lift and part, and the ground shows through the gaps. The fracture is a seeded cell pattern, so the pane breaks the same way every time.
KQ-384 · GLASS/SHARDS
Fieldline · overnight watch
Three panes, one broken window.
Security flagged a cracked ground-floor pane at 02:14. Everything logged since then sits below it — the glass over the card is real, seeded the same way on every visit.
| Case | Zone | Time | Status |
|---|---|---|---|
| INC-104 | Loading dock, west | 02:14 | resolved |
| INC-107 | Stairwell C, level 2 | 03:41 | reviewing |
| INC-109 | Server room access | 04:02 | open |
04:02 · 3 open
broken, and beautiful
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/glass-shards
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shards / seed | number | — | How many shards the pane breaks into, and which break. |
| tilt / lift / radius | number | — | How far a shard tilts toward the cursor in degrees, how far the nearest lift in px, and how far the cursor reaches. |
| refraction / edge / color | number · number · string | — | How much a tilted shard bends the page, the brightness of the cracks, and their colour. |