# Bobina Each line of text rolls vertically and gives way to an identical copy, in step with the scroll. > Bobina is a THM Componentes component that rolls text vertically as you scroll: inside each line, one copy of the text exits through one edge while an identical copy enters from the opposite edge, with spring smoothing. It is lightweight and works well for lists of names, clients or services on landing pages. - Category: Text and typography - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Scroll - URL: https://vibecode.thmtecnologia.com/en/components/bobina/ ## What it looks like It looks like a mechanical counter turning one notch. Each line of text sits in a window of its own size and, as it passes through a band of the scrolling area, the word rolls vertically: one copy exits through one edge of the window while an identical copy enters from the other edge. Scroll back and the motion reverses. In a long list, the lines swap one after another, like a wave that follows the scroll. A spring smooths the motion, which trails the scroll slightly with no jumps. The component sets no colors: font, size and color come from the text you put in it. ## You may be looking for this if you asked for something like - “text that rolls vertically as I scroll down the page” - “a list of names that flips over one by one while scrolling” - “words that roll like a mechanical counter when you scroll” - “a rolling text effect tied to scroll for my landing page” - “animate a client list on scroll without making the page heavy” - “a headline that does a vertical roll as it passes through the screen” ## Also known as mechanical counter text, rolling text on scroll, vertical text swap, scroll-linked text animation, text roll effect, scroll-driven text ## When to use - Client, partner or service lists on a long landing page - Story sections where scrolling should set the rhythm of the text - Agency pages and portfolios with large uppercase type - Credits, team members or speakers shown one name per line ## When to avoid - Long paragraphs, since the effect is built for short single-line text - Screens without scrolling, such as a fixed dashboard, where it never fires ## How to ask your AI ```text Create a scroll-linked text animation for the client list on my landing page: each name rolls vertically and is swapped for an identical copy as the page scrolls, with spring smoothing, a static version for reduced motion and the text announced only once by screen readers. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Bobina ### Do screen readers read Bobina more than once? No. Bobina draws the text three times to create the motion, but the copy that reserves the space and the second moving copy are marked with aria-hidden, so screen readers announce the phrase only once. ### Does Bobina work on phones? Yes. Bobina reacts to scrolling, whether by mouse wheel or by finger, and does not rely on hover. It is rated Light in THM Componentes, and the prompt still tells your AI to test on mobile and compare LCP and INP before and after adding it. ### How do I change the speed of Bobina? Bobina has two controls: the scroll range where the swap happens, set by the offset prop, and the spring that smooths the motion, with stiffness 200 and damping 30 by default. A shorter range makes the swap faster; more damping makes the motion more restrained. ## Related components - [Cambalhota](https://vibecode.thmtecnologia.com/en/components/cambalhota/): On hover, each letter slides vertically and gives way to a copy, in a wave that runs across the word. - [Iluminura](https://vibecode.thmtecnologia.com/en/components/iluminura/): The sentence stays pinned on screen and each word goes from faded gray to full color 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. - [Sinônimo](https://vibecode.thmtecnologia.com/en/components/sinonimo/): One word in the middle of the headline changes by itself every few seconds, the new one arriving letter by letter. - [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. --- 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).