Rostrum
An animated testimonials rotator: a fanned stack of portraits shuffles like a hand of cards as it advances — front full-colour, the ones behind cooled to a duotone — while the quote crossfades beside it with words annealing from blur to focus. Autoplays on an interval, pausing on hover, focus, hidden tab and offscreen, with previous/next buttons, dots, a play/pause toggle, arrow-key nav and a paused-only live region. Reduced motion swaps instantly and never autoplays.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/rostrumManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| testimonials | RostrumTestimonial[] | four neutral placeholder voices | Testimonials to rotate through. |
| interval | number | 5 | Seconds each testimonial holds before auto-advancing. |
| autoPlay | boolean | true | Autoplay through the testimonials. Ignored under reduced motion. |
| accent | string | "#818cf8" (indigo-400) | Single cool accent for the quote mark, active dot and focus rings. Neutral-elegant everywhere else. |
| stackDepth | number | 3 | How many portraits are visible in the fanned stack at once. |
| paused | boolean | false | Externally freeze autoplay (in addition to hover/offscreen pausing). |
| label | string | "Testimonials" | Accessible label for the carousel region. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.