A light social proof section pairing a rating summary with a live feed of recent sign ups. New activity toasts slide in at the top every few seconds while older ones drift down and fade.
Happening right now
From two person studios to scaling startups, people pick Relay to plan their week in one calm place.
npx shadcn@latest add https://hyperblur.dev/r/proof-live-activity.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-live-activity.tsx.
import { ProofLiveActivity } from "@/components/hyperblur/proof-live-activity"
<ProofLiveActivity title="Loved by 12,000 teams" interval={3000} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Happening right now" | Label with a pulsing live dot. |
| title | string | "Joined by 12,000 teams this year, and counting" | Section heading. |
| subtitle | string | "From two person studios to scaling startups..." | Supporting text. |
| rating | number | 4.9 | Average rating shown large. |
| reviewCount | string | "from 2,418 reviews" | Text under the stars. |
| distribution | number[] | [86, 9, 3, 1, 1] | Percent of reviews for 5 down to 1 stars. |
| sources | { name: string; score: number }[] | 3 sample sources | Review sites shown as pills under the rating card. |
| activities | { name: string; city: string; action: string; time: string; color?: string }[] | 7 sample activities | Entries that cycle through the feed. |
| liveLabel | string | "142 sign ups this week" | Text in the feed footer. |
| interval | number | 2600 | Milliseconds between new toasts. The feed pauses while hovered. |
| cta | { label: string; href: string } | { label: "Start free", href: "#" } | Link in the feed footer. |
| accent | string | "#f59e0b" | Color of the stars and rating bars. |
| onActivityChange | (activity: ProofActivity, index: number) => void | Called when a new toast enters. |