A light section with a featured video testimonial and a playlist of clips, every portrait drawn in CSS. Playing a clip runs a progress bar with timed captions, and picking a row in the playlist swaps the featured story.
38 video stories
Unscripted clips from owners who run their counter, kitchen or workshop on Tillwise.
We were doing every order on paper.
We were doing every order on paper. Now the shop runs on Tillwise from one tablet. Saturday mornings went from chaos to calm. And I finally take Sundays off.
npx shadcn@latest add https://hyperblur.dev/r/proof-video-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-video-grid.tsx.
import { ProofVideoGrid } from "@/components/hyperblur/proof-video-grid"
<ProofVideoGrid stories={[{ name: "Renata Alves", role: "Owner", company: "Casa Alves", duration: 12, captions: ["We used to do orders on paper.", "Now it runs from one tablet."] }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "38 video stories" | Label with a recording dot above the heading. |
| title | string | "Small shops, in their own words" | Section heading. |
| subtitle | string | sample text | Short paragraph on the right of the heading. Hidden when empty. |
| stories | { name: string; role: string; company: string; duration: number; captions: string[]; backdrop?: [string, string]; skin?: string; hair?: string; cloth?: string }[] | 4 sample stories | Clips in the playlist. duration is in seconds and the captions are spread evenly across it. The color fields tint the drawn portrait. |
| defaultIndex | number | 0 | Story shown in the player first. |
| defaultPlaying | boolean | true | Start the featured clip playing on mount. |
| accent | string | "#e8590c" | Color of the progress bar, lower third and equalizer. |
| onStoryPlay | (index: number) => void | undefined | Called when a clip starts playing. |