KQ-358 · CRYSTAL/LENS
Crystal Lens
A lens that follows the cursor and refracts the live interface like a crystal ball: the texture bends toward the centre, the edge disperses into colour fringes, and a touch of frost softens the rim. Hover a heading or a control and the lens zooms on it. The proving effect of the wing — the DOM stays real and clickable underneath while a shader does the optics.
KQ-358 · CRYSTAL/LENS
Waylight · the morning board
Three berths, one clean handover.
Everything the night crew settled, in the order the day crew will need it. Run the lens over the table — the rows are real, and the glass bends them without moving a single one.
| Berth | Vessel | ETA | State |
|---|---|---|---|
| B4 | Marram | 06:10 | cleared |
| B2 | Kestrel | 06:45 | holding |
| B7 | Saltmarsh | 07:20 | inbound |
06:10 · tide 3.4 m
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/crystal-lens
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| radius | number | 140 | Lens radius in CSS pixels. |
| zoom / refraction / dispersion / frost | number | — | Magnification at the centre, bend strength, colour-fringe strength, and rim blur. |
| targets | string | — | A selector for elements the lens zooms on when hovered. |