Founder Badge
Auto-cycling ID badge testimonials with lanyard clip and physical card stack.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | #f2f2ee | Page background color (hex, rgb, or hsl). |
| accentColor | string | #9aaa1f | Section label accent color (hex, rgb, or hsl). |
When to Use
Built for founder-led products, SaaS companies, and Uilora showcase pages that want credibility through recognizable brand logos and real voices. The auto-cycling keeps the section alive without any user action.
Best Practices
Keep quotes to 2–4 sentences — the card height is fixed and longer quotes get clipped. Use the DiceBear notionists style for avatars to maintain a consistent illustrated-portrait aesthetic across all 6 testimonials.
Why This Component Matters
An ID badge carries institutional weight. When a testimonial arrives in a physical card format with a lanyard clip, it feels like a credential — not a marketing quote. The auto-cycling creates momentum without pagination friction.
FAQ
QHow does the auto-cycling work?
A setInterval fires every 2 seconds and advances the current index. AnimatePresence handles the enter/exit spring animation between cards. The interval clears on unmount.
QCan I change the cycle speed?
The AUTO_ADVANCE_MS constant at the top of the file controls the interval. Change it to any value in milliseconds — 3000 for a slower pace, 1000 for rapid cycling.
QWhat is the badge clip?
A Framer Motion div whose width animates to a different value per testimonial, simulating different physical clip widths. The inset box-shadow gives it a stamped metal appearance.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.