An infinite canvas testimonial component inspired by godly.
“Refinery components dropped straight into our design system. The motion language is exactly what we were trying to build ourselves.”
Mia Hoffmann
@miahoffmann · Product at Vercel
“Every component feels considered. Not just animated for the sake of it — the motion actually communicates state.”
James Okafor
Design Engineer · Liveblocks
“Finally a component library that doesn't look like every other shadcn starter. The micro-interactions are genuinely good.”
Priya Nair
@priyanair · Indie hacker
“The install command worked first try. Five minutes from copy-paste to shipping — that's rare.”
Lucas Brant
Frontend Lead · Resend
“I've been collecting good UI references for two years. Refinery solved the problem of turning inspiration into something I can actually ship.”
Ananya Krishnan
@ananya · Builder
“The dark-mode defaults are the best I've seen out of the box. Zero tweaking needed for our app's aesthetic.”
Tobias Werner
Founder · Basement Studio
“We replaced three hand-rolled animation utilities with two Refinery components. Codebase is noticeably cleaner.”
Sophie Lin
Staff Engineer
“Our onboarding flow conversion went up after we swapped in the Refinery card components. Sometimes good design is just business results.”
Rohan Mehta
@rohanmehta · Growth
“The API surface is refreshingly small. Props only where they matter. Opinionated in the right places.”
Clara Russo
Frontend Engineer
“I'd been putting off the testimonials section for weeks. Dropped this in, customized the data, done.”
Nathan Cole
Indie developer
“Ships with sensible motion defaults, but the spring values are easy to override if you know what you're doing.”
Yuki Tanaka
@yukitanaka
“Best combination of copy-able and actually-good I've found. Most libraries are one or the other.”
Ella Martin
Design Engineer
“The canvas testimonial alone was worth bookmarking the project. Haven't seen this pattern done well anywhere else.”
Omar Farooq
UI Engineer · Linear
“Used Refinery components to prototype a client pitch in two hours. Client thought it was the final product.”
Isabelle Chen
@isabellechen
“Not a single gradient blob in sight. This is what minimal-but-not-generic actually looks like.”
Dev Patel
Product Designer
npx shadcn@latest add https://refinery.abhii.me/r/testimonial-canvas.json| Name | Type | Description |
|---|---|---|
| testimonials | Testimonial[] | List of testimonials to display on the canvas. |
| height | string | CSS height value for the canvas container. Default is '100vh' to fill the viewport height. |
| initialOffset | { x: number; y: number } | Initial x and y offset for the testimonial positions on the canvas. Default is { x: 0, y: 0 }. |
| hint | string | false | Optional hint text to display in the center of the canvas. Set to false to hide the hint. Default is 'Drag to explore'. |
Each testimonial card is positioned from its x and y offsets, then useMotionValue is used to track the canvas movement as users drag around. Motion adds smooth dragging and inertia, so the canvas feels free rather than rigid. The cards stagger in with opacity and scale, the vignette adds depth, and the hint fades once someone starts interacting.