A half-dial sonar sweeps back and forth with a fading wake, and nearby devices light up the moment the beam crosses them. A live count shows how many have been found.
Hold the pairing button for 3 seconds
npx shadcn@latest add https://hyperblur.dev/r/loader-device-scan.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-device-scan.tsx.
import { LoaderDeviceScan } from "@/components/hyperblur/loader-device-scan"
<LoaderDeviceScan devices={4} label="Looking for speakers" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 168 | Width of the dial in pixels. Height is a little over half of it. |
| devices | number | 5 | Number of devices placed on the dial, from 0 to 12. |
| color | string | "#2f7bff" | Color of the dial glow. |
| accent | string | "#7fb3ff" | Color of the beam, its wake, the pings and the devices. |
| speed | number | 3.2 | Seconds for one full sweep left, right and back. |
| showCount | boolean | true | Shows the found devices count under the dial. |
| seed | number | 7 | Changes where the devices sit, always the same for the same seed. |
| label | string | Visible caption. Without it, Scanning is announced to screen readers only. |