Soccer Territory Flow

Preview in your theme

status="ready", baseline="goal-line" (default) — 96 tracked minutes of a 2–1 win. Press play and watch the band tip: Northgate own the first half hour and score on 27, Riverside equalise on 41, and after the red card on 63 the band never comes back down. Step with ‹ ›, drag the range, or Tab into the event row and hit Enter to jump the playhead to a goal.

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Northgate United · Sat 14 Mar 2026 · 15:00 kick-off

1'First half · field tilt 73% Northgate United

Field tilt lane: bars above the centre line are Riverside AFC, below are Northgate United— each team's share of that minute's final-third touches.

Final third22%(Riverside AFC attacking)
Middle third36%(between the lines)
Own third42%(Riverside AFC defending)

1/96

Riverside AFC versus Northgate United, territory minute by minute: at 1' 22% of play was in Riverside AFC's final third, 36% in the middle third and 42% in their own third, field tilt 73% to Northgate United over the 1 minute played, out of 96 sampled minutes.
Clock	Half	Final third	Middle third	Own third	Field tilt	Event
1'	first half	22%	36%	42%	27%	—
2'	first half	25%	33%	42%	32%	—
3'	first half	22%	34%	44%	32%	—
4'	first half	22%	34%	44%	27%	—
5'	first half	21%	37%	42%	31%	—
6'	first half	27%	32%	42%	31%	—
7'	first half	23%	35%	42%	30%	—
8'	first half	25%	35%	40%	35%	—
9'	first half	26%	32%	42%	30%	—
10'	first half	26%	35%	39%	38%	—
11'	first half	25%	36%	38%	39%	—
12'	first half	26%	35%	39%	32%	—
13'	first half	24%	35%	41%	40%	—
14'	first half	25%	33%	43%	34%	—
15'	first half	26%	32%	42%	33%	—
16'	first half	27%	31%	42%	37%	—
17'	first half	24%	34%	42%	34%	—
18'	first half	25%	35%	39%	30%	—
19'	first half	25%	35%	40%	38%	—
20'	first half	23%	32%	45%	38%	—
21'	first half	22%	35%	43%	28%	—
22'	first half	25%	33%	42%	37%	—
23'	first half	24%	33%	43%	32%	—
24'	first half	25%	33%	42%	30%	—
25'	first half	23%	35%	43%	32%	—
26'	first half	24%	34%	42%	27%	—
27'	first half	24%	34%	42%	34%	Goal, Northgate United: R. Vasquez
28'	first half	25%	34%	41%	35%	—
29'	first half	25%	33%	41%	39%	—
30'	first half	28%	32%	40%	38%	—
31'	first half	29%	36%	35%	48%	—
32'	first half	30%	33%	38%	50%	—
33'	first half	35%	33%	33%	45%	—
34'	first half	32%	33%	35%	53%	—
35'	first half	36%	34%	30%	54%	—
36'	first half	38%	33%	29%	60%	—
37'	first half	36%	36%	29%	62%	—
38'	first half	41%	31%	29%	59%	—
39'	first half	39%	37%	24%	68%	—
40'	first half	41%	33%	26%	72%	—
41'	first half	41%	36%	23%	66%	Goal, Riverside AFC: A. Mensah
42'	first half	45%	34%	21%	70%	—
43'	first half	42%	33%	25%	64%	—
44'	first half	41%	33%	26%	69%	—
45'	first half	39%	35%	26%	68%	—
45+1'	first half	36%	35%	29%	60%	—
45+2'	first half	38%	36%	26%	60%	—
46'	second half	34%	32%	35%	51%	—
47'	second half	33%	32%	35%	46%	—
48'	second half	31%	37%	32%	50%	—
49'	second half	36%	33%	32%	49%	—
50'	second half	32%	34%	34%	45%	—
51'	second half	31%	34%	35%	49%	—
52'	second half	33%	31%	36%	49%	—
53'	second half	31%	32%	37%	50%	—
54'	second half	29%	33%	37%	51%	—
55'	second half	31%	36%	33%	50%	—
56'	second half	31%	33%	36%	46%	—
57'	second half	29%	34%	37%	47%	—
58'	second half	31%	36%	32%	50%	Substitution, Riverside AFC: D. Sorensen on
59'	second half	30%	33%	36%	44%	—
60'	second half	35%	33%	32%	50%	—
61'	second half	31%	35%	34%	51%	—
62'	second half	34%	34%	32%	47%	—
63'	second half	33%	36%	31%	51%	Red card, Northgate United: T. Okafor
64'	second half	38%	31%	32%	57%	—
65'	second half	38%	33%	29%	58%	—
66'	second half	38%	33%	29%	59%	—
67'	second half	39%	36%	24%	62%	—
68'	second half	42%	33%	25%	73%	—
69'	second half	45%	33%	22%	73%	—
70'	second half	42%	33%	25%	77%	—
71'	second half	42%	35%	23%	69%	—
72'	second half	44%	34%	22%	73%	—
73'	second half	46%	32%	22%	71%	—
74'	second half	45%	35%	20%	78%	Goal, Riverside AFC: J. Brandt
75'	second half	45%	36%	19%	76%	—
76'	second half	45%	35%	20%	77%	—
77'	second half	49%	34%	18%	76%	—
78'	second half	46%	34%	20%	74%	—
79'	second half	45%	33%	21%	83%	—
80'	second half	47%	35%	19%	75%	—
81'	second half	46%	33%	21%	74%	—
82'	second half	45%	35%	20%	75%	—
83'	second half	45%	35%	21%	76%	—
84'	second half	46%	36%	18%	73%	—
85'	second half	46%	33%	21%	75%	—
86'	second half	45%	32%	22%	76%	—
87'	second half	44%	37%	19%	76%	—
88'	second half	43%	37%	20%	79%	—
89'	second half	46%	33%	21%	76%	—
90'	second half	47%	33%	20%	74%	—
90+1'	second half	45%	36%	19%	76%	—
90+2'	second half	46%	33%	21%	78%	—
90+3'	second half	49%	34%	17%	82%	—
90+4'	second half	49%	34%	17%	82%	—

