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
- timeline
- 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
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 Timeline
O Timeline funciona no celular?
Funciona, com uma diferença: em telas pequenas, o Timeline 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 no Timeline?
Você passa uma lista de itens, cada um com um identificador e um rótulo, e o Timeline 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.
O Timeline 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 no Timeline isso é simples: mostrar a linha já preenchida e manter os rótulos fixos, que não dependem de animação.
