An aggregate rating with a distribution chart beside a vertical ticker that steps one review at a time, the newest card lighting its stars one by one. A band of review-site scores slides along the bottom.
Rated by 6,000+ teams
npx shadcn@latest add https://hyperblur.dev/r/proof-review-ticker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-review-ticker.tsx.
import { ProofReviewTicker } from "@/components/hyperblur/proof-review-ticker"
<ProofReviewTicker score={4.9} reviews={[{ title: "Fast and calm", quote: "It opens instantly.", name: "Olivia Grant", meta: "Product lead", rating: 5, source: "Stackrank" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Rated by 6,000+ teams" | Accent label above the heading. |
| title | string | "People who write for a living love Folio" | Section heading. |
| score | number | 4.8 | Average rating out of 5. Partial stars are filled to match. |
| total | string | "Based on 5,986 reviews" | Line under the stars. |
| distribution | number[] | [82, 13, 3, 1, 1] | Percent of reviews for 5 down to 1 stars. |
| reviews | { title: string; quote: string; name: string; meta: string; rating: number; source: string }[] | 8 sample reviews | Reviews cycled through the ticker. |
| sources | { name: string; score: string; count: string }[] | 6 sample sources | Entries in the bottom band. |
| interval | number | 3200 | Milliseconds between ticker steps. |
| autoPlay | boolean | true | Step automatically. Pauses on hover and focus, off with reduced motion. |
| accent | string | "#34d399" | Color of stars, bars and the active card marker. |