One large serif quote at a time on a paper background. It advances every few seconds with a blur crossfade, and small avatar buttons with a progress ring let visitors pick a quote.
We moved our entire billing stack in a weekend. Six months later, nobody on the team remembers what the old dashboards looked like.Month-end close in 2 days, down from 9
npx shadcn@latest add https://hyperblur.dev/r/proof-spotlight-quote.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-spotlight-quote.tsx.
import { ProofSpotlightQuote } from "@/components/hyperblur/proof-spotlight-quote"
<ProofSpotlightQuote interval={8} quotes={[{ quote: "It paid for itself in a month.", name: "Elena Marchetti", role: "Head of Finance", company: "Fernhill" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Customer stories" | Label at the top left. Also used as the carousel name. |
| quotes | { quote: string; name: string; role: string; company: string; metric?: string }[] | 4 sample quotes | Quotes to cycle through. The optional metric renders as a pill under the quote. |
| interval | number | 6 | Seconds each quote stays before the next one fades in. |
| autoPlay | boolean | true | Advance automatically. Pauses on hover and while focus is inside. Reduced motion turns it off. |
| defaultIndex | number | 0 | Quote shown first. |
| onIndexChange | (index: number) => void | Called whenever the visible quote changes. | |
| accent | string | "#ff5a36" | Accent for the quote mark, metric pill and progress ring. |