Pular para o conteúdo
WM. Willian Minatto, início
Voltar aos projetos

02Experiência web editorialEm produção

Verstappen

Experiência editorial com foco em motion design que percorre a carreira de Max Verstappen, com narrativa guiada pelo scroll e dados atuais da Fórmula 1.

Tela inicial da experiência Verstappen: um piloto de macacão azul-marinho e capacete erguendo os dois braços, atrás da palavra VERSTAPPEN em letras grandes e de um número 3 laranja
Função
Design e desenvolvimento
Ano
2026
Stack
Next.js, React, TypeScript, Tailwind CSS, GSAP, ScrollTrigger, Lenis, Vitest, Vercel
Código-fonte
Privado

Visão geral

Verstappen é uma experiência web não oficial, feita por fã, baseada em motion design, narrativa editorial e dados da Fórmula 1. É um projeto pessoal: projetado, desenvolvido e publicado de forma independente.

O site percorre a carreira de Max Verstappen em uma sequência de seções em tela cheia: a trajetória, as corridas mais marcantes, os capacetes dos quatro títulos, as estatísticas e a vida fora da Fórmula 1.

Em vez de um site informativo convencional, a proposta foi criar uma experiência narrativa, mais próxima de uma revista digital do que de um dashboard, em que tipografia, fotografia, animação e dados ajudam a contar a história.

Problema

Equilibrar uma experiência visual com muitas animações e um frontend fácil de manter, responsivo e confiável. As animações precisavam reforçar a narrativa sem prejudicar a leitura, e os dados da temporada atual precisavam continuar disponíveis mesmo quando a API externa falhasse.

Solução

Desenvolvido com o App Router do Next.js e TypeScript em modo strict, organizado em seções independentes, com GSAP, ScrollTrigger e Lenis responsáveis pelas animações. O conteúdo editorial fica separado dos dados da Fórmula 1, que são buscados no servidor por uma camada dedicada que normaliza as respostas, aplica timeouts e usa fallback quando os dados chegam incompletos ou ficam indisponíveis.

Resultado

Um site em produção na Vercel que combina narrativa guiada pelo scroll, informações atuais da Fórmula 1 e motion design responsivo, com testes unitários na camada de dados da Fórmula 1, uma página pública de créditos das imagens e metadados básicos.

Destaques

  1. Animações: GSAP, ScrollTrigger e Lenis coordenam a entrada das seções e uma sequência guiada pelo scroll que funciona nos dois sentidos, com uma versão simplificada em telas menores.

  2. Dados da temporada: próxima corrida, posição no campeonato, pontos, vitórias e último resultado vêm da API Jolpica F1. São buscados no servidor, armazenados em cache no servidor e revalidados no máximo a cada 30 minutos. Sem banco de dados, cron job ou polling no cliente.

  3. Fallbacks: cada requisição é tratada de forma independente, com timeout de 6 segundos, e as respostas são normalizadas em modelos tipados antes de chegarem à interface. Dados parciais continuam sendo exibidos, com fallback para o que estiver indisponível; sem nenhum dado da temporada, a faixa de status é omitida, e o build não depende de a API estar acessível.

  4. Testes: 26 testes unitários com Vitest cobrem parsing, lógica de seleção, formatação e comportamentos de fallback na camada de dados da Fórmula 1.

  5. Acessibilidade: todas as seções animadas possuem um caminho para movimento reduzido. Sequências fixadas e guiadas pelo scroll tornam-se layouts estáticos, e a rolagem suave é desativada. Navegação por teclado, foco visível e áreas de toque com tamanho adequado também são contemplados.

  6. Produção: publicado na Vercel com deploys automáticos a partir da main, com metadados básicos, tags Open Graph, sitemap, robots.txt e uma página pública de créditos das imagens.

Projeto não oficial, feito por fã, criado para fins de portfólio e estudo. Não possui afiliação nem endosso de Max Verstappen, Red Bull Racing, Fórmula 1 ou FIA.