Can this fit an existing application?

The instructions call for detecting the repository’s framework, aliases and styling before integration. The source is React-oriented; a port must preserve card data and motion behavior in another stack. A single HTML file is intended for a standalone request, not as a universal wrapper.

Does it depend on external review or image hosting?

No review platform is queried. Local assets are the intended contract, but actual portraits/fonts and marquee configuration are absent from this archive. Optional source URLs navigate outside the page; replace mismatched demo URLs and inspect the completed host’s requests.

Can I swap the portrait images and quotes?

Yes. Keep the portrait, name, handle, words and source destination together. Follow the imagery rules for portrait versus abstract/blended slots, and recheck card width and reading time with the replacement text.

Can visitors pause the ticker?

Hover pause styles are supplied, but they take effect only once the host defines the marquee animation. A keyboard/touch/reduced-motion reading path is not implemented by that hover rule; add and test one deliberately.

Why does a statement appear more than once?

The source repeats the list four times for the moving sequence. Those are display copies, not new reviews or additional customers, and must not inflate any evidence count.

Testimonial Ticker

Previews from the publisher

Lay out a horizontal strip of short attributed statements beneath a section introduction. Testimonial Ticker repeats compact cards four times and includes styles for automatic marquee movement and hover pause. The referenced animate-marquee utility is not defined in this archive, so the intended movement must be supplied in the host. Its records are local data, not a live review feed.

What you get

A React/TypeScript section, reusable TestimonialCard and Radix-based Avatar source, plus a three-record demo. Props supply title, description, author name/handle/avatar, text and optional href. The API uses a handle rather than a separate job-role field; copy and maintain the source within the host project.
A clipped horizontal card strip with four copies of the input set, side fades from the small breakpoint, a 40-second duration custom property and hover pause styles. Actual marquee keyframes/utility and the custom max-w-container class are host requirements; no canvas or visitor-driven step controller is implemented.
Editable source, local-path portrait examples, theme/icon/imagery references and a source checker. Actual portrait/font files and marquee configuration are absent. React, @radix-ui/react-avatar, cn and host utility/theme styling remain dependencies; four display copies do not represent four times as many customers.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. Icons are specified as inline SVG with 1.5 px square-cap strokes, with real vendor marks monochrome and visibly named. Reconcile fixed source values and all component states with those references instead of assuming one token handles every style.

Before you choose

Choose the strip for brief supporting statements and provide another way to inspect evidence that matters to a decision. Increasing speed or repeated card count may make the page busier without giving readers more useful information.

Good fit

A set of approved short quotes can support a page as secondary evidence while the main message remains readable without tracking the strip.
You want attribution and an optional source destination on each card, with less vertical space than a full static wall.
You prefer editable source and control over timing, styling and maintenance to a third-party testimonial service.

Not for

Fetching social posts, verifying customers or interpreting repeated loop copies as extra independent reviews.
Important evidence available only through pointer hover; touch, keyboard and reduced-motion visitors need their own readable path.
A full site with forms, accounts or checkout, or a managed npm package maintained for you.
Assuming the authored palette, typography and animation utility already match a mature design system. Review and integrate those dependencies deliberately.

How to use

You say

/testimonial-ticker Add the Testimonial Ticker section to the landing page for [product name]. Use the quotes, names and portraits I provide; do not invent testimonials. Follow the existing page framework and styling.

Inspect the host framework, aliases, Radix Avatar and animation styles before copying the section/demo/Card/Avatar source. Resolve React, @radix-ui/react-avatar and cn. Another stack needs a real port, and a standalone page is only for an explicit standalone request.
Prepare approved text and matching author identities and verify optional source URLs. Replace sample adoption claims in the section title and description as well as the records, so a fictional list does not become apparent customer proof. The sample href destinations do not match their author handles; verify or replace them. A record with href makes the entire card a link, so repeated sets also repeat the focusable links unless adapted.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. Icons are specified as inline SVG with 1.5 px square-cap strokes, with real vendor marks monochrome and visibly named. Reconcile fixed source values and all component states with those references instead of assuming one token handles every style. Supply actual local portraits/fonts; they are not bundled. Keep names/handles/quotes/portraits accurately paired, use portrait material for people and abstract plates only in deliberate special blend/invert/contain slots. Use suitable local WebP sizing and provide image-failure behavior: the card does not render the exported AvatarFallback.
Supply the marquee animation CSS and tune duration for the actual statement lengths. Check the repeated sets and side masks so there is no seam jump or permanently clipped important attribution. Do not count the repeated copies in any claimed review total. Without a host animate-marquee definition this source does not establish movement, so verify actual motion before claiming the strip scrolls or pauses. Check focus-within and repeated-link access as well as pointer hover.
Run the supplied block checks, then test the strip on phone and desktop with hover, keyboard and touch. Review a reduced-motion/static alternative and the link destinations, and verify whether hover pause alone meets the page’s actual reading needs.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT