Portrait and Long Quote

Testimonial53: Portrait and Long Quote

One long story: a portrait drifting inside its frame beside a quote that settles in word by word, closed by a ruled foot carrying the name and context on one side and a pill on the other.

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/testimonial53?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Testimonial53, testimonial53Demo } from "@/components/beste/block/testimonial53";

export default function Page() {
  return <Testimonial53 {...testimonial53Demo} />;
}

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

import { Testimonial53 } from "@/components/beste/block/testimonial53";

export default function Page() {
  return (
    <Testimonial53
      eyebrow="A longer story"
      quote="I came for six sessions to get over a breakup. That was three years ago."
      name="Jonny Greenwood"
      context="Individual therapy, since 2023"
      image={{ src: "/people/jonny.jpg", alt: "Portrait of a client" }}
      button={{ label: "Read the whole story", href: "/stories/jonny", tone: "outline" }}
    />
  );
}

Props

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

Behavior notes

• The stagger is tightened all the way to 0.02s, the fastest in the set, because this quote is several sentences long and anything slower would still be arriving after the reader has finished.
• The foot waits on 0.2 + quote.split(" ").length * 0.02, the same arithmetic, so the attribution lands as the last word settles however long the story runs.
• name and context are separate top-level props rather than an author object, which suits a block built around one quote: there is nothing to group them against.
• The foot is one border-t row that stacks below sm and splits to justify-between above it, so the attribution and the action never crowd each other on a phone.
• The portrait drifts -10% to 10% against a 1.2 scale and clears from blur(24px) on decode, with a complete check on mount for cached files.
• The two columns are vertically centred, so the portrait stays level with a quote of any length.
• Without image the quote column keeps its grid position rather than stretching across the section.