# Comboio Uma fileira de logos, depoimentos ou etiquetas que desliza em loop contínuo, na horizontal ou na vertical. > Comboio é um componente do THM Componentes que faz uma fileira de conteúdo rolar sem parar, na horizontal ou na vertical, como o rodapé de notícias da TV. Usa só CSS, repete os itens para o loop não ter emenda, pode inverter o sentido e pausar no hover. Serve para logos de clientes, depoimentos e tags. - Categoria: Navegação e scroll - 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: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/comboio/ ## Como ele é Lembra o rodapé de notícias da TV, só que com cartões. O conteúdo que você coloca dentro é repetido quatro vezes lado a lado e desliza num ritmo constante, sem aceleração, num ciclo de 40 segundos por padrão; quando uma cópia sai por um lado, a seguinte já ocupa o lugar, então a emenda não aparece. O espaço entre os itens e a velocidade ficam em variáveis CSS. Dá para inverter o sentido, rolar na vertical e pausar quando o mouse passa por cima. Na demo, duas fileiras de depoimentos correm em sentidos opostos, com as bordas laterais esmaecendo no fundo da página, no modo claro e no escuro. ## Você pode estar procurando isto se pediu algo assim - “logos dos clientes passando sem parar numa faixa” - “faixa de depoimentos rolando na horizontal” - “aquela fileira de marcas que fica deslizando no meio da landing page” - “texto ou tags passando em loop tipo letreiro” - “carrossel infinito automático que para quando passo o mouse” - “coluna de avaliações subindo sozinha ao lado do formulário” - “mostrar parceiros e patrocinadores rolando sem botão de avançar” ## Também chamado de faixa de logos rolando, faixa infinita, infinite scroll strip, logo carousel, letreiro rolante, ticker, carrossel infinito ## Quando usar - Faixa de logos de clientes, parceiros ou patrocinadores - Mural de depoimentos curtos em duas fileiras com sentidos opostos - Lista de tags, serviços ou tecnologias numa landing page - Coluna vertical de avaliações ao lado de um formulário ou checkout ## Quando evitar - Informação que a pessoa precisa ler com calma, como preços ou condições - Depoimentos longos, que passam antes de a leitura terminar quando a pausa no hover está desligada ## Como pedir para a sua IA ```text Crie uma faixa marquee com os logos dos meus clientes rolando em loop infinito na horizontal, só com CSS, com pausa quando o mouse passa por cima, bordas esmaecidas nas laterais, cópias repetidas ocultas ao leitor de tela e versão 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 Comboio ### Comboio deixa o site lento? Não costuma deixar. Comboio anima apenas a posição dos itens com uma animação CSS contínua, sem JavaScript de animação nem WebGL, e tem peso Leve no THM Componentes. O cuidado está no conteúdo: como os itens se repetem quatro vezes por padrão, use logos leves, de preferência em SVG, e compare o LCP antes e depois. ### Comboio respeita quem prefere menos movimento? O componente original rola sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, e em Comboio isso é simples: pausar a animação CSS e mostrar os itens parados, numa grade ou numa fileira com rolagem manual. ### O leitor de tela lê os logos de Comboio várias vezes? Pode ler. Comboio repete o conteúdo quatro vezes por padrão e não marca as cópias como ocultas para tecnologias assistivas, então um leitor de tela encontra os mesmos itens repetidos. Vale pedir à IA para esconder as cópias extras com aria-hidden e deixar só a primeira legível. ## Componentes relacionados - [Montanha-russa](https://vibecode.thmtecnologia.com/componentes/montanha-russa/): Fotos, logos ou palavras que deslizam sem parar ao longo de um caminho curvo e podem ser arrastadas. - [Freguesia](https://vibecode.thmtecnologia.com/componentes/freguesia/): Uma faixa com os logos dos seus clientes passando devagar, numa cor só, abaixo de um título curto. - [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. - [Balsa](https://vibecode.thmtecnologia.com/componentes/balsa/): Você rola para baixo e painéis com fotos e títulos grandes deslizam para o lado, com uma barra de progresso. - [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. --- 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.