status="empty" — the fixture is known, no minute has been tracked yet

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Northgate United · Sat 14 Mar 2026 · 15:00 kick-off

No territory tracking yet

Once minutes are sampled, the band shows which third the ball spent each one in — and the transport replays them.

status="loading" — the skeleton holds the band, the lane and the transport

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Northgate United · Sat 14 Mar 2026 · 15:00 kick-off

status="error" + onRetry — the retry button only renders when onRetry is passed

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Northgate United · Sat 14 Mar 2026 · 15:00 kick-off

Couldn't load this match

The tracking feed didn't respond.

baseline="halfway" with defaultFrame at full time — same 96 minutes, but the middle third is centred on the halfway line, so the band floats instead of filling the box. The drift itself is the reading: Riverside sink for half an hour, then ride high from the sending off onwards. Uncontrolled, so the transport owns the playhead; press replay to run it from kick-off.

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Northgate United · Sat 14 Mar 2026 · 15:00 kick-off

90+4'Second half · field tilt 54% Riverside AFC

Field tilt lane: bars above the centre line are Riverside AFC, below are Northgate United— each team's share of that minute's final-third touches.

Final third49%(Riverside AFC attacking)
Middle third34%(between the lines)
Own third17%(Riverside AFC defending)

96/96

Riverside AFC versus Northgate United, territory minute by minute: at 90+4' 49% of play was in Riverside AFC's final third, 34% in the middle third and 17% in their own third, field tilt 54% to Riverside AFC over the 96 minutes played, out of 96 sampled minutes.
Clock	Half	Final third	Middle third	Own third	Field tilt	Event
1'	first half	22%	36%	42%	27%	—
2'	first half	25%	33%	42%	32%	—
3'	first half	22%	34%	44%	32%	—
4'	first half	22%	34%	44%	27%	—
5'	first half	21%	37%	42%	31%	—
6'	first half	27%	32%	42%	31%	—
7'	first half	23%	35%	42%	30%	—
8'	first half	25%	35%	40%	35%	—
9'	first half	26%	32%	42%	30%	—
10'	first half	26%	35%	39%	38%	—
11'	first half	25%	36%	38%	39%	—
12'	first half	26%	35%	39%	32%	—
13'	first half	24%	35%	41%	40%	—
14'	first half	25%	33%	43%	34%	—
15'	first half	26%	32%	42%	33%	—
16'	first half	27%	31%	42%	37%	—
17'	first half	24%	34%	42%	34%	—
18'	first half	25%	35%	39%	30%	—
19'	first half	25%	35%	40%	38%	—
20'	first half	23%	32%	45%	38%	—
21'	first half	22%	35%	43%	28%	—
22'	first half	25%	33%	42%	37%	—
23'	first half	24%	33%	43%	32%	—
24'	first half	25%	33%	42%	30%	—
25'	first half	23%	35%	43%	32%	—
26'	first half	24%	34%	42%	27%	—
27'	first half	24%	34%	42%	34%	Goal, Northgate United: R. Vasquez
28'	first half	25%	34%	41%	35%	—
29'	first half	25%	33%	41%	39%	—
30'	first half	28%	32%	40%	38%	—
31'	first half	29%	36%	35%	48%	—
32'	first half	30%	33%	38%	50%	—
33'	first half	35%	33%	33%	45%	—
34'	first half	32%	33%	35%	53%	—
35'	first half	36%	34%	30%	54%	—
36'	first half	38%	33%	29%	60%	—
37'	first half	36%	36%	29%	62%	—
38'	first half	41%	31%	29%	59%	—
39'	first half	39%	37%	24%	68%	—
40'	first half	41%	33%	26%	72%	—
41'	first half	41%	36%	23%	66%	Goal, Riverside AFC: A. Mensah
42'	first half	45%	34%	21%	70%	—
43'	first half	42%	33%	25%	64%	—
44'	first half	41%	33%	26%	69%	—
45'	first half	39%	35%	26%	68%	—
45+1'	first half	36%	35%	29%	60%	—
45+2'	first half	38%	36%	26%	60%	—
46'	second half	34%	32%	35%	51%	—
47'	second half	33%	32%	35%	46%	—
48'	second half	31%	37%	32%	50%	—
49'	second half	36%	33%	32%	49%	—
50'	second half	32%	34%	34%	45%	—
51'	second half	31%	34%	35%	49%	—
52'	second half	33%	31%	36%	49%	—
53'	second half	31%	32%	37%	50%	—
54'	second half	29%	33%	37%	51%	—
55'	second half	31%	36%	33%	50%	—
56'	second half	31%	33%	36%	46%	—
57'	second half	29%	34%	37%	47%	—
58'	second half	31%	36%	32%	50%	Substitution, Riverside AFC: D. Sorensen on
59'	second half	30%	33%	36%	44%	—
60'	second half	35%	33%	32%	50%	—
61'	second half	31%	35%	34%	51%	—
62'	second half	34%	34%	32%	47%	—
63'	second half	33%	36%	31%	51%	Red card, Northgate United: T. Okafor
64'	second half	38%	31%	32%	57%	—
65'	second half	38%	33%	29%	58%	—
66'	second half	38%	33%	29%	59%	—
67'	second half	39%	36%	24%	62%	—
68'	second half	42%	33%	25%	73%	—
69'	second half	45%	33%	22%	73%	—
70'	second half	42%	33%	25%	77%	—
71'	second half	42%	35%	23%	69%	—
72'	second half	44%	34%	22%	73%	—
73'	second half	46%	32%	22%	71%	—
74'	second half	45%	35%	20%	78%	Goal, Riverside AFC: J. Brandt
75'	second half	45%	36%	19%	76%	—
76'	second half	45%	35%	20%	77%	—
77'	second half	49%	34%	18%	76%	—
78'	second half	46%	34%	20%	74%	—
79'	second half	45%	33%	21%	83%	—
80'	second half	47%	35%	19%	75%	—
81'	second half	46%	33%	21%	74%	—
82'	second half	45%	35%	20%	75%	—
83'	second half	45%	35%	21%	76%	—
84'	second half	46%	36%	18%	73%	—
85'	second half	46%	33%	21%	75%	—
86'	second half	45%	32%	22%	76%	—
87'	second half	44%	37%	19%	76%	—
88'	second half	43%	37%	20%	79%	—
89'	second half	46%	33%	21%	76%	—
90'	second half	47%	33%	20%	74%	—
90+1'	second half	45%	36%	19%	76%	—
90+2'	second half	46%	33%	21%	78%	—
90+3'	second half	49%	34%	17%	82%	—
90+4'	second half	49%	34%	17%	82%	—

