A call to action with three columns of benefit cards scrolling in opposite directions on a tilted 3D plane, fading at the edges, beside a headline with a gradient tail and two buttons. Hover pauses the plane.
Pro trial14 days, no card required
Connect a repository and your first deploy is live before the coffee is ready. Every feature on the right is included from day one.
npx shadcn@latest add https://hyperblur.dev/r/cta-benefit-plane.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-benefit-plane.tsx.
import { CtaBenefitPlane } from "@/components/hyperblur/cta-benefit-plane"
<CtaBenefitPlane primary={{ label: "Start free", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pro trial" | Badge above the headline. Empty hides the line. |
| title | string | "Everything you need to ship, in one push." | Headline. The last two words get the gradient. |
| subtitle | string | Paragraph under the headline. | |
| primary | { label: string; href: string } | { label: "Start deploying", href: "#" } | Main button. |
| secondary | { label: string; href: string } | { label: "Talk to sales", href: "#" } | Outline button. |
| benefits | { title: string; detail: string; icon?: "bolt" | "lock" | "globe" | "chart" | "sync" | "spark" | "shield" | "clock" | "users" }[] | 9 benefits | Cards on the plane, spread across three columns. |
| speed | number | 28 | Seconds for one column loop. |
| accent | string | "#f59e0b" | Button, icon and glow color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |