# Causo Fotos de clientes empilhadas e levemente inclinadas, com a frase do depoimento surgindo palavra por palavra ao lado. > Causo é um componente do THM Componentes para exibir depoimentos reais dos seus clientes: as fotos ficam empilhadas e inclinadas, a da vez vem para a frente com um pulo suave e a frase surge palavra por palavra, saindo do desfoque. Tem setas de navegação e troca automática opcional. Serve para landing pages de serviço. - 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, Motion for Vue - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/causo/ ## 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 ```text 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. ## Componentes relacionados - [Pêndulo](https://vibecode.thmtecnologia.com/componentes/pendulo/): Um depoimento por vez, com a foto redonda girando em arco ao trocar e a frase deslizando para o lugar. - [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. - [Cartomante](https://vibecode.thmtecnologia.com/componentes/cartomante/): Leque de fotos altas atrás de um título grande: cada foto se revela no hover e o título fica vazado no meio. - [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. --- 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.