# Roteiro Uma imagem fixa ao lado do texto que troca, aproxima ou recorta conforme cada parte da história entra em foco. > Roteiro é um componente exclusivo do THM Componentes para contar histórias com a rolagem: o texto passa de um lado e a imagem fica fixa do outro, trocando, aproximando um ponto de foco ou recortando o quadro a cada passo, com números em destaque e barra de progresso. Serve para cases, relatórios de impacto e história da marca. - 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/roteiro/ ## Como ele é Funciona como uma reportagem especial de jornal na internet. De um lado, os passos da história sobem com a rolagem: o que está em foco aparece nítido, com número, rótulo na cor de destaque, título e texto, e os outros ficam apagados. Do outro, uma moldura de cantos arredondados fica parada e reage a cada passo: troca de foto com um esmaecer, aproxima um detalhe ou fecha o enquadramento, sempre com um leve zoom que acompanha a rolagem. Sobre a foto aparecem um selo com o passo atual e, quando há, um número grande em gradiente. Embaixo, barrinhas marcam o progresso de cada passo. ## Você pode estar procurando isto se pediu algo assim - “seção que vai contando a história conforme a pessoa rola” - “imagem parada de um lado e o texto passando do outro” - “case de cliente contado em etapas com fotos que mudam” - “aquele estilo de reportagem especial em que a imagem muda com o scroll” - “foto que dá zoom num detalhe quando chega a parte certa do texto” - “relatório de impacto com números aparecendo durante a leitura” - “página da história da empresa com mais emoção que uma lista de datas” ## Também chamado de imagem fixa com texto rolando, narrativa no scroll, sticky scroll, storytelling com rolagem, scroll storytelling, sticky media, reportagem interativa ## Quando usar - Cases de clientes contados em etapas, do problema ao resultado - Relatórios de impacto e prestação de contas com números de destaque - Apresentação de produto em que cada passo mostra um detalhe da imagem - Página de história da marca ou da fundação da empresa ## Quando evitar - Conteúdo de consulta rápida, em que a pessoa quer pular direto para uma parte - Histórias sem imagens fortes, porque a mídia fixa ocupa metade da área ## Como pedir para a sua IA ```text Crie uma seção de scrollytelling para o case do meu cliente: imagem fixa de um lado que troca, dá zoom num ponto de foco ou recorta conforme cada passo de texto entra em foco, com números em destaque, barra de progresso, layout empilhado no celular e trocas sem animação 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 Roteiro ### Como Roteiro fica no celular? Em áreas com menos de 680 pixels de largura, Roteiro muda de layout: a imagem fica fixa no topo, ocupando quase metade da altura, e os passos sobem por baixo dela em cartões brancos. A linha que define o passo ativo desce para perto da base, e o prompt do THM Componentes pede teste em mobile com LCP e INP. ### Dá para trocar as imagens e os textos de Roteiro? Dá. Cada passo de Roteiro recebe rótulo, título, texto, imagem e texto alternativo, e pode ter zoom com ponto de foco, recorte do quadro e um número em destaque formatado em pt-BR, como porcentagem ou valor compacto. A prop side põe a imagem à direita ou à esquerda, e o componente rola dentro da própria área, que precisa de altura definida. ### Roteiro é acessível e respeita menos movimento? É. A área de Roteiro recebe foco e rola pelo teclado, o passo ativo é marcado para leitores de tela e cada troca é anunciada numa região ao vivo, com o número do passo e o título. Com a preferência de reduzir movimento, trocas, zoom e recorte acontecem sem transição e o zoom contínuo da imagem é desligado. ## Componentes relacionados - [Balsa](https://vibecode.thmtecnologia.com/componentes/balsa/): Você rola para baixo e painéis com fotos e títulos grandes deslizam para o lado, com uma barra de progresso. - [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. - [Cadência](https://vibecode.thmtecnologia.com/componentes/cadencia/): Um texto grande em que cada palavra sai do desfoque e fica nítida conforme você rola, no ritmo da leitura. - [Farol](https://vibecode.thmtecnologia.com/componentes/farol/): Uma linha fina ao lado do texto ganha um feixe colorido que desce junto enquanto a pessoa lê e rola a página. - [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. --- 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.