A twisting ribbon of fine light strands sweeps from the bottom of the frame to the top corner, breathing slowly while bright pulses race along it. Copy and stats sit in the open space.
NewInstant payouts are live
Relay routes every payment over the fastest rail available, so your sellers get paid in seconds instead of days.
npx shadcn@latest add https://hyperblur.dev/r/hero-light-ribbon.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-light-ribbon.tsx.
import { HeroLightRibbon } from "@/components/hyperblur/hero-light-ribbon"
<HeroLightRibbon colors={["#22d3ee", "#3b82f6", "#a855f7"]} strands={36} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Instant payouts are live" | Line next to a New tag. Hidden when empty. |
| title | string | "Money that moves at the speed of light" | Headline. The last three words take the ribbon gradient. |
| subtitle | string | "Relay routes every payment..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Open an account", href: "#" } | White button with a gradient underline on hover. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Read the API docs", href: "#" } | Outlined button with an arrow. null hides it. |
| stats | { value: string; label: string }[] | [$4.2B, 180 ms, 46] | Figures along the bottom. Empty array hides them. |
| colors | [string, string, string] | ["#ff7a45", "#f43f5e", "#8b5cf6"] | Gradient along the ribbon and the headline. |
| strands | number | 28 | Number of light strands (6 to 60). |
| speed | number | 1 | Multiplier for the breathing and pulses. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |