A full-bleed gradient call to action where the color pool follows the pointer and a round button, wrapped in rotating ring text, is pulled toward the cursor and spins faster on hover. A big headline and three proof stats sit beside it.
npx shadcn@latest add https://hyperblur.dev/r/cta-magnetic-orb.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-magnetic-orb.tsx.
import { CtaMagneticOrb } from "@/components/hyperblur/cta-magnetic-orb"
<CtaMagneticOrb cta={{ label: "Get started", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Free for teams up to 10" | Glass pill above the headline. Empty hides it. |
| title | string | "Your roadmap, shipped before Friday." | Headline. |
| subtitle | string | Paragraph under the headline. | |
| cta | { label: string; href: string } | { label: "Start building", href: "#" } | The orb link and its caption. |
| ringText | string | "Start free trial · 14 days · no card needed · " | Text that loops around the orb. |
| stats | { value: string; label: string }[] | 3 stats | Proof points under the copy. Empty array hides them. |
| strength | number | 0.4 | How strongly the orb follows the pointer, from 0 to 1. |
| accent | string | "#7c3aed" | First gradient color. |
| accent2 | string | "#fb7185" | Second gradient color, also the pointer light. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |