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
- scrollytelling
- 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
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 Scrollytelling
How does Scrollytelling look on phones?
In areas narrower than 680 pixels, Scrollytelling 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 Scrollytelling?
Yes. Each Scrollytelling 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 Scrollytelling accessible and reduced motion friendly?
Yes. The Scrollytelling 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.
