# Pêndulo Um depoimento por vez, com a foto redonda girando em arco ao trocar e a frase deslizando para o lugar. > Pêndulo é um componente do THM Componentes para exibir depoimentos reais em pouco espaço: mostra um por vez, com a foto girando em arco na troca, a frase deslizando para o lugar e nome e cargo entre duas setas. A troca é automática, a cada 5 segundos, até a pessoa usar as setas. Serve para landing pages e celular. - Categoria: Comércio e conversão - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/pendulo/ ## Como ele é No topo, uma foto redonda pequena fica dentro de um halo cinza bem suave, um círculo grande que some para baixo. Na troca, a foto se move como se estivesse presa à borda de uma roda: a antiga sai girando em arco para um lado e a nova entra pelo outro, depois de um pequeno recuo no início. Abaixo, a frase do depoimento aparece em negrito, entre aspas curvas, deslizando de lado enquanto a anterior some. Na base, o nome e o cargo em itálico ficam entre dois botões redondos com setas. O modo escuro clareia o texto. ## Você pode estar procurando isto se pediu algo assim - “depoimento de cliente com foto redonda que troca sozinho” - “slider de depoimentos pequeno para o celular” - “mostrar um depoimento por vez com setas embaixo” - “foto do cliente girando quando troca o depoimento” - “frase do cliente em destaque com nome e cargo embaixo” - “prova social compacta para o fim da landing page” - “carrossel de depoimentos leve que não pese no site” ## Também chamado de slider de depoimentos, carrossel de depoimentos, prova social, depoimento com foto, testimonial carousel, quote slider, social proof ## Quando usar - Landing pages com espaço curto para prova social - Versões de celular em que uma grade de depoimentos não cabe - Seções de fechamento ou de rodapé com um depoimento por vez ## Quando evitar - Sites sem depoimentos reais e autorizados, já que textos de exemplo não devem passar por falas de clientes - Casos em que a pessoa precisa comparar vários depoimentos ao mesmo tempo, já que aparece um por vez ## Como pedir para a sua IA ```text Crie um slider compacto com os depoimentos reais dos meus clientes: foto redonda que gira em arco na troca, frase em destaque deslizando para o lugar, nome e cargo entre setas com rótulo, troca automática que para ao usar as setas e versão estática para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Pêndulo ### Que conteúdo devo colocar em Pêndulo? Use só depoimentos reais e autorizados: em Pêndulo, cada item leva a foto, a frase, o nome e o cargo da pessoa. A frase aparece grande e em negrito, então funciona com textos curtos. Os textos da demonstração são modelos neutros, com avatares de iniciais, e não devem ir para o ar como depoimentos. ### A troca automática de Pêndulo para sozinha? Para quando a pessoa usa as setas: em Pêndulo, o primeiro clique em avançar ou voltar desliga a troca automática, que por padrão roda a cada 5 segundos. A prop autoRotate liga ou desliga esse giro, e duration define o intervalo em segundos. Não há pausa ao passar o mouse. ### Pêndulo funciona em Vue sem Nuxt e respeita menos movimento? Pêndulo usa NuxtImg e o componente Icon do Nuxt; num projeto Vue sem Nuxt, peça à IA que os troque por img e um ícone em SVG. As setas não têm rótulo para leitor de tela, e o componente original anima sempre: o prompt do THM Componentes pede uma versão estática para movimento reduzido. ## Componentes relacionados - [Causo](https://vibecode.thmtecnologia.com/componentes/causo/): Fotos de clientes empilhadas e levemente inclinadas, com a frase do depoimento surgindo palavra por palavra ao lado. - [Crônica](https://vibecode.thmtecnologia.com/componentes/cronica/): Depoimento em letras grandes que surge palavra por palavra, com um número gigante ao fundo que segue o mouse. - [Veredito](https://vibecode.thmtecnologia.com/componentes/veredito/): Bloco de avaliações de clientes com nota média em estrelas, barras por nota, filtros, ordenação e formulário. - [Comboio](https://vibecode.thmtecnologia.com/componentes/comboio/): Uma fileira de logos, depoimentos ou etiquetas que desliza em loop contínuo, na horizontal ou na vertical. - [Fotograma](https://vibecode.thmtecnologia.com/componentes/fotograma/): Uma foto grande por vez, que sai deslizando e dá lugar à próxima, crescendo a partir do centro. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.