A full width band over a drifting gradient mesh with grain, a headline whose middle word rotates with a blur slide and an underline timer, and two buttons.
NewTemplates for every page you ship
Start from 300 production-ready sections, wire them to your data, and deploy to your own domain in an afternoon.
No credit cardFree for side projectsCancel anytime
npx shadcn@latest add https://hyperblur.dev/r/cta-rotating-band.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-rotating-band.tsx.
import { CtaRotatingBand } from "@/components/hyperblur/cta-rotating-band"
<CtaRotatingBand words={["landing page", "dashboard", "docs"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| before | string | "Ship your next" | Headline text before the rotating word. |
| words | string[] | ["launch page", "pricing page", "onboarding", "changelog", "docs site"] | Words that rotate in the middle line. |
| after | string | "before Friday." | Headline text after the rotating word. |
| subtitle | string | "Start from 300 production-ready sections..." | Supporting text. |
| interval | number | 2600 | Milliseconds each word stays (minimum 1200). |
| primaryCta | { label: string; href: string } | { label: "Start building free", href: "#" } | White primary button. |
| secondaryCta | { label: string; href: string } | { label: "Book a 20 min demo", href: "#" } | Glass secondary button. |
| note | string | "No credit card|Free for side projects|Cancel anytime" | Reassurance items separated by a pipe. Empty string hides them. |
| accent | string | "#8b5cf6" | First mesh color. |
| secondAccent | string | "#22d3ee" | Second mesh color, also used in the word gradient and the underline. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |