Three Voices

Testimonial50: Three Voices

Three voices in rotation: a portrait cross-fades beside a quote that settles in word by word, on a six-second timer that pauses while the pointer is over the section, with portrait buttons to choose directly.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/testimonial50?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/testimonial50?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/testimonial50.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports testimonial50Demo alongside the block: the exact props behind the preview above. Spread it to get a working testimonial carousel in one line.

import { Testimonial50, testimonial50Demo } from "@/components/beste/block/testimonial50";

export default function Page() {
  return <Testimonial50 {...testimonial50Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Testimonial50 } from "@/components/beste/block/testimonial50";

export default function Page() {
  return (
    <Testimonial50
      eyebrow="Three voices"
      voices={[
        {
          quote: "I arrived wanting to be told what to do. I left knowing that nobody could.",
          name: "Sharon Van Etten",
          context: "Individual therapy, fourteen months",
          image: { src: "/people/sharon.jpg", alt: "Portrait of a client" },
        },
      ]}
      button={{ label: "Read all stories", href: "/stories" }}
    />
  );
}

Props

type Voice = {
  quote: string;
  name: string;
  context: string;
  image: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The rotation pauses while the pointer is anywhere over the section, so a quote cannot change out from under someone who is reading it.
• It never starts at all when there are fewer than two voices, or when reduced motion is preferred, in which case the first voice simply stays.
• The quote column carries min-h-[14rem] rising to min-h-[18rem], which reserves the height so a short quote following a long one does not make the page jump.
• Each quote runs through text1 with trigger="mount" inside AnimatePresence, so every rotation re-plays the word stagger rather than swapping the text in one frame.
• The attribution waits on 0.3 + quote.split(" ").length * 0.035, the same arithmetic as the stagger, so it lands as the last word of that particular quote settles.
• The portrait buttons carry aria-pressed and an aria-label with the person's name, while their images use an empty alt, since the button already has its accessible name.
• Selecting a voice by hand does not stop the timer, only pausing on hover does, so the section keeps moving once the pointer leaves.