Glowing particles circle the button on two tilted orbits, passing in front of and behind the face with real depth. Hovering spins them up, and a click flings them outward before they settle back.
Ready for liftoff
atlas-web · production · eu-west-1
npx shadcn@latest add https://hyperblur.dev/r/button-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-orbit.tsx.
import { ButtonOrbit } from "@/components/hyperblur/button-orbit"
<ButtonOrbit accent="#ffc857">Launch project</ButtonOrbit>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Launch project" | Button label. |
| accent | string | "#ffc857" | Color of the particles, icon and warm under-glow. |
| particles | number | 12 | Number of particles across both orbits, from 0 to 24. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |