Como ele é
Lembra uma pilha de fotos impressas sobre a mesa. À esquerda, os retratos ficam um atrás do outro, com cantos bem arredondados, levemente girados e mais apagados; o da vez vem para a frente, endireita e dá um pequeno pulo para cima antes de assentar. À direita, aparecem o nome em negrito, o cargo em cinza e a frase do depoimento, cujas palavras surgem uma a uma, saindo de um desfoque. Embaixo, dois botões redondos com setas avançam ou voltam, e a troca automática pode ser ligada, com intervalo padrão de 5 segundos. No celular, as colunas se empilham, e o modo escuro troca as cores do texto.
Você pode estar procurando isto se pediu algo assim
- depoimentos de clientes com foto que trocam com animação
- seção de prova social com a foto da pessoa e a frase dela
- fotos empilhadas que passam para a frente uma de cada vez
- texto do depoimento aparecendo palavra por palavra
- mostrar o que os clientes falam do meu serviço na landing page
- carrossel de depoimentos com setas e troca automática
- deixar a parte de depoimentos com cara de site profissional
Também chamado de
- depoimentos animados
- seção de depoimentos
- prova social
- depoimentos com foto
- testimonial carousel
- customer quotes
- social proof
Quando usar
- Landing pages de serviço que já têm depoimentos autorizados de clientes
- Páginas de consultoria, clínica ou agência em que o rosto do cliente gera confiança
- Seções de prova social logo antes do botão de contato ou de compra
Quando evitar
- Sites sem depoimentos reais e autorizados, já que textos de exemplo não devem passar por falas de clientes
- Depoimentos longos, já que cada palavra anima separada e o bloco fica lento de ler
- Clientes sem foto, já que o visual depende dos retratos empilhados
Como pedir para a sua IA
Crie uma seção com os depoimentos reais dos meus clientes: fotos empilhadas e inclinadas que trocam de lugar, frase surgindo palavra por palavra, setas acessíveis com rótulo, troca automática opcional, cores do meu tema 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 Causo
Que conteúdo devo colocar em Causo?
Use só depoimentos reais, com autorização de quem falou: em Causo, cada item leva a frase, o nome, o cargo e a foto da pessoa. Frases curtas e concretas funcionam bem, porque cada palavra entra animada. Os textos da demonstração são apenas modelos neutros e não devem ir para o ar como se fossem de clientes.
Causo funciona em Nuxt com SSR?
Funciona, com um cuidado: Causo sorteia a inclinação das fotos a cada renderização, o que muda entre servidor e navegador, então a demonstração do catálogo envolve o componente em ClientOnly, e vale fazer o mesmo. O código 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.
Causo é acessível?
Em parte. Em Causo, as setas são botões nativos, que recebem foco pelo teclado, mas não têm rótulo para leitor de tela, e a troca de depoimento não é anunciada. Também não há versão sem movimento. O prompt do THM Componentes pede à IA uma versão estática para movimento reduzido; vale pedir junto os rótulos das setas.
