Testimonial Canvas

An infinite canvas testimonial component inspired by godly.

Preview

Refinery components dropped straight into our design system. The motion language is exactly what we were trying to build ourselves.

Mi

Mia Hoffmann

@miahoffmann · Product at Vercel

Every component feels considered. Not just animated for the sake of it — the motion actually communicates state.

Ja

James Okafor

Design Engineer · Liveblocks

Finally a component library that doesn't look like every other shadcn starter. The micro-interactions are genuinely good.

Pr

Priya Nair

@priyanair · Indie hacker

The install command worked first try. Five minutes from copy-paste to shipping — that's rare.

Lu

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.

An

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.

To

Tobias Werner

Founder · Basement Studio

We replaced three hand-rolled animation utilities with two Refinery components. Codebase is noticeably cleaner.

So

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.

Ro

Rohan Mehta

@rohanmehta · Growth

The API surface is refreshingly small. Props only where they matter. Opinionated in the right places.

Cl

Clara Russo

Frontend Engineer

I'd been putting off the testimonials section for weeks. Dropped this in, customized the data, done.

Na

Nathan Cole

Indie developer

Ships with sensible motion defaults, but the spring values are easy to override if you know what you're doing.

Yu

Yuki Tanaka

@yukitanaka

Best combination of copy-able and actually-good I've found. Most libraries are one or the other.

El

Ella Martin

Design Engineer

The canvas testimonial alone was worth bookmarking the project. Haven't seen this pattern done well anywhere else.

Om

Omar Farooq

UI Engineer · Linear

Used Refinery components to prototype a client pitch in two hours. Client thought it was the final product.

Is

Isabelle Chen

@isabellechen

Not a single gradient blob in sight. This is what minimal-but-not-generic actually looks like.

De

Dev Patel

Product Designer

Drag to explore

Installation

1. Run the following command in your terminal:
npx shadcn@latest add https://refinery.abhii.me/r/testimonial-canvas.json

API Reference

Component props
NameTypeDescription
testimonialsTestimonial[]List of testimonials to display on the canvas.
heightstringCSS 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 }.
hintstring | falseOptional hint text to display in the center of the canvas. Set to false to hide the hint. Default is 'Drag to explore'.

Usage Recommendations

Best for showcasing a large number of testimonials in an engaging way.
Works well as a full-page section.
Design Notes

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.