ns-ui
Weighted rotary knob tuned like a radio: counter-rotating line gratings shimmer with moire interference, and a hidden word only resolves at the detent.
Use when the dial itself is the deliverable, a weighted knob tuned until a hidden message resolves out of moire interference at the detent, so the reward is arriving at a value rather than confirming an action; pick confirm-dial-align instead when the dial gates a separate destructive action, or slider-chladni-tune when nearness to a correct value needs continuous feedback across a whole surface rather than resolution at one detent.
Install
npx shadcn add https://design.helpmarq.comns-ui / dial-moire
TUNE TO ALIGN
| Prop | Type | Default | Description |
|---|---|---|---|
| message? | string | "SIGNAL" | hidden word that resolves out of the interference at alignment |
| pitch? | number | 6 | grating pitch in px — one 1px line every `pitch` px |
| gear? | number | 0.15 | grating radians per dial radian — radio-vernier ratio |
| initialAngle? | number | -132 | starting dial angle in degrees (reduced motion forces 0 = aligned) |
| friction? | number | 3.5 | angular velocity decay in s^-1 while coasting after a flick |
| fieldHeight? | number | 224 | interference field height in px |
| className? | string | — | — |
| aria-label? | string | "Moire tuning dial" | — |