Controlled playhead — frame / onFrameChange. It lands on the 63rd minute, the sending off, so the card renders mid-match every single time it is painted; the parent currently holds frame 64 of 96. The transport still drives it: every press, step and scrub leaves through onFrameChange and comes back as a prop.

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Northgate United · Sat 14 Mar 2026 · 15:00 kick-off

63'Second half · field tilt 55% Northgate UnitedRed card · T. Okafor

Field tilt lane: bars above the centre line are Riverside AFC, below are Northgate United— each team's share of that minute's final-third touches.

Final third33%(Riverside AFC attacking)
Middle third36%(between the lines)
Own third31%(Riverside AFC defending)

65/96

Riverside AFC versus Northgate United, territory minute by minute: at 63' 33% of play was in Riverside AFC's final third, 36% in the middle third and 31% in their own third, field tilt 55% to Northgate United over the 65 minutes played, out of 96 sampled minutes.
Clock	Half	Final third	Middle third	Own third	Field tilt	Event
1'	first half	22%	36%	42%	27%	—
2'	first half	25%	33%	42%	32%	—
3'	first half	22%	34%	44%	32%	—
4'	first half	22%	34%	44%	27%	—
5'	first half	21%	37%	42%	31%	—
6'	first half	27%	32%	42%	31%	—
7'	first half	23%	35%	42%	30%	—
8'	first half	25%	35%	40%	35%	—
9'	first half	26%	32%	42%	30%	—
10'	first half	26%	35%	39%	38%	—
11'	first half	25%	36%	38%	39%	—
12'	first half	26%	35%	39%	32%	—
13'	first half	24%	35%	41%	40%	—
14'	first half	25%	33%	43%	34%	—
15'	first half	26%	32%	42%	33%	—
16'	first half	27%	31%	42%	37%	—
17'	first half	24%	34%	42%	34%	—
18'	first half	25%	35%	39%	30%	—
19'	first half	25%	35%	40%	38%	—
20'	first half	23%	32%	45%	38%	—
21'	first half	22%	35%	43%	28%	—
22'	first half	25%	33%	42%	37%	—
23'	first half	24%	33%	43%	32%	—
24'	first half	25%	33%	42%	30%	—
25'	first half	23%	35%	43%	32%	—
26'	first half	24%	34%	42%	27%	—
27'	first half	24%	34%	42%	34%	Goal, Northgate United: R. Vasquez
28'	first half	25%	34%	41%	35%	—
29'	first half	25%	33%	41%	39%	—
30'	first half	28%	32%	40%	38%	—
31'	first half	29%	36%	35%	48%	—
32'	first half	30%	33%	38%	50%	—
33'	first half	35%	33%	33%	45%	—
34'	first half	32%	33%	35%	53%	—
35'	first half	36%	34%	30%	54%	—
36'	first half	38%	33%	29%	60%	—
37'	first half	36%	36%	29%	62%	—
38'	first half	41%	31%	29%	59%	—
39'	first half	39%	37%	24%	68%	—
40'	first half	41%	33%	26%	72%	—
41'	first half	41%	36%	23%	66%	Goal, Riverside AFC: A. Mensah
42'	first half	45%	34%	21%	70%	—
43'	first half	42%	33%	25%	64%	—
44'	first half	41%	33%	26%	69%	—
45'	first half	39%	35%	26%	68%	—
45+1'	first half	36%	35%	29%	60%	—
45+2'	first half	38%	36%	26%	60%	—
46'	second half	34%	32%	35%	51%	—
47'	second half	33%	32%	35%	46%	—
48'	second half	31%	37%	32%	50%	—
49'	second half	36%	33%	32%	49%	—
50'	second half	32%	34%	34%	45%	—
51'	second half	31%	34%	35%	49%	—
52'	second half	33%	31%	36%	49%	—
53'	second half	31%	32%	37%	50%	—
54'	second half	29%	33%	37%	51%	—
55'	second half	31%	36%	33%	50%	—
56'	second half	31%	33%	36%	46%	—
57'	second half	29%	34%	37%	47%	—
58'	second half	31%	36%	32%	50%	Substitution, Riverside AFC: D. Sorensen on
59'	second half	30%	33%	36%	44%	—
60'	second half	35%	33%	32%	50%	—
61'	second half	31%	35%	34%	51%	—
62'	second half	34%	34%	32%	47%	—
63'	second half	33%	36%	31%	51%	Red card, Northgate United: T. Okafor
64'	second half	38%	31%	32%	57%	—
65'	second half	38%	33%	29%	58%	—
66'	second half	38%	33%	29%	59%	—
67'	second half	39%	36%	24%	62%	—
68'	second half	42%	33%	25%	73%	—
69'	second half	45%	33%	22%	73%	—
70'	second half	42%	33%	25%	77%	—
71'	second half	42%	35%	23%	69%	—
72'	second half	44%	34%	22%	73%	—
73'	second half	46%	32%	22%	71%	—
74'	second half	45%	35%	20%	78%	Goal, Riverside AFC: J. Brandt
75'	second half	45%	36%	19%	76%	—
76'	second half	45%	35%	20%	77%	—
77'	second half	49%	34%	18%	76%	—
78'	second half	46%	34%	20%	74%	—
79'	second half	45%	33%	21%	83%	—
80'	second half	47%	35%	19%	75%	—
81'	second half	46%	33%	21%	74%	—
82'	second half	45%	35%	20%	75%	—
83'	second half	45%	35%	21%	76%	—
84'	second half	46%	36%	18%	73%	—
85'	second half	46%	33%	21%	75%	—
86'	second half	45%	32%	22%	76%	—
87'	second half	44%	37%	19%	76%	—
88'	second half	43%	37%	20%	79%	—
89'	second half	46%	33%	21%	76%	—
90'	second half	47%	33%	20%	74%	—
90+1'	second half	45%	36%	19%	76%	—
90+2'	second half	46%	33%	21%	78%	—
90+3'	second half	49%	34%	17%	82%	—
90+4'	second half	49%	34%	17%	82%	—

Degenerate feed — nine minutes of an abandoned tie, deliberately never validated: two minutes with nothing in them at all (the band breaks into runs rather than drawing through the gap), one with a negative share and a field tilt of 1.6 (clamped), one whose clock is NaN(numbered by position), a one-minute run at the end, and a scorer's name too long for the header. Everything that could not be drawn as given is counted in the note under the title.

Riverside AFC vs Harbour Town · abandoned, floodlight failure

Riverside AFC vs Harbour Town · Tue 17 Mar 2026 · abandoned at 9'

1'First half · field tilt 69% Harbour Town

2 minutes carry no tracking data — drawn as gaps in the band · 1 minute had out-of-range shares or field tilt — clamped, not dropped · 1 minute had no readable clock — numbered by position.

Field tilt lane: bars above the centre line are Riverside AFC, below are Harbour Town— each team's share of that minute's final-third touches.

Final third23%(Riverside AFC attacking)
Middle third34%(between the lines)
Own third43%(Riverside AFC defending)

1/9

Riverside AFC versus Harbour Town, territory minute by minute: at 1' 23% of play was in Riverside AFC's final third, 34% in the middle third and 43% in their own third, field tilt 69% to Harbour Town over the 1 minute played, out of 9 sampled minutes.
Clock	Half	Final third	Middle third	Own third	Field tilt	Event
1'	first half	23%	34%	43%	31%	—
2'	first half	27%	36%	37%	36%	—
3'	first half	28%	34%	37%	44%	—
4'	first half	not tracked	not tracked	not tracked	not reported	—
5'	first half	55%	45%	0%	100%	—
Minute 6	first half	34%	33%	33%	52%	—
7'	first half	52%	30%	18%	71%	Goal, Riverside AFC: M. Adeyemi-Okonkwo (deflected, awarded after review)
8'	first half	not tracked	not tracked	not tracked	not reported	—
9'	first half	48%	31%	21%	66%	—

Loading preview…

"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight, Pause, Play, RotateCcw } from "lucide-react"

import { cn } from "@/lib/utils"
import { useControllableState } from "@/registry/hooks/use-controllable-state"
import type {
  ChartSoccerTerritoryFlowData,
  ChartSoccerTerritoryFlowEvent,
  ChartSoccerTerritoryFlowMinute,
} from "./chart-soccer-territory-flow.contract"

/** How the three thirds are stacked. See `layoutTerritory`. */

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/chart-soccer-territory-flow.json

Prompt

Build a React + TypeScript + Tailwind "ChartSoccerTerritoryFlow" card with zod
and lucide-react (Play, Pause, RotateCcw, ChevronLeft, ChevronRight). No charting
library: the plot is hand-built SVG paths, because the subject is a MATCH BEING
REPLAYED — the band has to grow one minute at a time and break wherever the feed
stopped tracking, and a chart library will happily interpolate straight through
both.

Contract
- A zod schema is the single source of truth:
  { status: "loading" | "empty" | "error" | "ready";
    title: string; home: string; away: string; kickoff?: string;
    minutes: { minute: number; stoppage?: number; half: 1 | 2;
               own: number; middle: number; final: number;
               tilt?: number;
               event?: { kind: "goal" | "red-card" | "substitution";
                         team: "home" | "away"; label: string } }[] }
