A card whose border carries a glowing four-point star that circles the perimeter, dragging a trail of fading color behind it.
$12 / month
Unlimited projects, priority builds, and a custom domain.
npx shadcn@latest add https://hyperblur.dev/r/border-star-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/border-star-orbit.tsx.
import { BorderStarOrbit } from "@/components/hyperblur/border-star-orbit"
<BorderStarOrbit radius={20} duration={5}>Your content</BorderStarOrbit>| Prop | Type | Default | Description |
|---|---|---|---|
| radius | number | 16 | Corner radius of the card in pixels. The star follows the same curve. |
| starSize | number | 14 | Size of the star in pixels. The trail scales with it. |
| duration | number | 4 | Seconds the star takes to complete one lap. |
| color | string | "#7fb3ff" | Color of the star glow and the start of the trail. |
| trailColor | string | "#2f7bff" | Color the trail fades into. |
| trail | number | 14 | Number of trail dots, from 0 to 30. |
| pauseOnHover | boolean | false | Freeze the star while the pointer is over the card. |