Hover or focus a piece: it lights up with its links.
12 pieces11 links4 areas
>Context
bmwdokinho.com is the site of my car, a blue BMW 320i G20 M Sport I call azulzinho ("little blue"). It tells the car's build piece by piece and sends readers to the shops behind each job: Modesto Performance, Gringo Escapes, Yellow Parts and Dry Mobil Car & Service, each with a WhatsApp button.
The page opens with a Need for Speed style intro. Then come an interactive plan of the car's systems, the garage with the car turning 360°, the tuning section, the engine sound, a polaroid diary of the build, the route map between the shops, a launch timer game and a radio.
I built it with AI agents in two days, 28 and 29 October 2026. The images of the car and its parts are AI-generated illustrations and are labeled as illustrations on the page.
>High-level design
It is a static site with no framework and no backend. Each section lives in its own folder with three files: the HTML, a CSS file where every selector starts with the section's class, and a JS file that starts working only when the section scrolls into view. A Python script joins the base plan and the sections into a single index.html, and the deploy goes out through the Vercel CLI.
The only state lives in the browser: the best launch time goes to localStorage. The radio creates the YouTube player inside the play click, so nothing from YouTube loads before that, and it plays the track's official video without the site hosting the audio. The shop buttons open WhatsApp with a message that starts with "Oi! Vim pelo bmwdokinho.com" ("Hi! I came from bmwdokinho.com").
The route map is an SVG made from OpenStreetMap data and served with the site, with no tile server. The engine sounds are 18-second clips from CC BY 3.0 videos, each credited on the /creditos page.
Components
Isolated sections :: Each section has its own HTML, CSS and JS. Every selector starts with the section's class, and the JS waits for the section to appear (IntersectionObserver) before loading anything.
build.py :: Always starts from the same base commit, scopes the plan's CSS under .s-planta and assembles the sections in page order. Nobody edits index.html by hand.
360° garage :: A player reads the manifest with each frame's measured angle and shows the frame nearest to the current angle. Anchor frames load first so the car can turn early, and the rest fill in.
Radio :: Plays the official upload of Riders On The Storm (Fredwreck Remix) through the YouTube IFrame API, with real play, pause and volume. A fixed button in the header drives the same player.
Partner route :: An SVG map with the route animated between the shops and a card per stop with what each shop did, the date and the WhatsApp button.
Launch timer :: A reaction-time game that keeps the best time in the browser and builds a text to share.
>Trade-offs
Plain HTML, CSS and JS, assembled by a build script.
Alternative rejected: Next.js or another framework.
Why: Each agent worked on one isolated section under a short contract (three files and a CSS prefix), and the script joins them with no bundler and no dependencies. The final index.html is 212 KB.
Each spin frame's angle comes from the image itself.
Alternative rejected: Trust the angle requested when the image was generated.
Why: The player shows the frame nearest to the angle, so a wrong angle becomes a jump. Each frame is matched against a 3D guide car to measure its angle, the car is cut out and set on the same floor, and frames off the expected scale are dropped. Where two neighbours are more than 2° apart, a cross-fade covers the step.
The radio plays through the YouTube player.
Alternative rejected: Host the audio file on the site.
Why: The track plays from the official video, with the rights staying with their holders, and anyone who never presses play downloads nothing from YouTube.
>Highlights
>246 frames in the garage spin, at most 3.5° between neighbours.
>Cross-fade between neighbouring frames when the gap is wider than 2°.
>A 212 KB index.html assembled from 10 section folders and the base plan.
>Sound only after a click, and the animations respect prefers-reduced-motion.
>4 shops with direct WhatsApp, and every message says it came from the site.
>Fun facts
*The radio plays Riders On The Storm (Fredwreck Remix) by Snoop Dogg & The Doors, from the Need for Speed Underground 2 soundtrack.
*The three engine sounds come from other G20s on YouTube channels, each credited on /creditos.
