# Rostrum — Animated Section Block for React

> 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.

- Page: https://crucibleui.com/components/sections/rostrum
- Category: [sections](https://crucibleui.com/components/sections)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/rostrum
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/rostrum`.

## Props (`RostrumProps`)

| 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: `Omit<React.ComponentPropsWithoutRef<"section">, "children">`.

## Usage example

```tsx
import { Rostrum } from "@/components/crucible/rostrum";

export default function RostrumDemo() {
  return (
    <div className="relative isolate flex h-full min-h-[480px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div className="w-full">
        <Rostrum />
        <p className="mx-auto max-w-4xl px-4 pb-6 text-center text-xs text-white/35 sm:px-6">
          Autoplays every 5s — hover to pause, use the arrows or dots, or press Left / Right.
        </p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.