# Balsa Você rola para baixo e painéis com fotos e títulos grandes deslizam para o lado, com uma barra de progresso. > Balsa é um componente exclusivo do THM Componentes que converte a rolagem vertical numa trilha horizontal de painéis: a seção fica fixa enquanto títulos grandes, textos e fotos com paralaxe deslizam para o lado, com barra de progresso. Usa animações de rolagem do CSS, com reserva em JavaScript, e serve para processos, linhas do tempo e vitrines. - Categoria: Navegação e scroll - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Rolagem, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/balsa/ ## Como ele é Funciona como uma esteira: você rola para baixo e, em vez de descer, o conteúdo anda para a esquerda. A seção fica parada na tela e passa por um painel de abertura com título grande, por painéis com números vazados na cor de destaque, título, texto curto e foto de cantos arredondados, e termina numa frase final com espaço para um botão. Dentro de cada moldura, a foto corre um pouco mais devagar que o painel, o que cria profundidade. Embaixo, uma linha fina se preenche com um gradiente de anil para ciano ao lado de um contador. O fundo padrão é um branco quente com texto azul-marinho. ## Você pode estar procurando isto se pediu algo assim - “conteúdo que anda para o lado enquanto rolo a página para baixo” - “seção que trava na tela e os cards passam na horizontal” - “mostrar as etapas do nosso processo deslizando para o lado” - “linha do tempo da empresa que corre na horizontal com o scroll” - “aquele efeito de site premiado em que a rolagem vira lateral” - “vitrine de serviços em painéis grandes que passam um por um” - “galeria horizontal controlada pela rolagem, com barra de progresso” ## Também chamado de rolagem horizontal, horizontal scroll, scroll lateral, sticky horizontal scroll, scroll-driven animation, seção fixada, pinned section, parallax scroll ## Quando usar - Página de processo de trabalho, com uma etapa por painel - Linha do tempo da empresa ou da história de um produto - Case de cliente contado em etapas, com imagens grandes - Vitrine de serviços em portfólio de agência ou estúdio ## Quando evitar - Conteúdo que a pessoa precisa comparar lado a lado ou consultar fora de ordem - Textos longos: em áreas estreitas, o parágrafo de cada painel fica escondido - Páginas com várias seções fixadas em sequência, que deixam a rolagem cansativa ## Como pedir para a sua IA ```text Crie uma seção de rolagem horizontal fixada na página de serviços: ao rolar para baixo, painéis com título, texto e foto deslizam para o lado, com barra de progresso, paralaxe suave nas imagens, navegação pelas setas do teclado e paralaxe desligada para quem prefere menos movimento. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Balsa ### Balsa funciona em todos os navegadores? Funciona. Onde há suporte a animações guiadas por rolagem do CSS, Balsa deixa com o CSS o movimento da trilha, da barra e da paralaxe; nos demais navegadores, uma reserva em JavaScript aplica as mesmas transformações durante a rolagem. Nos dois casos, a seção tem o próprio contêiner rolável. ### Balsa funciona no celular? Funciona. Em Balsa, deslizar o dedo para cima move a trilha para o lado, como a roda do mouse. Em áreas de até 560 pixels de largura, cada painel empilha título e foto e esconde o parágrafo, então deixe a mensagem principal no título. O prompt do THM Componentes também pede teste em mobile comparando LCP e INP. ### Balsa respeita menos movimento e funciona pelo teclado? Sim. Com a preferência de reduzir movimento ativa, Balsa desliga a paralaxe das fotos e a seta animada da abertura; a trilha continua andando com a rolagem, porque é a própria pessoa que a move. Pelo teclado, a área recebe foco e as setas laterais levam de um painel ao outro, com salto direto nesse modo. ## Componentes relacionados - [Roteiro](https://vibecode.thmtecnologia.com/componentes/roteiro/): Uma imagem fixa ao lado do texto que troca, aproxima ou recorta conforme cada parte da história entra em foco. - [Maquete](https://vibecode.thmtecnologia.com/componentes/maquete/): Um produto desenhado em tempo real que gira, se separa em peças e volta a se montar conforme você rola. - [Cavalete](https://vibecode.thmtecnologia.com/componentes/cavalete/): Uma tela de produto que começa inclinada para trás e fica de frente enquanto a página rola, com o título subindo. - [Almanaque](https://vibecode.thmtecnologia.com/componentes/almanaque/): Uma linha vertical com marcos fixos que vai sendo preenchida por um feixe colorido conforme a página rola. - [Comboio](https://vibecode.thmtecnologia.com/componentes/comboio/): Uma fileira de logos, depoimentos ou etiquetas que desliza em loop contínuo, na horizontal ou na vertical. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.