# Animated Logo Cloud Uma faixa com os logos dos seus clientes passando devagar, numa cor só, abaixo de um título curto. > O Animated Logo Cloud é um componente do THM Componentes para mostrar logos de clientes e parceiros: uma faixa que rola devagar em loop, com as pontas esmaecidas, ou uma grade fixa de logos e ícones. Os logos aparecem numa cor só, que se inverte no modo escuro, e tudo é feito com CSS, por isso pesa pouco. - 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: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/logo-cloud/ ## Como ele é É a conhecida faixa de empresas que confiam em nós, comum em sites de produto. Um título discreto, em cinza, fica centralizado acima dos logos. Na versão animada, os logos correm da direita para a esquerda num ciclo contínuo de 30 segundos, e as pontas da faixa somem num degradê, como se os logos entrassem e saíssem de uma névoa. As versões estáticas organizam logos ou ícones em grade, com três colunas no celular e até oito em telas largas. Todos os logos ficam pretos no modo claro e brancos no escuro. ## Você pode estar procurando isto se pediu algo assim - “mostrar os logos das empresas que já atendi na página inicial” - “faixa de logos de clientes passando sozinha, tipo site de SaaS” - “seção de empresas que confiam na gente com os logos rolando” - “logos dos parceiros todos da mesma cor para não poluir o visual” - “carrossel infinito de marcas embaixo do topo do site” - “prova social com logos para a página de vendas” ## Também chamado de logo cloud, nuvem de logos, faixa de clientes, logo marquee, logo wall, trusted by section, carrossel de logos ## Quando usar - Faixa abaixo do hero, para mostrar clientes antes do primeiro argumento de venda - Página de vendas ou de captação que precisa de prova social rápida - Seção de parceiros, patrocinadores ou apoiadores de um evento - Rodapé institucional com as marcas que usam o produto ## Quando evitar - Quando há só dois ou três logos, que ficam repetidos demais na faixa animada - Marcas cujo logo perde o sentido numa cor só ## Como pedir para a sua IA ```text Crie uma seção de logos de clientes abaixo do hero com faixa em loop horizontal contínuo e pontas esmaecidas: logos monocromáticos que se invertem no modo escuro, texto alternativo em cada logo e faixa parada para quem prefere menos movimento. ``` 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 Animated Logo Cloud ### O Animated Logo Cloud pausa quando a pessoa passa o mouse? Não. A faixa do Animated Logo Cloud roda sem parar, num ciclo de 30 segundos, e o código não pausa no hover. Se quiser essa pausa, ou a faixa parada para quem prefere menos movimento, como o prompt do THM Componentes pede, a IA consegue acrescentar com poucas linhas de CSS. ### Os logos do Animated Logo Cloud ficam coloridos? Não por padrão. O Animated Logo Cloud aplica um filtro que deixa todos os logos pretos no modo claro e brancos no modo escuro, para a faixa ficar uniforme. Se a marca exigir as cores originais, basta pedir à IA para remover esse filtro das imagens. ### O Animated Logo Cloud é acessível para leitores de tela? Cada logo do Animated Logo Cloud é uma imagem com texto alternativo vindo do nome da empresa. Na faixa animada, porém, a lista se repete cinco vezes para preencher o loop, então vale pedir à IA para esconder as cópias dos leitores de tela. ## Componentes relacionados - [Marquee](https://vibecode.thmtecnologia.com/componentes/marquee/): Uma fileira de logos, depoimentos ou etiquetas que desliza em loop contínuo, na horizontal ou na vertical. - [Logo Origami](https://vibecode.thmtecnologia.com/componentes/logo-origami/): Um cartão que troca de logo a cada poucos segundos, dobrando ao meio como um painel de aeroporto antigo. - [Icon Cloud](https://vibecode.thmtecnologia.com/componentes/icon-cloud/): Bola de ícones redondos girando em 3D, que segue o mouse e traz para a frente o ícone clicado. - [Animated Testimonials](https://vibecode.thmtecnologia.com/componentes/animated-testimonials/): Fotos de clientes empilhadas e levemente inclinadas, com a frase do depoimento surgindo palavra por palavra ao lado. - [Rating Reviews](https://vibecode.thmtecnologia.com/componentes/rating-reviews/): Bloco de avaliações de clientes com nota média em estrelas, barras por nota, filtros, ordenação e formulário. --- 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.