What it looks like
It works like a conveyor belt: you scroll down and, instead of moving down, the content travels to the left. The section stays fixed on screen and passes through an opening panel with a large headline, then numbered panels with outlined digits in the accent color, a title, a short text and a rounded photo, and ends on a closing statement with room for a button. Inside each frame the photo drifts a little slower than the panel, which adds depth. At the bottom, a thin line fills with an indigo to cyan gradient next to a counter. The default backdrop is a warm white with navy text.
You may be looking for this if you asked for something like
- content that moves sideways as I scroll down the page
- a section that sticks on screen while cards slide horizontally
- show the steps of our process sliding from right to left
- a company timeline that runs horizontally as you scroll
- that award-site effect where scrolling turns sideways
- a services showcase in big panels that pass one by one
- a scroll-controlled horizontal gallery with a progress bar
Also known as
- horizontal scroll
- sticky horizontal scroll
- scroll-driven animation
- pinned section
- sideways scrolling
- horizontal scroll section
- parallax scroll
When to use
- A work process page, with one step per panel
- A company timeline or the history of a product
- A client case told in steps, with large images
- A services showcase for an agency or studio portfolio
When to avoid
- Content people need to compare side by side or read out of order
- Long copy: in narrow areas, the paragraph in each panel is hidden
- Pages with several pinned sections in a row, which make scrolling tiring
How to ask your AI
Create a pinned horizontal scroll section on my services page: as I scroll down, panels with a title, text and photo slide sideways, with a progress bar, subtle image parallax, arrow key navigation and parallax turned off for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Balsa
Does Balsa work in every browser?
Yes. Where CSS scroll-driven animations are supported, Balsa lets CSS move the track, the progress bar and the parallax; in other browsers a JavaScript fallback applies the same transforms while you scroll. In both cases the section has its own scroll container.
Does Balsa work on phones?
Yes. In Balsa, swiping up moves the track sideways, just like the mouse wheel. In areas up to 560 pixels wide, each panel stacks the title over the photo and hides the paragraph, so keep the key message in the title. The THM Componentes prompt also asks for a mobile test comparing LCP and INP.
Does Balsa handle reduced motion and keyboard use?
Yes. With reduced motion on, Balsa turns off the photo parallax and the animated arrow in the opening panel; the track still moves as you scroll, because the person drives that motion. With a keyboard, the area takes focus and the left and right arrows jump between panels, instantly in that mode.
