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