Portrait Overlay Quote

Turns customer testimonials into a full-bleed portrait poster: a large rounded frame filled with the portrait (a warm two-tone gradient and an abstract bust silhouette stand in when there is no photo), with the white quote and attribution laid over a dark gradient at the bottom. On each switch the old image fades out while the new one fades in and slowly pushes in from 1.08 to 1 across the whole interval; the quote rises line by line out of a mask while the old text drifts up and fades. A thin progress segment per testimonial runs along the top, the bottom right has previous / next, a page count and a pause button, and you can drag the frame left or right to switch.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<PortraitOverlayQuote/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/portrait-overlay-quote.en.json

Usage

import { PortraitOverlayQuote } from "@/components/ui/portrait-overlay-quote";

<PortraitOverlayQuote
  eyebrow="What customers say"
  title="After they moved their sites to the new interface"
  testimonials={[
    {
      quote: "The redesigned booking page\ncut our weekend waitlist in half.",
      name: "Maya Lin",
      role: "Head of Operations",
      company: "Islet Coffee",
      highlight: "in half",
    },
    {
      quote: "Drivers open the dispatch screen and know the next stop. New hires run a route solo on day one.",
      name: "Owen Chen",
      role: "Dispatch Lead",
      company: "Northstar Freight",
      photoSrc: "/images/team/chen.jpg",
    },
  ]}
  interval={7000}
  onIndexChange={(i) => console.log(`Switched to ${i + 1}`)}
/>

Props

PortraitOverlayQuoteItem

How it works

• Timing variables: --wb-portrait-overlay-quote-interval (default 7000ms) and --wb-portrait-overlay-quote-duration (default 700ms). Passing interval / duration writes them into these variables, and the component reads them back from the computed style after mounting, so overriding the variables from an outer scope works too.
• The accent colour only comes from --wb-portrait-overlay-quote-accent (light default #0d9488, dark default #2dd4bf), used for the eyebrow, the highlight underline and the progress segments.
• A single rAF loop drives both the Ken Burns zoom and the progress segment: while paused the clock stops and the progress holds in place, then picks up where it left off. It pauses on hover, when keyboard focus is inside the section, when the pause button is pressed, when the tab goes to the background, and when the section scrolls off screen.
• The image crossfade is fixed at 800ms — slower than the text, so the picture changes first and the words rise after; each line is staggered by 90ms.
• A drag or horizontal swipe only switches once it moves more than 60px; drags that start on a button are ignored.

Accessibility

• The root element is a section, labelled by the title via aria-labelledby when one is given; the carousel area is role="region" with aria-roledescription="carousel"
• Each testimonial is role="group" with aria-roledescription="testimonial" and an aria-label such as "2 of 5"; quotes are marked up with figure, blockquote and figcaption
• aria-live="off" while autoplay runs so screen readers are not interrupted on a timer; it switches to polite when paused or switched manually
• Previous / next and the pause button are type="button" with an aria-label, and the pause button carries aria-pressed; with focus inside the region the left and right arrow keys switch testimonials
• With autoplay on by default there is always a visible pause button (WCAG 2.2.2), and hovering or focusing the region pauses it too
• When the system "Reduce motion" setting is on: autoplay is off, there is no Ken Burns push-in or text movement, images and text fade in over 150ms instead, and the buttons still switch testimonials