A launcher grid where every icon is pulled toward the pointer by its own distance falloff and swells as it gets closer, so the grid bends like a field. The nearest icon gets a ring and a bright label.
npx shadcn@latest add https://hyperblur.dev/r/hover-magnetic-icons.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-magnetic-icons.tsx.
import { HoverMagneticIcons } from "@/components/hyperblur/hover-magnetic-icons"
<HoverMagneticIcons columns={5} onSelect={(label) => console.log(label)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; icon?: string; tone?: string }[] | 10 apps | Icons to show. icon is one of calendar, mail, chat, music, camera, map, notes, cloud, wallet, settings, photos, clock; tone is the tile color. |
| columns | number | 5 | Number of grid columns. |
| radius | number | 120 | Reach of the pull in pixels. |
| strength | number | 0.32 | How far icons travel toward the pointer, as a fraction of the distance. |
| autoPlay | boolean | true | Move a slow scripted pointer through the grid while nobody is hovering, which also gives touch screens a live state. The real pointer, a tap or keyboard focus takes over at once. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| onSelect | (label: string, index: number) => void | Called when an icon is clicked or activated with the keyboard. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |