# Almanaque Uma linha vertical com marcos fixos que vai sendo preenchida por um feixe colorido conforme a página rola. > Almanaque é um componente do THM Componentes que monta uma linha do tempo vertical: cada marco tem um rótulo grande que fica preso perto do topo enquanto o conteúdo dele passa, e um feixe em gradiente roxo e azul desce pela linha conforme a página rola. Serve para história da empresa, roadmap de produto e jornada do cliente. - Categoria: Navegação e scroll - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/almanaque/ ## Como ele é Pense numa régua vertical à esquerda da página com marcos em bolinha, como estações num mapa de metrô. No alto ficam um título e uma descrição; abaixo, cada marco tem um rótulo em letras grandes e cinza, que fica preso perto do topo da tela enquanto o conteúdo daquele período rola ao lado. A linha é um fio cinza que some nas pontas, e por dentro dele um feixe com ponta roxa e azul desce no ritmo da rolagem, como líquido enchendo um tubo. O fundo é branco no modo claro e quase preto no escuro. Em telas pequenas, os rótulos grandes ficam ocultos e só as bolinhas aparecem. ## Você pode estar procurando isto se pediu algo assim - “linha do tempo da história da empresa que vai se preenchendo quando rolo” - “roadmap do produto com uma linha colorida descendo pela página” - “mostrar a evolução do projeto ano a ano de um jeito bonito” - “linha vertical com datas que ficam paradas no topo enquanto leio” - “jornada do paciente em etapas com animação no scroll” - “aquela timeline de landing page com um brilho que acompanha a rolagem” ## Também chamado de linha do tempo vertical, linha do tempo, scroll timeline, roadmap timeline, linha do tempo animada, sticky timeline, vertical timeline ## Quando usar - História da empresa, com marcos por ano - Roadmap de produto ou changelog de versões - Jornada do paciente ou do cliente em etapas - Cronograma de um evento, curso ou programa de aceleração ## Quando evitar - Listas com poucos itens, em que uma linha do tempo longa fica vazia - Conteúdo que muda de altura depois de carregar, já que o comprimento da linha é medido uma vez só ## Como pedir para a sua IA ```text Crie uma linha do tempo vertical para a história da empresa: marcos com o ano em destaque que ficam presos no topo enquanto o conteúdo rola, um feixe em gradiente nas cores da marca descendo com o scroll, rótulos visíveis no celular e versão estática para 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 Almanaque ### Almanaque funciona no celular? Funciona, com uma diferença: em telas pequenas, Almanaque esconde o rótulo grande de cada marco e mostra só as bolinhas e o conteúdo. Se o ano ou a fase for importante, peça à IA para exibir o rótulo também no celular, dentro do conteúdo de cada item. O feixe acompanha a rolagem pelo dedo normalmente. ### Como colocar meu conteúdo em Almanaque? Você passa uma lista de itens, cada um com um identificador e um rótulo, e Almanaque cria um slot com o nome de cada identificador para você colocar o conteúdo daquele marco, como texto, fotos ou cards. O título e a descrição do topo também são props. Se o conteúdo mudar de altura depois de carregar, a linha precisa ser medida de novo. ### Almanaque respeita quem prefere menos movimento? O componente original anima o feixe sempre que a página rola. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, e em Almanaque isso é simples: mostrar a linha já preenchida e manter os rótulos fixos, que não dependem de animação. ## Componentes relacionados - [Farol](https://vibecode.thmtecnologia.com/componentes/farol/): Uma linha fina ao lado do texto ganha um feixe colorido que desce junto enquanto a pessoa lê e rola a página. - [Roteiro](https://vibecode.thmtecnologia.com/componentes/roteiro/): Uma imagem fixa ao lado do texto que troca, aproxima ou recorta conforme cada parte da história entra em foco. - [Palimpsesto](https://vibecode.thmtecnologia.com/componentes/palimpsesto/): Linha do tempo das versões de um documento, com régua para voltar no tempo, comparação lado a lado e botão de restaurar. - [Légua](https://vibecode.thmtecnologia.com/componentes/legua/): Uma pílula flutuante no topo da tela mostra quanto da página já foi lido e se abre num menu ao clicar. - [Cadência](https://vibecode.thmtecnologia.com/componentes/cadencia/): Um texto grande em que cada palavra sai do desfoque e fica nítida conforme você rola, no ritmo da leitura. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.