- own / middle / final are shares of that minute's ball time in each third FROM
  THE HOME TEAM'S POINT OF VIEW, normalised per minute by the component: 0-1,
  0-100 and raw touch counts all read the same, only the ratio is used.
- All three at zero is a TRACKING GAP, not a goalless minute. It is a different
  statement and it is drawn differently — as a break in the band.
- tilt is field tilt: the home team's share of that minute's final-third touches,
  0-1. Omit it and the momentum lane simply has nothing to draw for that minute.
- kickoff is printed VERBATIM and never parsed. A date parsed on the client
  renders in the reader's zone and in the server's on the server, which is a
  hydration mismatch on a card that must be byte-identical at every frame.
- Props = z.infer of the schema plus: baseline ("goal-line" | "halfway"), the
  playhead triple (frame / defaultFrame / onFrameChange), frameMs, onRetry,
  className, ref and the native div props.

Geometry, in exported pure functions beside the component
- Export one geometry table (view width/height, plot box, lane box) and make
  every function return numbers in that space, so a test can print exactly what
  the SVG draws.
- formatMatchClock(minute, stoppage) -> "67'", "45+2'", "90+4'", or null when the
  minute is unreadable. Never print "NaN'".
- normalizeShares(own, middle, final) -> shares that add to 1 plus a `clamped`
  flag; negative and non-finite values clamp to zero, all-zero returns null.
- layoutTerritory(minutes, baseline) -> per-minute columns (slot centre x, slot
  width, clock, band edges, tilt, lane bar, event) plus half-time break positions
  and three counters: untracked, clamped, unclocked. One minute owns one SLOT of
  width plotWidth / minutes.length and sits at its centre, so the first and last
  minute are as wide as any other.
- Baselines: "goal-line" stacks own -> middle -> final from unit 0 (home goal
  line) to unit 1, filling the box. "halfway" shifts every boundary by
  0.5 - (own + middle/2) so the middle third straddles the centre; that offset
  lives in +/-0.5, so open the drawing domain to [-0.5, 1.5] and NOTHING is ever
  clipped. The band then uses half the box, and the empty half is the room it
  drifts in — which is the point of that baseline.
- territoryBandPaths(columns, band, upTo) -> one `d` per contiguous run of
  tracked minutes, each run drawn from its first slot's left edge to its last
  slot's right edge so a single surviving minute is a visible column, not a
  zero-width polygon.
- fieldTiltThrough(columns, upTo) and territoryAxisTicks(count) for the running
  figure and the axis.

Behavior
- The playhead is DERIVED, never a wall clock: an index into `minutes`, clamped
  on read (`clamp(round(frame), 0, last)`), never stored clamped. A shorter feed
  or a caller passing 999 must not leave the card pointing past full time.
- Controlled and uncontrolled at once via a value/default/onChange triple —
  `frame`, `defaultFrame`, `onFrameChange` on one useControllableState-style
  hook. Under control the parent may decline a move; then the index does not
  change, the playback effect does not re-run and playback stops. That is what
  controlled means, and it should be a comment in the code.
- Transport is REAL UI: play/pause, previous minute, next minute, a native
  <input type="range"> scrubber (accent-primary, aria-valuetext = the match
  clock) and a "n/96" read-out. Never a gesture-only scrubber, and it starts
  PAUSED — an autoplay you cannot stop is the bug this avoids.
- Playback is one self-rescheduling setTimeout owned by one effect and cleared in
  that effect's cleanup, so no loop outlives the card. Reaching full time is
  DERIVED (`running = playing && canPlay && !atEnd`), never a setState inside an
  effect; at the end the play button becomes a replay button and says so.
- A visibilitychange listener pauses when the tab hides: a replay nobody is
  looking at is a timer burning battery to redraw pixels nobody will see.
- The band grows: paths are rebuilt for minutes 0..playhead, with the whole match
  behind it at ~22% opacity. A paused frame is therefore a finished picture, not
  a half-run animation — screenshot-stable and identical on the server.
- Event markers are a roving-tabindex toolbar of real HTML buttons positioned
  over the plot by percentage. A goal is a circle, a red card is a card-shaped
  rect, a substitution is a triangle — shape first, team colour second.
- Keyboard map: Tab reaches the marker strip as ONE stop, then Left/Right (and
  Up/Down) walk the markers, Home/End jump to the first and last, Enter or Space
  seeks the playhead to that minute. Tab again for the transport buttons, then
  the range, where the browser's own Left/Right, Home/End and PageUp/PageDown all
  scrub for free — which is most of why the scrubber is a native input.
- prefers-reduced-motion: the ONLY tween is the playhead's transform, gated with
  `motion-safe:`. With motion off the line jumps a minute at a time, the band
  still grows, every figure is still correct, and nothing needs an in-flight
  animation to become readable.
- Never the native `disabled` attribute on a focusable control: the step buttons
  use aria-disabled plus a handler guard, because a browser blurs a node it
  disables and the caret would land on <body> the moment the match ran out under
  the reader's finger.
