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
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.
