What was broken
On a busy Saturday or NFL Sunday, following several games closely means switching between broadcasts, tabs, and scoreboards. A scoreboard says who leads. It does not say where the ball is, how the drive got there, or which game deserves attention next.
Product decision
Make the field the interface. Give every game its own 3D field with the reported ball spot, possession, line of scrimmage and line to gain, and let the slate, four games in focus and a single game page share one live state. Draw only what a source reported: when a spot, a line or a chance is missing, say so instead of filling it in.
Flow
- 01SlateEvery game at once
Live games first, with Watch next naming why a game deserves attention.
- 02FieldEvery drive, spatially
The ball moves between reported spots, never along an invented route.
- 03MomentKnow when it matters
Touchdowns, turnovers and red-zone trips, announced once and corrected honestly.
What it does
- A slate of every live NFL and college game, live first, with notable situations and a Watch next strip that names its reasons
- Focus on one, two or four games, or a wall of 4, 9 or 16, with a Director that follows the most important live situation and says why
- A game page with a 3D field and three cameras, drive replay, game flow, play-by-play, leaders and team stats
- ESPN win probability, DraftKings lines, and Kalshi prices beside every game that has them, each named by its source
- Team pages, plus watch parties that follow the host’s view and push alerts for favorite teams on the full server build
- A replay lab of captured real games for when nothing is live, labeled on every screen, on the full server build
Reported, never guessed
- Spots come from the provider
The field-position label first, then the yard line, then the distance to the end zone. With none, the field says Ball spot unavailable.
- Clocks are never counted down
A clock shows what the provider last reported, not a local timer.
- Chances are never calculated
Win probability is ESPN’s model, lines are the sportsbook ESPN reports, prices are Kalshi’s, and each is named.
- Replays say so
Captured games are labeled on every screen, and deliberately edited test scenarios say Synthetic.
Routes, formations and tackle locations are not reported, so Gridiron never draws them. The ball sits on the center line because no live provider reports where it is across the field.
Reading the field
- Away defends the left
The real stadium direction is not reported, so each field says which end each team defends.
- Blue and amber
Blue marks the line of scrimmage and amber the line to gain. On goal to go, the goal line lights instead.
- Shapes from the play type
Runs sweep and passes arc, kicks fly high, incompletions go out and come back, and sacks drop back.
- Rulebook markings
Hash marks, numbers, the try line, goal posts and pylons follow the 2026 NFL and NCAA rulebooks.
- Sized to the venue
The stands are built from the real capacity where one is published, 366 grounds of them, and a venue reported as indoors is given a roof over the stands.
Odds and win probability
- Win probability
ESPN’s model after each reported play, and its matchup predictor before kickoff.
- Sportsbook lines
Spread, moneyline and total with their opening lines, and after a game, how the result compared with the closing lines.
- Kalshi prices
Each team’s contract to win from Kalshi’s public market data, with no account or key, drawn beside ESPN’s model in game flow.
Shown for information only, not as betting advice.
How it stays live
- One server polls the provider for everyone and streams changes to each browser as small deltas, with a full resync when one cannot apply
- A game you have open refreshes every 12 seconds and a game on screen every 25, inside one shared request budget
- A spoiler delay holds scores, fields, odds and alerts on one timeline, so nothing leaks early
- A provider failure shows as delayed or unavailable with its reason, and is never replaced with other data
Built to be watched
- One canvas
A single WebGL canvas draws every field, and renders only when something changes.
- 2D when it has to
Reduced effects, a 2D mode of SVG fields with no WebGL at all, and reduced motion respected.
- Accessible
Every field has a text summary, and an axe audit of WCAG 2.1 A and AA runs in the end-to-end suite.
- Tested
669 unit and integration tests and 144 end-to-end journeys in Chrome, 8 of them repeated in Firefox and WebKit, at version 0.6.0, run against captured real games.
What it does not claim
- Not official real-time tracking: the provider has its own delay, and a clock shows what was last reported
- College play-by-play is often incomplete; those games say Score-only coverage and carry no win probability
- The sportsbook reports an opening line and a latest one and nothing between, so a past play shows opening and closing lines rather than letting a closing line read as the line at that moment
- Odds and prices are information, not betting advice
Why I built it
- Following several games at once meant switching between broadcasts, tabs, and scoreboards
- I wanted to understand the whole slate in seconds, see which games deserve attention, and follow drives spatially
- It had to be useful while watching, at a desk, or keeping up without a broadcast at all
How it was built
- I wrote the brief: the problem, the experience, the visual system, and the rule that nothing on screen is invented
- Implemented and iterated with Claude Code, release by release from 0.1 to 0.6.0; product direction and quality judgment are mine
- React 19, Vite and React Three Fiber on the client; a Node server with a shared polling engine and server-sent events
- Deployed on Vercel as a bounded version that polls instead of streaming, and leaves out the replay lab, watch parties and push alerts, which need the persistent server
Role & tags
Product, design, and build. Wrote the brief, set the rule that nothing on screen is invented, and shipped the live product.
- Live data
- 3D fields
- Reported spots only
- Named sources
Impact
A live product: a 3D field for every game, Focus, the wall, and the Director, a game page with drive replay and game flow, ESPN win probability, DraftKings lines, and Kalshi prices, and team pages. The full server build adds the replay lab, watch parties, and push alerts, which the Vercel deployment leaves out. Shipped as a working product, not a pitch deck.
Try the live product
Gridiron runs live on Vercel, below. When no game is on it says so, with the next kickoffs and recent finals. The replay lab is in the full server build and not in this deployment, so what you see is whatever the provider is reporting now.
1-9 beats · j / k · ← → adjacent · y link · b brief