# Montanha-russa Fotos, logos ou palavras que deslizam sem parar ao longo de um caminho curvo e podem ser arrastadas. > Montanha-russa é um componente do THM Componentes que faz itens repetidos percorrerem um caminho curvo em loop, como vagões de uma montanha-russa. Cada item acompanha a curva, e o movimento pode desacelerar no hover, seguir a rolagem da página ou ser arrastado com mouse e dedo. Serve para faixas decorativas com slogan, logos ou fotos. - 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, Toque, Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/montanha-russa/ ## Como ele é Imagine vagões de montanha-russa vistos de lado, num trilho que sobe, desce e dá voltas. Você desenha o trilho como um caminho SVG, e o conteúdo que colocar dentro é repetido e distribuído ao longo dele com espaçamento igual, avançando num ritmo constante. Cada item gira para acompanhar a direção da curva, e os que estão mais adiante ficam por cima dos anteriores. O trilho pode ficar invisível ou aparecer como linha. Opções fazem o movimento frear quando o mouse passa sobre um item, acelerar com a rolagem ou responder ao arraste, com inércia ao soltar. Na demo, fotos estreitas percorrem uma curva com um laço no meio. ## Você pode estar procurando isto se pediu algo assim - “fotos passando por uma linha curva tipo montanha-russa” - “faixa de logos que corre em curva em vez de reta” - “slogan andando por um caminho ondulado na página” - “carrossel em formato de onda que dá para arrastar com o dedo” - “elementos seguindo uma trilha desenhada em SVG” - “faixa decorativa que acelera quando rolo a página” ## Também chamado de carrossel em curva, marquee em curva, text on path animation, motion path, CSS offset-path, faixa em curva, curved marquee ## Quando usar - Faixa decorativa curva com slogan entre duas seções da landing page - Vitrine de fotos de portfólio ou de produto correndo por um laço - Logos de clientes num percurso ondulado no lugar da faixa reta - Páginas de campanha e eventos com identidade visual mais solta ## Quando evitar - Conteúdo que precisa ser lido com atenção, porque os itens giram e se movem o tempo todo - Páginas sóbrias ou institucionais em que o movimento constante distrai ## Como pedir para a sua IA ```text Crie uma faixa em que fotos do portfólio percorrem um caminho SVG curvo em loop, girando com a curva, desacelerando quando o mouse passa e podendo ser arrastadas com inércia no celular, com cópias ocultas ao leitor de tela, pausa fora da tela e versão parada 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 Montanha-russa ### Montanha-russa funciona no celular? Sim. Com a opção draggable, Montanha-russa usa eventos de ponteiro e reserva o gesto de toque para a faixa, então arrastar com o dedo empurra os itens pela curva, com inércia ao soltar; em troca, a página não rola quando o toque começa sobre a faixa. A opção responsive escala o caminho para caber no contêiner. ### O leitor de tela lê os itens de Montanha-russa várias vezes? Não. Montanha-russa repete o conteúdo para preencher o caminho, três vezes por padrão, mas marca as cópias extras como ocultas para tecnologias assistivas, então o leitor de tela encontra cada item uma vez só. Ainda assim, dê texto alternativo descritivo às fotos e aos logos. ### Montanha-russa pesa na página? Tem classificação Leve no THM Componentes: os itens andam pela propriedade CSS de caminho, sem WebGL. O laço de animação de Montanha-russa roda o tempo todo enquanto o componente está montado, mesmo fora da tela, então vale pedir à IA para pausar fora da viewport. Use imagens leves e poucas repetições, e compare LCP e INP como pede o prompt. ## Componentes relacionados - [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. - [Guirlanda](https://vibecode.thmtecnologia.com/componentes/guirlanda/): Fotos, logos ou ícones dispostos em roda que giram sem parar em volta do centro e podem pausar com o mouse. - [Roseta](https://vibecode.thmtecnologia.com/componentes/roseta/): Uma frase curta dá a volta num círculo e gira sem parar, como um selo carimbado ao lado do botão. - [Planetário](https://vibecode.thmtecnologia.com/componentes/planetario/): Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol. - [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. --- 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.