Passe o mouse ou foque uma peça: ela acende com as ligações.
12 peças11 ligações4 áreas
>Contexto
O bmwdokinho.com é o site do meu carro, um BMW 320i G20 M Sport azul que eu chamo de azulzinho. Ele conta o projeto do carro peça por peça e leva quem lê até as oficinas que fazem cada serviço: Modesto Performance, Gringo Escapes, Yellow Parts e Dry Mobil Car & Service, cada uma com botão de WhatsApp.
A página abre com uma intro no estilo Need for Speed. Depois vêm a planta interativa dos sistemas do carro, a garagem com o carro girando 360°, a tunagem, o ronco, o diário do projeto em polaroids, o mapa da rota entre as oficinas, um teste de largada e um rádio.
Construí o site com agentes de IA em dois dias, 28 e 29 de outubro de 2026. As imagens do carro e das peças são ilustrações geradas por IA e aparecem marcadas como ilustração.
>Arquitetura (HLD)
É um site estático, sem framework e sem backend. Cada seção mora numa pasta própria com três arquivos: o HTML, um CSS em que todo seletor começa pela classe da seção e um JS que só começa a trabalhar quando a seção entra na tela. Um script em Python junta a planta base e as seções num único index.html, e o deploy sai pelo Vercel CLI.
O único estado fica no navegador: o melhor tempo do teste de largada vai para o localStorage. O rádio cria o player do YouTube dentro do clique de play, então nada do YouTube carrega antes disso, e toca o vídeo oficial da faixa sem o site hospedar o áudio. Os botões das oficinas abrem o WhatsApp com uma mensagem que começa por "Oi! Vim pelo bmwdokinho.com".
O mapa da rota é um SVG feito com dados do OpenStreetMap e servido junto com o site, sem servidor de tiles. Os sons do motor são trechos de 18 segundos de vídeos sob CC BY 3.0, com o crédito de cada um na página /creditos.
Componentes
Seções isoladas :: HTML, CSS e JS próprios por seção. Todo seletor começa pela classe da seção, e o JS espera a seção aparecer (IntersectionObserver) antes de carregar qualquer coisa.
build.py :: Parte sempre do mesmo commit base, prende o CSS da planta em .s-planta e monta as seções na ordem da página. O index.html não é editado à mão.
Garagem 360° :: Um player lê o manifest com o ângulo medido de cada quadro e mostra o quadro mais próximo do ângulo atual. Os quadros-âncora carregam primeiro, para o carro girar cedo, e o resto chega depois.
Rádio :: Toca o upload oficial de Riders On The Storm (Fredwreck Remix) pela IFrame API do YouTube, com play, pausa e volume de verdade. Um botão fixo no topo comanda o mesmo player.
Rota dos parceiros :: Mapa em SVG com a rota animada entre as oficinas e um card por parada com o que cada uma fez, a data e o botão de WhatsApp.
Teste de largada :: Jogo de tempo de reação que guarda o melhor tempo no navegador e gera um texto para compartilhar.
>Trade-offs
HTML, CSS e JS puros, montados por um script de build.
Alternativa descartada: Next.js ou outro framework.
Por quê: Cada agente trabalhou numa seção isolada com um contrato curto (três arquivos e prefixo de CSS), e o script junta tudo sem bundler nem dependência. O index.html final tem 212 KB.
O ângulo de cada quadro do giro vem da própria imagem.
Alternativa descartada: Usar o ângulo pedido na hora de gerar a imagem.
Por quê: O player mostra o quadro mais próximo do ângulo, então um ângulo errado vira pulo. Cada quadro é casado contra um carro-guia 3D para medir o ângulo, o carro é recortado e assentado no mesmo chão, e quadro fora da escala esperada sai. Onde dois vizinhos ficam a mais de 2° um do outro, um cross-fade cobre a passagem.
O rádio toca pelo player do YouTube.
Alternativa descartada: Hospedar o arquivo de áudio no site.
Por quê: A faixa toca do vídeo oficial, com os direitos nos titulares, e quem não aperta play não baixa nada do YouTube.
>Destaques
>246 quadros no giro da garagem, com no máximo 3,5° entre dois vizinhos.
>Cross-fade entre quadros vizinhos quando a distância passa de 2°.
>Um index.html de 212 KB montado a partir de 10 pastas de seção e da planta base.
>Som só depois de um clique, e as animações respeitam prefers-reduced-motion.
>4 oficinas com WhatsApp direto, e cada mensagem já diz que veio do site.
>Curiosidades
*O rádio toca Riders On The Storm (Fredwreck Remix), de Snoop Dogg & The Doors, da trilha do Need for Speed Underground 2.
*Os três sons do ronco são de outros G20, de canais do YouTube, e o crédito de cada um está em /creditos.