- Degenerate data must not break the geometry, and nothing is dropped quietly:
  untracked minutes break the band into runs, out-of-range shares and tilts are
  clamped, unreadable clocks fall back to "Minute n" — and all three are counted
  in a visible note under the title ("2 minutes carry no tracking data — drawn as
  gaps in the band"). Long names elide with a title attribute, never overflow.

Rendering & styling
- Semantic tokens only: bg-card panel, var(--chart-1) for the home team's final
  third, var(--chart-2) for their own third, muted-foreground for the middle
  third, fill-muted/40 for the plot box, stroke-border for reference lines,
  foreground for the playhead and the half-time divider. No hex, no rgb().
- Colour is never the only channel: the own third is drawn with a diagonal SVG
  <pattern> (stripes in the card colour) while the final third is solid, every
  band is directly labelled with its live percentage in the legend, and the
  momentum lane encodes the team as DIRECTION (above the centre line = home,
  below = away) as well as hue.
- Axis labels are HTML positioned by percentage over the same box, not SVG text:
  a viewBox that scales to the card would scale the type with it and a 9px tick
  is unreadable. Edge labels shift so they stay inside the card.
- Accessibility: the plot is one role="img" with a one-sentence aria-label; the
  transport announces through a polite live region that carries the full frame
  sentence when paused, stepped or seeked and a single constant "Replay running."
  while playing, so it never talks over the match; every minute, share, tilt and
  event is repeated in an sr-only table whose WRAPPER is a div (a bare sr-only
  table keeps auto layout, ignores width:1px and drags the page sideways).
- cn() merges className, forwardRef passes the ref through and the rest of the
  native div props spread onto the card.

Customization levers
- Baseline: "goal-line" for boundary reading, "halfway" for drift reading. The
  domain table is two lines — add a third baseline (e.g. clamp the drift to
  +/-0.25 for a tighter river) by adding one entry and one offset expression.
- Pace: frameMs is one match minute in wall-clock ms, clamped 60-4000. Drop it to
  90ms for a flick-through, raise it to 800ms for a presentation.
- Sampling: nothing assumes 90 minutes. Feed five-minute buckets, a 120-minute
  match with extra time, or one row per phase of play — the slot width divides
  the plot by whatever it is given.
- Bands: the three-band stack is a Record keyed by band name; swap the middle
  third's paint for a fourth chart token if you want three team-coloured zones,
  but keep one channel that is not colour.
- Momentum lane: laneHeight 0 removes it; swap fieldTiltThrough for a rolling
  window (last 5 minutes) if you want momentum rather than a match-to-date mean.
- Events: the kind union drives the glyph switch — add "yellow-card",
  "penalty-award" or "VAR review" as one more case plus one more label.
- Transport: to autoplay a hero card, fire the play state from an intersection
  observer — and keep the pause button, because auto-updating content needs a
  stop.

Concepts

Derived playhead — the card never reads a wall clock. It takes an instant (a frame index), clamps it on read and rebuilds the picture from it, so the same index always renders the same bytes: safe to server-render, safe to screenshot, and safe to hand a value from a URL or a scroll position.
Grow, don’t reveal — the band is rebuilt for minutes zero through the playhead rather than being unmasked, and the rest of the match sits behind it, ghosted. A paused frame is a finished drawing instead of a stalled animation, which is what makes “pause and read it” an honest instruction.
Tracking gap is not zero — a minute with nothing in it breaks the band into a new run instead of joining two tracked minutes with a straight line. Interpolating across missing data invents territory nobody recorded, and the counted note under the title names the price out loud.
Two baselines, one contract — stacking from the goal line fills the box and asks you to read two moving boundaries; centring the middle third on the halfway line lets the whole band float, and the drift becomes the shape. Same data, same DOM, one offset term.
Field tilt as direction — the momentum lane encodes which team is winning the final-third exchange as which side of the centre line the bar leaves from, not only as hue. Direction survives greyscale, a colour-blind reader and a projector.
Events as chapters — goals, red cards and substitutions are focusable buttons in a roving-tabindex strip, and activating one seeks the playhead. That turns “what changed the game?” into a single keypress instead of a hunt along a scrubber.

Soccer Territory Flow

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Harbour Town · abandoned, floodlight failure

Installation

Prompt

Concepts

On This Page

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC 2 – 1 Northgate United · Matchday 29

Riverside AFC vs Harbour Town · abandoned, floodlight failure