# Farol A thin line beside the text gains a colorful beam that travels down as people read and scroll. > Farol is a THM Componentes component that places a thin line to the left of your content, carrying a gradient beam from cyan to purple. As the page scrolls, the beam travels down the line with a slight spring lag, and the dot at the top changes color. It suits articles, case studies and process pages. - Category: Navigation and scroll - 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/farol/ ## What it looks like It is like a rail with a light running along it while you read. To the left of the content runs a light gray track that goes straight down and, near the end, takes a small sideways jog. On top of it, a stretch of gradient light, from cyan through indigo to purple and fading at one end, moves down as the page scrolls, with a small spring lag, as if chasing the reader. At the top, a small circle holds a green dot with a shadow before scrolling and turns white once the content passes the top of the screen. The track grows with the content. ## You may be looking for this if you asked for something like - “a line next to the article that lights up as I read” - “a reading progress bar on the side with a colorful glow” - “that light beam that moves down with the scroll on blogs” - “show progress through the steps of my work process” - “a timeline with a light that follows the scroll” - “make my portfolio case study feel like a startup site” - “a subtle scroll effect for a long piece of text” ## Also known as glowing scroll line, scroll beam, reading progress line, scroll progress indicator, animated timeline line, scroll-linked beam ## When to use - Long articles and blog posts - Portfolio case studies told in steps - Process, method or methodology pages - Release notes and product changelogs ## When to avoid - Short pages, with almost no scrolling for the beam to travel - Phone layouts without left padding, where the track touches the text ## How to ask your AI ```text Add a scroll beam to the left of the article: a thin line with gradient light in my brand colors that travels down as people read, with room reserved on phones, no impact on scrolling smoothness and a still version for people who prefer reduced motion. ``` 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 Farol ### Does Farol work in Nuxt with SSR? Yes. Farol only touches the window and measures the content inside onMounted, so the page renders on the server as usual and the beam starts reacting to scroll in the browser. The track height adjusts by itself when the content changes, through a ResizeObserver. ### Does Farol need any extra library? One. Besides the catalog animation base, Farol uses vue-use-spring to give the beam its spring lag, and the THM Componentes prompt already includes the install command. The rest is a simple SVG with a gradient, with no canvas or WebGL. ### How does Farol look on phones? On phones, Farol's track sits closer to the text: its side offset drops from 48 to 16 pixels, so the content needs left padding to keep clear of the line, as the demo does. The beam follows finger scrolling the same way. ## Related components - [Almanaque](https://vibecode.thmtecnologia.com/en/components/almanaque/): A vertical line with pinned milestones that a colored beam fills in as the page scrolls. - [Légua](https://vibecode.thmtecnologia.com/en/components/legua/): A floating pill at the top of the screen shows how much of the page has been read and opens into a menu on click. - [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. - [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. - [Teleférico](https://vibecode.thmtecnologia.com/en/components/teleferico/): Thin lines connect icons and cards while a colored pulse of light runs along them, showing data on the move. --- 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).