Testimonials

Reviews as two opposing tickers with video

Reviews as an endless ticker: two rows of cards travel toward each other, paused on hover, edges dissolve. A card with a video review opens a lightbox with a player. A total score with stars top left. The name links to a profile, the cohort as a tag.

What you can change

  • items: quotes, names, roles, photos, profile links, video and preview, cohorts
  • score, scoreLabel, videoLabel, closeLabel; eyebrow, title, lede
  • accent and background, tone

Anatomy

Two marquee rows of reviews, video in a lightbox, a score, profiles

Text density: heavyNeeds: video
  • quote *
  • name *
  • profile
  • video
  • overall score

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/testimonials-018?lang=en&theme=dark

2Paste into the chat
3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

One file, zero dependencies, “use client” for the lightbox. Rows are items split in half (with ≤3 reviews both rows show all); each row is a track with two <ul> copies (the second aria-hidden, links tabIndex=-1), @keyframes translateX(-50 %) lasting max(30 s, n×14 s), the second row animation-direction:reverse, paused on :hover and :focus-within, edges via mask-image. The lightbox is a <dialog> with showModal(): a link to mp4/webm/mov → <video controls autoplay>, otherwise <iframe allow=autoplay>; a click on the backdrop and Escape close it, onClose resets state. reduced-motion: rows become a wrapping grid without copies. Palette --vibeui-testimonials-018-* is neutral: ink and paper via light-dark(), the site colours come through the accent, ink and background props; Unbounded and Inter via <link precedence> from Google Fonts with system fallbacks. tone pins the scheme, accent, ink and background override colours.

Tags

  • course
  • education
  • edtech
  • landing
  • reviews
  • marquee
  • ticker
  • video
  • lightbox
  • dialog
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…