Review Ticker

A social-proof band for under the hero. Each testimonial is just a small avatar, one short line and "— name, company", separated by accent-coloured stars and fading out at both edges. The content is duplicated and scrolled endlessly with a linear CSS animation; speed is given in px/s and converted into a period once the content width is measured. With rows={2} the second row scrolls the other way, offset by half. It pauses automatically on mouse hover, keyboard focus, when the tab is hidden or when the band leaves the viewport, and a visible pause button sits on the right.

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

<ReviewTicker/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/review-ticker.en.json

Usage

import { ReviewTicker } from "@/components/ui/review-ticker";

<ReviewTicker
  rows={2}
  speed={50}
  testimonials={[
    { quote: "門市排班從半天縮到十分鐘，店長終於能準時下班。", name: "林予安", company: "青嶼咖啡" },
    { quote: "出貨異常的通知時間縮短了一半，客服再也不用一通通電話追司機。", name: "陳柏宏", company: "北辰物流", short: "出貨異常通知時間縮短一半" },
    { quote: "結帳流程更短，這一季回購率是開站以來最高。", name: "黃冠廷", company: "好日選物" },
  ]}
/>

Props

ReviewTickerItem

How it works

• Timing variables: the period reads --wb-review-ticker-duration (derived from speed by default, 45s before measurement), the entrance fade reads --wb-review-ticker-enter-duration (600ms), and the accent reads --wb-review-ticker-accent (default #0d9488, #2dd4bf in dark mode). Setting --wb-review-ticker-duration globally overrides speed.
• Seamless loop: the content is duplicated and translateX runs from 0 to -50%. With only a few testimonials, when one set is narrower than the viewport, the set is repeated until it fills the width before being duplicated, so no gap shows.
• Truncation counts characters for both Chinese and Latin text, so no character is ever cut in half. Hovering a truncated quote shows the full text above the band, and screen readers read the full quote directly.
• No photos needed: avatars use initials (last two characters for Chinese names, first letters for Latin names) on a two-tone gradient whose hue follows the golden angle by index, generated deterministically; pass avatarSrc for a real image.
• The background is a very faint wave line SVG built from a few summed sines, producing identical output on server and client.

Accessibility

• The root is a section; with a title it uses aria-labelledby, otherwise aria-label="Customer testimonials"
• The duplicated loop content and the second row (a repeat of the same testimonials) are aria-hidden, so screen readers read each testimonial once
• Each testimonial is a figure / blockquote / figcaption; when truncated, the visible text is hidden from assistive tech and the full quote is read instead
• A visible pause button sits on the right of the band (aria-pressed conveys the state), meeting WCAG 2.2.2; the ticker also pauses on hover, keyboard focus, a hidden tab or when scrolled out of view
• When the user has enabled reduce motion, nothing scrolls: the ticker becomes a single static row that can be focused and scrolled horizontally with the keyboard, the entrance fade shortens to 150ms, and the pause button is hidden