Three testimonial sections — drifting dispatch columns, a rotating spotlight quote with filling progress dots, and a masonry wall whose cards expand into the longer story — all with initials avatars.
Dispatch wall
dispatch-wall.tsxQuote cards tagged by channel drift up and down in alternating columns (1, 2 or 3 by container width) behind a soft edge mask.
| Prop | Type | Default | Description |
|---|---|---|---|
quotes | DispatchQuote[] | — | { quote, name, role, company, initials?, channel? }. Defaults are sample content for fictional customers. |
speed | number | 28 | Pixels per second; columns run at slightly different speeds. |
height | number | 520 | Height of the scrolling window in pixels. |
eyebrow / heading | string | — | Header copy. |
className | string | — | Classes for the outer section. |
Spotlight
spotlight.tsxOne quote at a time in large display type: words blur in, the active dot fills as a progress bar, and arrows or dots switch by hand.
| Prop | Type | Default | Description |
|---|---|---|---|
quotes | SpotlightQuote[] | — | { quote, name, role, company, initials?, metric?: { value, label } }. |
interval | number | 7 | Seconds each quote stays on screen. |
autoPlay | boolean | true | Auto-advance; off under reduced motion and paused on hover or focus. |
eyebrow | string | "Customer stories" | Label and carousel name. |
className | string | — | Classes for the outer section. |
Masonry
masonry.tsxMasonry wall of quotes in mixed card styles — metric cards, volt-tinted cards and marked phrases — that expand in place to show the longer story.
| Prop | Type | Default | Description |
|---|---|---|---|
quotes | MasonryQuote[] | — | { quote, story?, name, role, company, initials?, highlight?, metric? }. Cards with a story get an expand button. |
multiple | boolean | false | Allow more than one card open at once. |
eyebrow / heading / subheading | string | — | Header copy. |
className | string | — | Classes for the outer section. |
Install the whole set
Installs every testimonials variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Moving content pauses on hover and focus and has a visible Pause button; it does not move at all under reduced motion.
- The spotlight is a labelled carousel: arrow keys and buttons switch quotes, and it announces changes only when not auto-playing.
- Expandable cards use aria-expanded and aria-controls; duplicate marquee copies are aria-hidden.