Como ele é
Lembra um trilho com uma luz correndo por ele enquanto você lê. À esquerda do conteúdo há um trilho cinza-claro, que desce reto e, perto do fim, dá um pequeno desvio para o lado. Por cima dele, um trecho de luz em degradê, de ciano a anil e roxo, que se apaga numa das pontas, desce conforme a página rola, com um pequeno atraso de mola, como se perseguisse a leitura. No alto do trilho, um círculo pequeno guarda um ponto verde com sombra antes da rolagem e fica branco quando o conteúdo passa do topo da tela. A altura do trilho acompanha a do conteúdo.
Você pode estar procurando isto se pediu algo assim
- linha ao lado do artigo que vai acendendo enquanto leio
- barra lateral de progresso de leitura com brilho colorido
- aquele feixe de luz que desce junto com o scroll no blog
- mostrar o progresso nas etapas do meu processo de trabalho
- linha do tempo com uma luz que acompanha a rolagem
- deixar o case do portfólio com cara de site de startup
- efeito de rolagem discreto para um texto longo
Também chamado de
- linha de luz no scroll
- feixe de rolagem
- barra de progresso de leitura
- reading progress
- scroll progress line
- linha do tempo animada
- scroll beam
Quando usar
- Artigos e posts longos de blog
- Cases de portfólio contados em etapas
- Páginas de processo, método ou metodologia
- Notas de versão e histórico de novidades de um produto
Quando evitar
- Páginas curtas, em que quase não há rolagem para o feixe percorrer
- Layouts sem margem à esquerda no celular, em que o trilho encosta no texto
Como pedir para a sua IA
Adicione um feixe de rolagem à esquerda do artigo: uma linha fina com luz em degradê nas cores da minha marca que desce conforme a pessoa lê, com espaço reservado no celular, sem pesar na rolagem e versão parada para quem prefere movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Farol
Farol funciona no Nuxt com SSR?
Funciona. Farol só acessa a janela e mede o conteúdo dentro do onMounted, então a página renderiza no servidor normalmente e o feixe começa a responder à rolagem no navegador. A altura do trilho se ajusta sozinha quando o conteúdo muda, por meio de um ResizeObserver.
Farol precisa de alguma biblioteca extra?
Precisa de uma. Além da base de animação do catálogo, Farol usa vue-use-spring para dar o atraso de mola ao feixe, e o prompt do THM Componentes já inclui o comando de instalação. O restante é um SVG simples com um degradê, sem canvas nem WebGL.
Como fica Farol no celular?
No celular, o trilho de Farol fica mais perto do texto: o recuo lateral cai de 48 para 16 pixels, então o conteúdo precisa de margem interna à esquerda para não encostar na linha, como faz a demonstração. O feixe acompanha a rolagem com o dedo do mesmo jeito.
