What it looks like
At the top, a small round photo sits inside a very soft gray halo, a large circle that fades downward. On each change, the photo moves as if attached to the rim of a wheel: the old one swings away in an arc to one side and the new one comes in from the other, after a small pull back at the start. Below, the quote appears in bold between curly quotation marks, sliding sideways as the previous one fades. At the base, the name and role in italics sit between two round arrow buttons. Dark mode lightens the text.
You may be looking for this if you asked for something like
- a customer testimonial with a round photo that changes by itself
- a small testimonial slider for mobile
- show one testimonial at a time with arrows below
- the customer photo spins when the testimonial changes
- a highlighted client quote with name and role below
- compact social proof for the end of my landing page
- a lightweight testimonial carousel that will not slow the site
Also known as
- single testimonial card
- testimonial carousel
- quote slider
- social proof
- customer quote rotator
- review slider
When to use
- Landing pages with little room for social proof
- Mobile layouts where a grid of testimonials does not fit
- Closing or footer sections with one testimonial at a time
When to avoid
- Sites without real, approved testimonials, since sample texts must never pass as customer quotes
- Cases where people need to compare several testimonials at once, since only one shows at a time
How to ask your AI
Build a compact slider with my customers' real testimonials: a round photo that swings in an arc on change, a highlighted quote sliding into place, name and role between labeled arrows, autoplay that stops once the arrows are used and a static version for reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Pêndulo
What content should go into Pêndulo?
Use only real, approved testimonials: in Pêndulo, each item takes the person's photo, quote, name and role. The quote shows large and bold, so short texts work well. The demo texts are neutral placeholders with initials avatars and should never go live as testimonials.
Does Pêndulo stop rotating on its own?
It stops once someone uses the arrows: in Pêndulo, the first click on next or previous turns autoplay off, which by default runs every 5 seconds. The autoRotate prop turns rotation on or off, and duration sets the interval in seconds. There is no pause on hover.
Does Pêndulo work in Vue without Nuxt and respect reduced motion?
Pêndulo uses NuxtImg and the Nuxt Icon component; in a Vue project without Nuxt, ask your AI to swap them for img and an SVG icon. The arrows have no screen reader label, and the original component always animates: the THM Componentes prompt asks for a static version for reduced motion.
