# Crônica Depoimento em letras grandes que surge palavra por palavra, com um número gigante ao fundo que segue o mouse. > Crônica é um componente do THM Componentes para exibir depoimentos reais em estilo editorial: a frase aparece em letras grandes, palavra por palavra, um número gigante e apagado ao fundo acompanha o mouse e uma faixa com os nomes das empresas corre no rodapé. A troca é automática, a cada 6 segundos. Serve para sites institucionais de alto padrã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/cronica/ ## Como ele é Parece a página de uma revista de design. A seção ocupa a altura da tela: à esquerda, um rótulo escrito na vertical e uma linha fina que se preenche conforme os depoimentos avançam. Ao fundo, o número do depoimento, como 01, aparece enorme e quase transparente e desliza um pouco na direção do mouse, com efeito de mola. No centro, um selo com o nome da empresa, a frase em letras grandes e finas, com cada palavra girando para cima ao entrar, e o autor com o cargo ao lado de um traço. Dois botões redondos trocam o depoimento, e os nomes das empresas correm devagar no rodapé. ## Você pode estar procurando isto se pediu algo assim - “depoimento com letra enorme tipo revista” - “seção de depoimentos elegante para site institucional de alto padrão” - “frase do cliente aparecendo palavra por palavra em letras grandes” - “número grande no fundo que mexe com o mouse” - “depoimentos que trocam sozinhos com uma linha de progresso” - “faixa com nomes de empresas correndo embaixo dos depoimentos” - “deixar a prova social do site com cara de estúdio de design” ## Também chamado de depoimentos editoriais, seção de depoimentos, depoimentos estilo revista, editorial testimonials, testimonial section, magnetic parallax, kinetic typography ## Quando usar - Sites institucionais de alto padrão, como arquitetura, design e consultoria - Páginas de agência ou estúdio em que a tipografia faz parte da marca - Seções de prova social com poucos depoimentos curtos e fortes ## Quando evitar - Sites sem depoimentos reais e autorizados, já que textos de exemplo não devem passar por falas de clientes - Depoimentos longos, que ficam enormes em letras desse tamanho - Telas de celular sem ajuste, já que o layout usa espaçamentos laterais fixos e ocupa a altura da tela ## Como pedir para a sua IA ```text Crie uma seção de depoimentos em estilo editorial com os depoimentos reais dos meus clientes: frase em letras grandes surgindo palavra por palavra, número de fundo com parallax pelo mouse, linha de progresso, setas com rótulo, layout ajustado para celular 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 Crônica ### Que conteúdo devo colocar em Crônica? Coloque só depoimentos reais e autorizados: em Crônica, cada item leva a frase, o nome do autor, o cargo e a empresa, que aparece no selo e na faixa do rodapé. Como a frase ocupa letras muito grandes, prefira falas curtas. Os textos da demonstração são modelos neutros e não devem ir para o ar como depoimentos. ### Crônica segue as cores do meu site? Segue. Crônica usa as variáveis de tema do projeto para fundo, texto, bordas e destaque, então acompanha o modo claro e o escuro definidos nelas. O prompt do THM Componentes pede para instalar a base de animação se ela faltar, adicionar essas variáveis ao CSS e usar os tokens de cor e tipografia do projeto. ### Crônica funciona no celular e respeita menos movimento? Crônica ocupa a altura da tela e usa espaçamentos laterais fixos, então peça à IA um ajuste para telas estreitas. O efeito do número segue só o mouse; no toque, ficam as setas e a troca automática. O componente original anima sempre, e 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. - [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. - [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. - [Ditado](https://vibecode.thmtecnologia.com/componentes/ditado/): As palavras saem do desfoque e aparecem uma depois da outra, como se o texto estivesse sendo gerado na hora. - [Diorama](https://vibecode.thmtecnologia.com/componentes/diorama/): Fotos e elementos espalhados que se deslocam em velocidades diferentes conforme o mouse, criando profundidade. --- 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.