← All Experiments

Flight Tracker

v1 Opus 4.6 Fully Autonomous

Purpose

A FlightRadar24-meets-NASA Mission Control dark-mode flight tracking dashboard with a CSS-only world map built from clip-path continent outlines, animated flight paths, split-flap departure board typography, and detailed flight info panels with conic-gradient instrument gauges. Fills a gap — zero transportation, travel, or spatial visualization experiments existed in the portfolio. Demonstrates that complex spatial/geographic interfaces can be achieved with pure CSS.

Prompt

This version was generated autonomously. The prompt shown is a summary of the agent's intent, not a verbatim human prompt.

The originating user prompt was:

"Evaluate the project and recommend the next major app to add. It should be as substantial as the CRM. We want to build out a team of agents for this approach. Use an world class product manager to do the research and synthesis and the potential app options. Make a decision and then orchestrate the work and manage the work with a team of experts. In this case, we do not need an architect because this is purely html/css, but we do need the worlds best designer AND a UX fanatatic. Use this team to build at least 3 separate new apps and orchestrate their own sub-agents as necessary."

A PM research agent analyzed all 19 existing experiments and identified transportation/spatial visualization as a completely unrepresented domain. The Flight Tracker was selected as one of three new experiments, pushing CSS-only design into cartographic territory with clip-path continent maps and offset-path flight animations.

Agent Trace

Lead → PM → Designer → UX Fanatic → Sidebar

Lead Opus 4.6

Orchestrated full workflow, planned 3-app build, delegated to specialized agents

↓

PM / Researcher Opus 4.6

Analyzed all 19 experiments, identified domain gaps, recommended 3 new apps (Analytics Observatory, Design System Playground, Flight Tracker)

↓

Designer Opus 4.6

Built complete flight tracker HTML/CSS (1,674 lines). Created dual-panel layout with CSS-only world map (clip-path continents, glowing airport dots), 6 selectable flights with detail panels, departure board with monospace FIDS aesthetic, conic-gradient instrument gauges for altitude/speed/heading.

↓

UX Fanatic Opus 4.6

Enhanced interactions: airport dot pulse animations, flight path glow shimmer, departure board row hover polish, detail panel opacity/transform transitions, delayed badge flash animation, gauge ring refinements, timeline step styling, weather card treatment, custom scrollbars, mobile preview rules. File grew to 1,835 lines.

↓

Sidebar Sonnet 4.5

Documented metadata, prompts, and agent trace

Versions

v1 Initial — Dark-mode flight dashboard with CSS map, departure board, and instrument gauges Opus

✈

✈

✈

✈

JFK

LAX

SFO

ORD

LHR

CDG

FRA

NRT

DXB

SYD

Active Flights

342 live

Coverage

98.2%

Flight Paths

United Airlines

British Airways

Air France

Emirates

On Time Boarding Delayed Departed

✈ Departures 10 flights

Flight Route Time Gate Status

UA 491 SFO → JFK 14:30 B22 Boarding BA 178 LHR → LAX 15:15 A08 On Time AF 065 CDG → NRT 16:00 C14 Delayed EK 215 DXB → SYD 16:45 D31 On Time LH 401 FRA → ORD 17:20 B15 On Time UA 837 ORD → LHR 17:55 C07 Departed BA 283 LHR → SFO 18:10 A12 Scheduled EK 001 DXB → LHR 18:30 D05 Boarding AF 011 CDG → JFK 19:00 C22 Delayed UA 100 JFK → LHR 19:45 B30 On Time

SFO San Francisco

✈

ETA 4h 52m

JFK New York

Aircraft Boeing 757-300

Airline United Airlines

Distance 2,586 mi

Duration 5h 30m

35K

ft Altitude

487

kts Speed

082

deg Heading

☀️

72°F

JFK Temp

☁️

Clear

Conditions

🌬️

8 NW

Wind (mph)

✓

Board

●

Doors

Push

Taxi

T/O

Cruise

Desc

Land

LHR London

Departs 15:15

LAX Los Angeles

AircraftAirbus A380-800

AirlineBritish Airways

Distance5,456 mi

Duration10h 45m

---

ftAltitude

---

ktsSpeed

---

degHeading

☀️

81°F

LAX Temp

⛅

Haze

Conditions

🌬️

5 SW

Wind (mph)

Board

Doors

Push

Taxi

T/O

Cruise

Desc

Land

CDGParis

Delayed +45m

NRTTokyo

AircraftBoeing 787-9

AirlineAir France

Distance6,028 mi

Duration11h 55m

---

ftAltitude

---

ktsSpeed

+45

minDelay

🌦️

68°F

NRT Temp

🌧️

Rain

Conditions

🌬️

15 E

Wind (mph)

Board

Doors

Push

Taxi

T/O

Cruise

Desc

Land

DXBDubai

✈

ETA 7h 12m

SYDSydney

AircraftAirbus A380-800

AirlineEmirates

Distance7,480 mi

Duration13h 35m

39K

ftAltitude

512

ktsSpeed

148

degHeading

☀️

64°F

SYD Temp

⛅

Cloudy

Conditions

🌬️

12 SE

Wind (mph)

✓

Board

✓

Doors

✓

Push

✓

T/O

●

Cruise

Desc

Land

Gate

FRAFrankfurt

Departs 17:20

ORDChicago

AircraftAirbus A340-600

AirlineLufthansa

Distance4,347 mi

Duration9h 40m

---

ftAltitude

---

ktsSpeed

---

degHeading

🌦️

38°F

ORD Temp

☁️

Overcast

Conditions

🌬️

18 NW

Wind (mph)

Board

Doors

Push

Taxi

T/O

Cruise

Desc

Land

ORDChicago

✈

ETA 2h 18m

LHRLondon

AircraftBoeing 787-10

AirlineUnited Airlines

Distance3,941 mi

Duration8h 05m

37K

ftAltitude

498

ktsSpeed

047

degHeading

🌧️

52°F

LHR Temp

🌧️

Drizzle

Conditions

🌬️

11 W

Wind (mph)

✓

Board

✓

Doors

✓

Push

✓

T/O

●

Cruise

Desc

Land

Gate