# Pêndulo One testimonial at a time, with a round photo swinging in an arc on each change and the quote sliding into place. > Pêndulo is a THM Componentes component for showing real testimonials in little space: one at a time, with the photo swinging in an arc on each change, the quote sliding into place and the name and role between two arrows. It advances every 5 seconds until someone uses the arrows. It suits landing pages and phones. - Category: Commerce and conversion - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/pendulo/ ## 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 ```text 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. ## Related components - [Causo](https://vibecode.thmtecnologia.com/en/components/causo/): Customer photos stacked at slight angles, with the testimonial quote appearing word by word beside them. - [Crônica](https://vibecode.thmtecnologia.com/en/components/cronica/): A testimonial in large type that appears word by word, with a giant number in the background that follows the mouse. - [Veredito](https://vibecode.thmtecnologia.com/en/components/veredito/): A customer reviews block with a star average, bars per rating, filters, sorting and a review form. - [Comboio](https://vibecode.thmtecnologia.com/en/components/comboio/): A row of logos, testimonials or tags that slides in a seamless loop, horizontally or vertically. - [Fotograma](https://vibecode.thmtecnologia.com/en/components/fotograma/): One large photo at a time that slides out of frame as the next one grows from the center. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).