Minimalist F1 Circuit Collection

Platform

Product / UX / UI / Frontend (React + TypeScript)

Role

Web + PWA (offline-ready)

Overview

"Circuit Collection" is a minimalist Formula 1 2026-season poster gallery Web application. It presents SVG circuit track layouts rendered as stroked elements on dark, theme-able cards. Each track has a special color, and the gallery has many features. It has themes, multiple card formats, export capabilities, a 3D globe map view, live F1 standings data, weather information, compare mode, slideshow, and eleven hidden Easter eggs.

The application is built as a single-page React app (no routing needed) with a focus on pixel-perfect rendering, smooth animations, and a premium Dark aesthetic inspired by F1 broadcast graphics.

The problem

Most circuit diagrams you find online are just static images with varying styles. I wanted to create a space where the circuits felt like a cohesive collection. They should look good, like posters, but also useful for real use. They should show what's coming up, where things are, and what's happening right now.

Goals

Make circuit layouts feel premium and consistent across the whole season

Enable fast exploration: search, filter, favorites, quick navigation

Provide meaningful season context: next race, timeline, standings, weather

Support sharing and making: SVG/PNG export and batch download

Keep UX smooth at scale: large grid performance and responsive layout

Users and use cases

Fans who want a satisfying way to browse circuits like a gallery

Creators who want poster exports (SVG/PNG) for wallpapers, prints, sharing

Curious explorers who want map-based discovery and "what's next"

UX decisions (key choices and rationale)

1) Two exploration modes: Grid + Map

Grid supports "poster browsing" (fast scanning, collecting, favoriting).

Map supports geographic curiosity: "Where are the races?"

This intentionally serves two mindsets: visual collecting vs spatial exploration.

2) Fullscreen detail modal (not a page jump)

A circuit opens into a fullscreen modal so the user stays anchored in the collection, while still getting an immersive view with left/right navigation, swipe, and arrow keys.

3) "Next race" as a first-class UI concept

The app detects the upcoming race and threads it through the UX:

Highlighted card and timeline emphasis

Countdown and weather

Quick-jump affordances

This reduces "what do I click?" friction and adds season relevance.

4) Power features without UI clutter

I kept the interface minimal but made speed available:

Ctrl/Cmd+K to focus search

Keyboard navigation and shortcuts help ("?")

Context menu actions (open/compare/export/copy SVG)

5) Lightweight progress motivation

Tracking viewed circuits adds a subtle completion loop for exploration without forcing gamification.

Design decisions (visual system)

Poster-first aesthetic

Dark, restrained UI so the track artwork is always the hero - less chrome, more "collector poster."

SVG craft for "premium linework"

Each circuit uses layered strokes (glow → core → highlight) and optional ripple/echo effects to create depth while preserving clarity at any scale.

Consistent UI tokens

Whole-pixel typography and shared button components keep the experience crisp and cohesive across lots of controls, states, and layouts.

Theme system as a feature

43+ built-in themes plus a custom theme builder lets users make the collection feel personal (not just "skin-deep" styling).

Feature set

Core features

49 circuits (2026 season and classic/historic set) with metadata

Card formats: portrait/square/landscape + A3/phone/desktop

Search + filters (country chips, favorites, and logic)

Detail modal with navigation and sharing/export entry points

Export: PNG (2x), full SVG, minimal SVG, copy SVG, batch Zip

Season context: timeline, next race, countdown, weather, and standings

Persistence: favorites, viewed, preferences, themes via localStorage

PWA + offline caching via service worker strategy

Nice features

3D flip “trading card” back with stats

Compare mode (side-by-side stats)

Slideshow mode (fullscreen playback)

Mobile shake-to-shuffle and shuffle cascade animation

Easter eggs (Konami, Matrix/DRS/Rain, Lights Out sequence, for example)

Technical decisions that protect UX

IntersectionObserver lazy rendering (LazyCard) to keep the grid smooth and responsive

150ms debounced search for responsive filtering

URL state sharing (theme/format/search/track) for deep links without heavy routing

Service worker caching tiers for fast repeat loads and offline resilience

What this project shows

End-to-end UX thinking: browse → discover → focus → export/share

