A staggered testimonial carousel: cards fan out around a highlighted center card with a notched corner and tilt. Click, arrows, arrow keys or drag to advance. Auto-plays and pauses on hover. Self-contained, light & dark.
React
TypeScript
lucide-react
A striking way to show social proof. Testimonial cards fan out in 3D around a highlighted center card that has a notched corner and a bold offset shadow. Bring any card to the center by clicking it, using the arrows or arrow keys, or dragging. It auto-advances and pauses on hover or focus, and adapts card size on smaller screens. Ships as a single self-contained file (injects its own CSS, no Tailwind required), works in light or dark, React 19 + TypeScript strict, accessible and reduced-motion aware.
A premium bento layout with the classic hover choreography (content lifts, CTA reveals) plus a cursor-tracking spotlight, an accent hairline and per-card accent tinting — zero dependencies.
React
TypeScript
Bento
The bento pattern every landing page wants, with real polish: on hover the content lifts, the icon shrinks to the corner and the CTA slides in. Our twist — a spotlight that follows the cursor tinted to each card's accent, plus an accent hairline that draws across the top.
Each card takes a `background` slot (images or animated layers), a per-card accent color, spans 1–3 columns and supports light/dark. Zero dependencies — no Tailwind, no radix, no shadcn. One file, works anywhere React runs.
A flagship pricing section: canvas light-rain backdrop, rotating conic ring on the popular card, rolling-digit prices on a spring Monthly/Yearly switch, deep 3D buttons and a blur-stagger reveal.
React
TypeScript
framer-motion
The most complete pricing section on the shelf — atmosphere (canvas light rain + masked grid + halo), hierarchy (a conic-ring popular card with glow) and delight (prices that roll digit-by-digit when you flip the billing period).
Our own rolling-digit implementation — no @number-flow dependency. Deep Apple-style 3D buttons; one `accent` variable retints the rain, the ring, the checks and the CTAs. Blur-stagger entrance, spring pill switch with a save chip, reduced-motion safe. Three plans, responsive to a single column. Only dependency: framer-motion.
Three seamlessly looping columns of testimonial cards at different speeds — edge fade, pause on hover, ringed avatars. Pure CSS animation, zero dependencies, placeholder people included.
What is this component?
The classic scrolling-testimonials wall, done right: three columns drift at different speeds for a living, organic feel. Seamless loop (duplicated track + translateY(-50%)), pause on hover so quotes can be read, and a soft fade at both edges.
Polished cards: oversized quote mark, accent-ringed avatar, hover lift. Works instantly with placeholder people — pass your own `testimonials` (text, image, name, role) to make it yours. Zero dependencies — no framer-motion, no Tailwind. One file, light & dark, reduced-motion aware.
What's included
Three columns, per-column speed
Seamless infinite loop
Pause on hover to read
Edge fade mask, ringed avatars
Placeholder people included
Light & dark, reduced-motion aware
Details
React
TypeScript
Testimonials
Marquee
Social proof
Zero-deps
Category
Data Display
Framework
React 19
Dark mode
true
Accessibility
true
TypeScript
true
Updated Jul 23, 2026
Security scanclean
MaintainedYes
Computed from real data — the same states coding agents read in this product's manifest.