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
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.
