KQ-481 · FOCUS/DIM
Focus Dim
The interface steps back around what you point at: the element under the pointer stays at full strength while the rest dims and softens, the boundary a rounded rectangle from the real DOM that moves on a spring. The page is still all there; one part is just closer.
KQ-481 · FOCUS/DIM
Waylight · the morning board
Three berths, one clean handover.
Everything the night crew settled, in the order the day crew will need it. Hold the pointer on a row and everything else falls quiet behind it.
| Berth | Vessel | ETA | State |
|---|---|---|---|
| B4 | Marram | 06:10 | cleared |
| B2 | Kestrel | 06:45 | holding |
| B7 | Saltmarsh | 07:20 | inbound |
Tide
3.4 m3.4 mBerths clear
11a step back
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/focus-dim
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| selector / padding | string · number | — | Which elements can take focus and how far the clear area extends past their box. |
| dim / blur / spring | number | — | How much the rest dims, how much it softens, and how quickly the box moves. |