# Roteiro A pinned image beside the text that swaps, zooms or crops as each part of the story comes into focus. > Roteiro is an exclusive THM Componentes component for telling stories through scrolling: text steps move past on one side while the image stays pinned on the other, swapping, zooming into a focal point or cropping the frame at each step, with highlighted numbers and a progress bar. It suits case studies, impact reports and brand history pages. - 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/roteiro/ ## What it looks like It works like an online newspaper feature. On one side, the story steps rise as you scroll: the one in focus is sharp, with a number, a label in the accent color, a title and text, while the others stay faded. On the other side, a rounded frame stays still and reacts to each step: it swaps photos with a fade, zooms into a detail or tightens the framing, always with a slight zoom that follows the scroll. A badge with the current step sits on the photo and, when there is one, a large gradient number. Below, small bars track the progress of each step. ## You may be looking for this if you asked for something like - “a section that tells the story as people scroll” - “an image that stays put on one side while text scrolls on the other” - “a client case told in steps with photos that change” - “that news feature style where the image changes with the scroll” - “a photo that zooms into a detail when the right part of the text arrives” - “an impact report with numbers appearing as people read” - “a company history page with more emotion than a list of dates” ## Also known as pinned image with scrolling text, scroll storytelling, sticky scroll, sticky media section, scroll-driven narrative, interactive story ## When to use - Client case studies told in steps, from problem to result - Impact reports and annual reviews with highlighted numbers - Product presentations where each step shows a detail of the image - Brand history or founding story pages ## When to avoid - Reference content where people want to jump straight to one part - Stories without strong images, since the pinned media takes half the area ## How to ask your AI ```text Create a scrollytelling section for my client case study: a pinned image on one side that swaps, zooms into a focal point or crops as each text step comes into focus, with highlighted numbers, a progress bar, a stacked layout on phones and instant changes 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 Roteiro ### How does Roteiro look on phones? In areas narrower than 680 pixels, Roteiro switches layout: the image stays pinned at the top, taking almost half the height, and the steps scroll up beneath it as white cards. The line that sets the active step moves closer to the bottom, and the THM Componentes prompt asks for a mobile test with LCP and INP. ### Can I change the images and texts in Roteiro? Yes. Each Roteiro step takes a label, title, text, image and alt text, and can add a zoom with a focal point, a frame crop and a highlighted number formatted in Brazilian Portuguese, as a percentage or a compact value. The side prop puts the image on the right or the left, and the component scrolls inside its own area, which needs a set height. ### Is Roteiro accessible and reduced motion friendly? Yes. Roteiro's area takes focus and scrolls with the keyboard, the active step is marked for screen readers and each change is announced in a live region with the step number and title. With reduced motion on, swaps, zooms and crops happen without transitions and the continuous image zoom is turned off. ## Related components - [Balsa](https://vibecode.thmtecnologia.com/en/components/balsa/): Scroll down and panels with photos and large headlines slide sideways, with a progress bar along the bottom. - [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. - [Cadência](https://vibecode.thmtecnologia.com/en/components/cadencia/): A large block of text where each word comes out of a blur and turns sharp as you scroll, at reading pace. - [Farol](https://vibecode.thmtecnologia.com/en/components/farol/): A thin line beside the text gains a colorful beam that travels down as people read and scroll. - [Almanaque](https://vibecode.thmtecnologia.com/en/components/almanaque/): A vertical line with pinned milestones that a colored beam fills in as the page scrolls. --- 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).