crucıble

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.

motionpro

Installation

CLI

npx shadcn@latest add @crucible/rostrum

Manual — install dependencies, then copy the source

npm install motion

Props

PropTypeDefaultDescription
testimonialsRostrumTestimonial[]four neutral placeholder voicesTestimonials to rotate through.
intervalnumber5Seconds each testimonial holds before auto-advancing.
autoPlaybooleantrueAutoplay through the testimonials. Ignored under reduced motion.
accentstring"#818cf8" (indigo-400)Single cool accent for the quote mark, active dot and focus rings. Neutral-elegant everywhere else.
stackDepthnumber3How many portraits are visible in the fanned stack at once.
pausedbooleanfalseExternally freeze autoplay (in addition to hover/offscreen pausing).
labelstring"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.