A full-bleed band where the call to action loops in three huge marquee rows, solid, outlined and dim, behind a pill button that magnetically follows the pointer.
4,812 teams shipped this week
npx shadcn@latest add https://hyperblur.dev/r/cta-marquee-band.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-marquee-band.tsx.
import { CtaMarqueeBand } from "@/components/hyperblur/cta-marquee-band"
<CtaMarqueeBand phrase="Ship it this week" cta={{ label: "Get started", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| phrase | string | "Start building today" | Text repeated in the marquee rows and used as the hidden heading. |
| eyebrow | string | "4,812 teams shipped this week" | Line with a live dot above the marquee. Empty hides it. |
| cta | { label: string; href: string } | { label: "Create your workspace", href: "#" } | The magnetic pill button. |
| points | string[] | 3 points | Short reassurances under the band. Empty array hides them. |
| speed | number | 32 | Seconds for one marquee loop. The other rows run slightly slower. |
| strength | number | 0.35 | How strongly the button follows the pointer, from 0 to 1. |
| accent | string | "#ff5a36" | Button, stars and outline color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |