# Balsa Scroll down and panels with photos and large headlines slide sideways, with a progress bar along the bottom. > Balsa is an exclusive THM Componentes component that turns vertical scrolling into a horizontal track of panels: the section stays pinned while large headlines, short texts and parallax photos slide sideways, with a progress bar and a counter. It uses CSS scroll-driven animations with a JavaScript fallback and suits work processes, timelines and showcases. - Category: Navigation and scroll - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Scroll, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/balsa/ ## 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 ```text 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. ## Related components - [Roteiro](https://vibecode.thmtecnologia.com/en/components/roteiro/): A pinned image beside the text that swaps, zooms or crops as each part of the story comes into focus. - [Maquete](https://vibecode.thmtecnologia.com/en/components/maquete/): A product drawn in real time that spins, splits into parts and snaps back together as you scroll. - [Cavalete](https://vibecode.thmtecnologia.com/en/components/cavalete/): A product screen that starts tilted back and turns to face you as the page scrolls, with the headline rising. - [Almanaque](https://vibecode.thmtecnologia.com/en/components/almanaque/): A vertical line with pinned milestones that a colored beam fills in as the page scrolls. - [Comboio](https://vibecode.thmtecnologia.com/en/components/comboio/): A row of logos, testimonials or tags that slides in a seamless loop, horizontally or vertically. --- 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).