# Montanha-russa Photos, logos or words gliding nonstop along a curved path, which people can also drag. > Montanha-russa is a THM Componentes component that sends repeated items along a curved path in a loop, like roller coaster cars. Each item follows the curve, and the motion can slow down on hover, follow the page scroll or be dragged with a mouse or finger. It suits decorative strips with a slogan, logos or photos. - Category: Navigation and scroll - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse, Touch, Scroll - URL: https://vibecode.thmtecnologia.com/en/components/montanha-russa/ ## What it looks like Imagine roller coaster cars seen from the side, on a track that rises, dips and loops. You draw the track as an SVG path, and your content is repeated and spread evenly along it, moving at a steady pace. Each item turns to follow the direction of the curve, and those farther along sit on top. The track can be hidden or drawn as a line. Options make the motion brake when the mouse is over an item, speed up with scrolling or respond to dragging, with momentum after release. In the demo, narrow photos travel along a curve with a loop in the middle. ## You may be looking for this if you asked for something like - “photos moving along a curvy line like a roller coaster” - “a logo strip that runs along a curve instead of a straight line” - “a slogan traveling along a wavy path on the page” - “a wave-shaped carousel I can drag with my finger” - “elements following a track drawn in SVG” - “a decorative strip that speeds up when I scroll” ## Also known as SVG path animation, curved marquee, text on path animation, motion path, CSS offset-path, marquee along a path ## When to use - A curved decorative strip with a slogan between two landing page sections - A showcase of portfolio or product photos running through a loop - Client logos on a wavy track instead of a straight strip - Campaign and event pages with a looser visual identity ## When to avoid - Content that needs careful reading, since items keep turning and moving - Sober or institutional pages where constant motion distracts ## How to ask your AI ```text Create a strip where portfolio photos travel along a curved SVG path in a loop, rotating with the curve, slowing down on hover and draggable with momentum on mobile, with copies hidden from screen readers, a pause when off screen and a still version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Montanha-russa ### Does Montanha-russa work on phones? Yes. With the draggable option, Montanha-russa uses pointer events and reserves the touch gesture for the strip, so dragging with a finger pushes the items along the curve, with momentum after release; in exchange, the page does not scroll when a touch starts on the strip. The responsive option scales the path to fit its container. ### Will a screen reader read Montanha-russa's items several times? No. Montanha-russa repeats its content to fill the path, three times by default, but marks the extra copies as hidden from assistive technology, so a screen reader finds each item only once. Still, give photos and logos descriptive alt text. ### Is Montanha-russa heavy on the page? It is rated Light in THM Componentes: items move with the CSS motion path property, with no WebGL. Montanha-russa's animation loop runs all the time while it is mounted, even off screen, so it is worth asking your AI to pause it outside the viewport. Use light images and few repeats, and compare LCP and INP as the prompt asks. ## Related components - [Comboio](https://vibecode.thmtecnologia.com/en/components/comboio/): A row of logos, testimonials or tags that slides in a seamless loop, horizontally or vertically. - [Guirlanda](https://vibecode.thmtecnologia.com/en/components/guirlanda/): Photos, logos or icons arranged in a ring that keep turning around the center and can pause on hover. - [Roseta](https://vibecode.thmtecnologia.com/en/components/roseta/): A short phrase wraps around a circle and keeps turning, like a stamped badge next to a button. - [Planetário](https://vibecode.thmtecnologia.com/en/components/planetario/): Icons or small elements circling around a center point, like planets around the sun. - [Freguesia](https://vibecode.thmtecnologia.com/en/components/freguesia/): A strip of your client logos gliding slowly in a single color, below a short title. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).