Strong design systems: themes, formats, consistent components

Craft + polish: SVG rendering quality, motion details, keyboard UX

Performance awareness: smooth interaction at collection scale

The site is current and can be updated or modified with additional functions and features.

Scroll down this page to explore webpage Showcase. You can click on the thumbnail to open the Gallery mode view.

Core tools and overall SPA approach

Circuit Collection is a poster gallery for Formula One circuits (season and classics). Each circuit is represented by a manually traced SVG track path plus metadata (stats, colors, layout), rendered into a consistent poster template with many themes and formats.

Key capabilities

Browse circuits with search, filters, country chips, and favorites

Detail modal for full poster view + fast navigation (keys/swipe)

Flip cards to a stats “trading card” back side

Compare two circuits side-by-side

Fullscreen slideshow mode

Globe map view (interactive SVG orthographic projection)

Export posters as PNG/SVG, or batch export a Zip

Share state via URL query params

Works offline as a PWA with update banners

Tech stack

Core

React 18+ (functional components, hooks)

TypeScript (strict)

Tailwind CSS v4

Vite (build tool)

Animation

Motion (Framer Motion successor) via motion/react

CSS @keyframes for lightweight effects (draw-on strokes, pulsing dots, subtle glows)

UI libraries

Lucide React (icons)

Radix UI (primitives: collapsible, calendar, etc.)

Sonner (toast notifications)

Export

html-to-image ( toPng ) for PNG export

JSZip for batch export archives

FileSaver.js to trigger downloads

Data sources

Jolpica F1 API (Ergast successor) for live standings

Open-Meteo API for weather (no key required)

Natural Earth 110m land boundaries (TopoJSON via CDN) for the globe map

Fonts

Inter (body, 300/400/500)

Titillium Web (headings/labels/captions, 300/400/500/700)

Data model

Circuits dataset: 49 total (24 season / 25 classic-historic)

Each circuit includes: manually traced SVG path, viewBox, accent color

Optional start position metadata

Stats + location fields (laps, length, lap record, first GP, turns, direction, country/city)

Rendering and theming

Posters are layered SVG strokes (glow/core/highlight), with “draw-on” animation

Start/finish marker + pulse effects; hover scale/glow interactions

43+ themes (including team-inspired palettes)

Theme controls: background gradient + optional patterns (dots/grid/cross/scanlines/tiles/none)

Text/accent colors (per-track or fixed), stroke styles, optional echo/ripple layers

Optional “flag fill” mode

Theme Builder for custom themes + persistence

Formats: portrait/square/landscape/A3/phone/desktop + grid density modes

Core UI flows

Search across track name, country, city, and IDs; shortcut: Ctrl/Cmd + K

Country “flag chips” for quick filtering; favorites stored persistently

Detail modal: navigate (buttons/keyboard/swipe), export/share/compare/add-to-calendar (ICS)

3D flip between poster front and stats back; mobile long-press support

Compare mode: two circuits + stats table, swap actions

Slideshow: fullscreen auto-advance, timing controls, keyboard shortcuts

Map view: orthographic SVG globe (no WebGL), dots plotted via lat/lng

Season features (live)

Next race detection → highlights circuit + countdown + timeline emphasis

Weather via Open-Meteo with caching + manual refresh controls

Standings via Jolpica API with cache indicators + fallback handling

Export and sharing

PNG export: DOM-to-image via html-to-image at 2× scale

SVG export: “full” vs “minimal”, plus copy-to-clipboard

Batch export: zip of visible posters (2× PNG) with progress UI + cancel

URL state: sync track/theme/format/search/filter/favorites into query params for deep links

State, performance, accessibility, and PWA

Centralized state via useGalleryState custom hook (no external store)

localStorage: preferences, favorites/viewed, weather cache, custom themes

Performance: IntersectionObserver lazy rendering (LazyCard), memoization, debounced search, batched animations

Accessibility: skip link, semantic structure, keyboard navigation + focus management, print stylesheet

PWA: service worker app-shell + API/image caching, offline + update banners

Extras: optional easter eggs (Konami triggers, special visual modes, shake-to-shuffle) without blocking core UX