01Desenvolvimento criativoEm produção
Chronos
Uma história interativa da computação: narrativa guiada pelo scroll, tipografia em movimento e um sinal visual recorrente que se transforma ao longo das eras tecnológicas.
- Função
- Design e desenvolvimento
- Ano
- 2026
- Stack
- Next.js, React, TypeScript, Tailwind CSS, GSAP, ScrollTrigger, SVG, CSS, Vercel
Visão geral
Chronos: An Interactive History of Computing é uma experiência web interativa sobre a evolução da computação, das máquinas que ocupavam salas inteiras aos sistemas usados hoje. É um projeto pessoal: projetado, desenvolvido e publicado de forma independente.
A narrativa vai de 1940 a 2026 em nove capítulos: Initialization, Machine, Chip, Personal Computing, Web, Always On, Everywhere, Intelligence e um Finale. A pergunta que conduz o projeto é como chegamos até aqui, e ele termina perguntando o que vem a seguir.
Não é uma linha do tempo convencional. O scroll conduz a narrativa: cada era é uma composição de tipografia, grids e estruturas em SVG que se transforma na seguinte, de modo que o leitor atravessa a história em vez de ler uma lista de datas.
Problema
Como contar décadas de história da computação como uma experiência interativa coesa, e não como uma linha do tempo convencional? O escopo é amplo e as eras não se parecem entre si. Por isso, o projeto precisava de continuidade visual, de animações complexas o bastante para conduzir a história sem prejudicar a leitura, de uma versão que funcionasse no celular e de um conteúdo que nunca dependesse da animação.
Solução
Uma direção de arte chamada Computational Archaeology: a interface se comporta como um sistema digital reconstruindo a história da computação. A linguagem visual é propositalmente restrita a fundos quase pretos, tipografia off-white em Archivo e JetBrains Mono, grids técnicos, coordenadas, nós e trilhas de circuito, tudo desenhado com CSS e SVG, sem fotografias. As eras se transformam umas nas outras em vez de aparecerem como seções isoladas.
Resultado
Uma experiência criativa de frontend publicada e autocontida, sem backend próprio, banco de dados ou CMS. Reúne engenharia de frontend e motion design editorial: TypeScript, React e Next.js, um sistema visual construído com CSS e SVG, uma implementação responsiva e uma alternativa para movimento reduzido.
Destaques
Persistent Signal: um mesmo elemento visual atravessa toda a experiência e muda de significado ao longo do caminho. Começa como um sinal de inicialização e se torna um caminho elétrico, uma trilha de circuito, uma estrutura de pixels e de interface, uma conexão de rede, um fluxo contínuo de dados, o contorno de um dispositivo e, por fim, as relações entre informações. É um recurso narrativo, não uma linha decorativa: é o que conecta eras que, de outra forma, teriam pouco em comum.
Sistema de animação: GSAP, ScrollTrigger e @gsap/react conduzem sequências fixadas, transições controladas pelo scroll, desenho de caminhos em SVG, transformações de escala e tipografia cinética. As eras se transformam umas nas outras, como de Machine para Chip ou de Web para Always On, e a técnica varia de uma seção para outra.
Tipografia como estrutura: títulos editoriais em grande escala, em Archivo, sustentam cada capítulo, com JetBrains Mono para rótulos, períodos e coordenadas. O espaço negativo e os grids técnicos fazem o restante.
Design responsivo: desktop, tablet e celular têm experiências adaptadas. No celular, as sequências são simplificadas quando necessário, em vez de reproduzir os efeitos do desktop em escala menor. Os layouts foram validados em 1440px, 1024px e 390px.
Movimento reduzido: com prefers-reduced-motion ativado, a alternativa é estrutural. As sequências fixadas são desativadas, as timelines complexas de scroll são ignoradas, e o conteúdo e as composições em SVG permanecem visíveis e legíveis. Nada depende da animação para ser compreendido.
Teclado e foco: o controle Restart, no final, retorna ao topo, move o foco para o título principal e mantém um indicador de foco visível.
O conteúdo histórico se baseia em referências publicadas, principalmente do Computer History Museum e do CERN. As décadas funcionam como âncoras editoriais, não como limites históricos rígidos.