Soccer Shot Quality

Preview in your theme

status="ready" at kick-off — 14 shots worth 2.58 xG, two of them taken. Press play and they land in match order; the minute chips are the scrub, so ← → walk the match a shot at a time.

Shot quality

Brentwood FC · vs Ashford United · Matchday 12, 18 Apr 2026, 19:45

Shot 0 of 14

0.00xG from 0 shots · 0 goals · 0 on target · 0.00 xG per shot

Kick-off — press play to replay all 14 shots in match order, or step through them a minute at a time.

0'kick-off

goal (0)
saved (0)
blocked (0)
off target (0)
mark area = xG

Brentwood FC attacking-half shot map, kick-off: 0 of 14 shots on the pitch, 0 goals from 0.00 expected goals — each mark sits where the shot was struck, its area grows with xG, and its shape gives the outcome.

Every attempt in match order, with its clock, shooter, outcome, expected goals and position on the attacking half. Full match: 14 shots, 2 goals, 2.58 expected goals.
Shot	Clock	Player	Outcome	xG	Position	At this instant
1	minute 4, first half	T. Fenwick	blocked	0.04	31 m across, 17.8 m out from the goal line	still to come
2	minute 11, first half	J. Baptiste	off target	0.07	37.8 m across, 11.6 m out from the goal line	still to come
3	minute 19, first half	D. Marchetti	saved	0.24	35.2 m across, 6.6 m out from the goal line	still to come
4	minute 23, first half	K. Sørensen	off target	0.01	25.4 m across, 39.1 m out from the goal line	still to come
5	minute 31, first half	R. Ilić	goal	0.44	33.8 m across, 3.9 m out from the goal line	still to come
6	minute 38, first half	A. Okonjo	blocked	0.05	41.1 m across, 14.3 m out from the goal line	still to come
7	minute 45 plus 2, first half	J. Baptiste	saved	0.16	29.9 m across, 8.7 m out from the goal line	still to come
8	minute 52, second half	R. Ilić	goal	0.79	34 m across, 11 m out from the goal line	still to come
9	minute 58, second half	J. Baptiste	off target	0.06	22.1 m across, 15.3 m out from the goal line	still to come
10	minute 64, second half	T. Fenwick	saved	0.18	36.4 m across, 8.8 m out from the goal line	still to come
11	minute 71, second half	A. Okonjo	saved	0.05	34.2 m across, 19.6 m out from the goal line	still to come
12	minute 78, second half	D. Marchetti	blocked	0.09	43.1 m across, 9.6 m out from the goal line	still to come
13	minute 85, second half	D. Marchetti	off target	0.29	32 m across, 6.1 m out from the goal line	still to come
14	minute 90 plus 3, second half	K. Sørensen	saved	0.11	28.8 m across, 12.5 m out from the goal line	still to come

Controlled and paused at half-time — the parent holds frame=7 and the card only ever asks, through onFrameChange. A paused frame renders identically on every load, so this card screenshots the same way twice.

Shot quality

Brentwood FC · vs Ashford United · Matchday 12, 18 Apr 2026, 19:45

Shot 7 of 14

1.01xG from 7 shots · 1 goal · 3 on target · 0.14 xG per shot

45+2'J. Baptistesaved0.16 xG

header from a corner

45+2'first half

goal (1)
saved (2)
blocked (2)
off target (2)
mark area = xG

Brentwood FC attacking-half shot map, minute 45 plus 2: 7 of 14 shots on the pitch, 1 goal from 1.01 expected goals — each mark sits where the shot was struck, its area grows with xG, and its shape gives the outcome.

Every attempt in match order, with its clock, shooter, outcome, expected goals and position on the attacking half. Full match: 14 shots, 2 goals, 2.58 expected goals.
Shot	Clock	Player	Outcome	xG	Position	At this instant
1	minute 4, first half	T. Fenwick	blocked	0.04	31 m across, 17.8 m out from the goal line	on the pitch
2	minute 11, first half	J. Baptiste	off target	0.07	37.8 m across, 11.6 m out from the goal line	on the pitch
3	minute 19, first half	D. Marchetti	saved	0.24	35.2 m across, 6.6 m out from the goal line	on the pitch
4	minute 23, first half	K. Sørensen	off target	0.01	25.4 m across, 39.1 m out from the goal line	on the pitch
5	minute 31, first half	R. Ilić	goal	0.44	33.8 m across, 3.9 m out from the goal line	on the pitch
6	minute 38, first half	A. Okonjo	blocked	0.05	41.1 m across, 14.3 m out from the goal line	on the pitch
7	minute 45 plus 2, first half	J. Baptiste	saved	0.16	29.9 m across, 8.7 m out from the goal line	on the pitch
8	minute 52, second half	R. Ilić	goal	0.79	34 m across, 11 m out from the goal line	still to come
9	minute 58, second half	J. Baptiste	off target	0.06	22.1 m across, 15.3 m out from the goal line	still to come
10	minute 64, second half	T. Fenwick	saved	0.18	36.4 m across, 8.8 m out from the goal line	still to come
11	minute 71, second half	A. Okonjo	saved	0.05	34.2 m across, 19.6 m out from the goal line	still to come
12	minute 78, second half	D. Marchetti	blocked	0.09	43.1 m across, 9.6 m out from the goal line	still to come
13	minute 85, second half	D. Marchetti	off target	0.29	32 m across, 6.1 m out from the goal line	still to come
14	minute 90 plus 3, second half	K. Sørensen	saved	0.11	28.8 m across, 12.5 m out from the goal line	still to come

view="final-third" at full time — the same match cropped to the last 35 m, so the penalty area fills the card. The 23rd-minute effort from 38 m is beyond the crop, so it sits pinned to the far edge and says so under the pitch instead of being drawn where nobody can see it.

Shot quality

Brentwood FC · vs Ashford United · Matchday 12, 18 Apr 2026, 19:45

Shot 14 of 14

2.58xG from 14 shots · 2 goals · 7 on target · 0.18 xG per shot

1 shot came from further out than this view draws — pinned to its far edge, distance understated.

90+3'K. Sørensensaved0.11 xG

half-chance in stoppage time

90+3'second half

goal (2)
saved (5)
blocked (3)
off target (4)
mark area = xG

Brentwood FC final-third shot map, minute 90 plus 3: 14 of 14 shots on the pitch, 2 goals from 2.58 expected goals — each mark sits where the shot was struck, its area grows with xG, and its shape gives the outcome.

Every attempt in match order, with its clock, shooter, outcome, expected goals and position on the attacking half. Full match: 14 shots, 2 goals, 2.58 expected goals.
Shot	Clock	Player	Outcome	xG	Position	At this instant
1	minute 4, first half	T. Fenwick	blocked	0.04	31 m across, 17.8 m out from the goal line	on the pitch
2	minute 11, first half	J. Baptiste	off target	0.07	37.8 m across, 11.6 m out from the goal line	on the pitch
3	minute 19, first half	D. Marchetti	saved	0.24	35.2 m across, 6.6 m out from the goal line	on the pitch
4	minute 23, first half	K. Sørensen	off target	0.01	25.4 m across, 39.1 m out from the goal line (beyond this view, pinned to its edge)	on the pitch
5	minute 31, first half	R. Ilić	goal	0.44	33.8 m across, 3.9 m out from the goal line	on the pitch
6	minute 38, first half	A. Okonjo	blocked	0.05	41.1 m across, 14.3 m out from the goal line	on the pitch
7	minute 45 plus 2, first half	J. Baptiste	saved	0.16	29.9 m across, 8.7 m out from the goal line	on the pitch
8	minute 52, second half	R. Ilić	goal	0.79	34 m across, 11 m out from the goal line	on the pitch
9	minute 58, second half	J. Baptiste	off target	0.06	22.1 m across, 15.3 m out from the goal line	on the pitch
10	minute 64, second half	T. Fenwick	saved	0.18	36.4 m across, 8.8 m out from the goal line	on the pitch
11	minute 71, second half	A. Okonjo	saved	0.05	34.2 m across, 19.6 m out from the goal line	on the pitch
12	minute 78, second half	D. Marchetti	blocked	0.09	43.1 m across, 9.6 m out from the goal line	on the pitch
13	minute 85, second half	D. Marchetti	off target	0.29	32 m across, 6.1 m out from the goal line	on the pitch
14	minute 90 plus 3, second half	K. Sørensen	saved	0.11	28.8 m across, 12.5 m out from the goal line	on the pitch

Degenerate feed — a shot logged off the pitch with xG 1.6, one with no coordinates at all, one with an unreadable clock, a 0 xG punt from the halfway line, a shooter name far too long for the strip, and an attempt emitted out of order. Everything drawable is drawn, the rest is counted under the pitch.

Shot quality

Ashford United · vs Brentwood FC · Matchday 12

Shot 4 of 4

1.30xG from 4 shots · 1 goal · 2 on target · 0.33 xG per shot

1 shot carries no usable coordinates — left out of the drawing and out of every figure above. 1 shot arrived from outside the pitch — pulled back onto the nearest line, position approximate. 1 shot arrived with an expected-goals value outside 0–1 — folded onto the range, so every total above is summed from the folded figure. 1 shot carries no readable clock — replayed last, in feed order.

—T. Fenwicksaved0.28 xG

second phase from a corner

—period unknown

goal (1)
saved (1)
blocked (1)
off target (1)
mark area = xG

Ashford United attacking-half shot map, clock unavailable: 4 of 4 shots on the pitch, 1 goal from 1.30 expected goals — each mark sits where the shot was struck, its area grows with xG, and its shape gives the outcome.

Every attempt in match order, with its clock, shooter, outcome, expected goals and position on the attacking half. Full match: 4 shots, 1 goals, 1.30 expected goals.
Shot	Clock	Player	Outcome	xG	Position	At this instant
1	minute 3, first half	Kristoffersen-Achterberg de la Fuente	goal	1.00	68 m across, 52.5 m out from the goal line (clamped onto the pitch)	on the pitch
2	minute 12, first half	S. Whitlock	blocked	0.02	40 m across, 20 m out from the goal line	on the pitch
3	minute 90 plus 7, second half	L. Barnard	off target	0.00	33.5 m across, 52.4 m out from the goal line	on the pitch
4	clock unavailable, period unknown	T. Fenwick	saved	0.28	34 m across, 10 m out from the goal line	on the pitch

status="empty" — the pitch itself, waiting for kick-off. A ready match with zero placeable shots lands here too.

Shot quality

Brentwood FC · vs Ashford United · Matchday 12, 18 Apr 2026, 19:45

No shots yet

Attempts appear on the pitch as they are logged — press play once the match has shots, and they land in match order.

status="loading" — the skeleton keeps the figures, the pitch block and the transport row, so nothing jumps when the match lands.

Shot quality

Brentwood FC · vs Ashford United · Matchday 12, 18 Apr 2026, 19:45

status="error" + onRetry — the Try again button only renders when onRetry is passed, and here it recovers to the loaded match.

Shot quality

Brentwood FC · vs Ashford United · Matchday 12, 18 Apr 2026, 19:45

Couldn't load this shot map

The match feed didn't respond.

Loading preview…

"use client"

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

import { cn } from "@/lib/utils"
import type {
  ChartSoccerShotQualityData,
  ChartSoccerShotQualityOutcome,
  ChartSoccerShotQualityShot,
} from "./chart-soccer-shot-quality.contract"

/** how much of the attacking end is drawn */
export type ChartSoccerShotQualityView = "attacking-half" | "final-third"

Installation

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

Prompt

Build a React + TypeScript + Tailwind "ChartSoccerShotQuality" component in
hand-rolled SVG (no chart library), with zod and lucide-react: a soccer shot
map that replays one match shot by shot.

Contract
- A zod schema is the single source of truth:
  { status: "loading" | "empty" | "error" | "ready"; title: string;
    team?: string; match?: string; frameMs?: number;
    shots: { x: number; y: number; xg: number;
             outcome: "goal" | "saved" | "blocked" | "off_target";
             minute: number; stoppage?: number;
             player?: string; note?: string }[] }.
- Coordinates are attacking-half metres on a 105 x 68 pitch: x runs 0-68
  across from the left touchline, y runs 0-52.5 out from the goal line, goal
  centre at (34, 0), penalty spot at (34, 11). Ranges are documented, not
  enforced by the schema — feeds emit shots a metre off the pitch, an xG of
  1.02 and the odd unreadable clock, and rejecting the whole match over one
  bad row is worse than drawing the row and saying so.
- Props = z.infer of the schema plus the playhead triple
  frame? / defaultFrame? / onFrameChange?(frame), view?: "attacking-half" |
  "final-third", onRetry?: () => void and className; forwardRef the root div
  and spread remaining props on it.
- The playhead is a frame index, never a wall clock: 0 = kick-off with an
  empty pitch, N = the pitch just after the Nth shot. Controlled when `frame`
  is passed (playback then reports through onFrameChange and the parent
  decides), uncontrolled otherwise. A paused chart at frame N renders
  byte-identically every time, which is what makes it screenshot-stable and
  SSR-safe.

Behavior
- Four first-class branches inside one bg-card panel: loading (skeleton
  mirroring figures + pitch block + transport, with an sr-only role="status"),
  empty (the pitch drawn faint, no marks), error (message + a Try again button
  only when onRetry exists), ready. status="ready" with no placeable shot
  falls into the empty branch and says whether the shots were lost to bad
  coordinates.
- Clock model: shots are ordered by minute * 1000 + stoppage, so 45+2 (45002)
  sits after 45 and before 46 — summing added minutes onto the minute would
  file a first-half stoppage shot in the middle of the second. Read-outs are
  football's own: "45+2'", the period ("first half", "second half", "extra
  time, first half"), and xG to two decimals everywhere.
- Transport is real buttons, never a gesture: back-to-kick-off, previous shot,
  play/pause (which becomes replay at full time), next shot, plus a wrapped
  row of minute chips — one per shot plus kick-off — that is the scrub. There
  is no autoplay: the card opens paused at defaultFrame.
- Playback is one setTimeout per step, owned by one effect, cleared on pause,
  on scrub, on unmount and whenever document.visibilityState hides the tab
  (playback resumes where it left off). Reaching full time is derived
  (frame >= lastFrame), never a setState from an effect.
- prefers-reduced-motion: with motion off, marks simply appear at each step
  and every tween is gone; playback, transport, clock and read-outs all still
  work. Every animation is gated behind motion-safe:.
- Pointer: hovering a mark makes it the active one — ring on the pitch, its
  clock printed beside it, its full detail in the strip below. A stale hover
  from before a step back is ignored, and the playhead's own shot takes over.
- Keyboard: the chip row is a radiogroup with a roving tab stop on the current
  frame. ArrowLeft/ArrowUp step back, ArrowRight/ArrowDown step forward, Home
  jumps to kick-off, End to full time; Enter/Space activates a chip directly.
  Every chip stays mounted for the whole match, so focus can never be dropped
  onto <body> by a step back.
- ARIA: the pitch is one role="img" with a one-sentence aria-label (instant,
  shots so far, goals, xG, and how the marks encode); the transport writes
  each frame change into a polite aria-live region ("Shot 7 of 14, minute 45
  plus 2, first half: A. Okonjo, saved, 0.16 expected goals…"); an sr-only
  table repeats every shot with clock, shooter, outcome, xG, position and
  whether it has been reached yet. Boundary buttons use aria-disabled plus a
  handler guard, never the native disabled attribute — a transport button that
  stops taking focus at the last frame vanishes under the finger.
- Edge cases, all visible rather than silent: shots with non-finite x/y are
  dropped and counted; shots from outside the pitch are clamped onto the
  nearest line and counted (and the strip says "position clamped"); shots
  struck from further out than the current view draws are pinned to its far
  edge and counted, never left outside the viewBox where nobody can see them;
  shots with an unreadable minute replay last, in feed order, and are counted;
  an xG that is unreadable or outside 0-1 folds onto 0-1 and is counted in the
  same note, because the headline total is summed from the folded figures and a
  silent fold would report a smaller match than the feed sent; a 0 xG shot still
  draws at the minimum radius; long shooter names truncate with a title
  attribute instead of overflowing.

Rendering & styling
- Geometry lives in exported pure functions so a test can print the same
  numbers the picture is made of: projectMetres(x, y) = PAD + metres * 8 units
  (PAD 22 = wide enough to hold the goal frame and the biggest mark),
  viewBoxFor(view) (0 0 588 464 for the attacking half, 0 0 588 324 for the
  final third), shotRadius(xg) = 5 + 13 * sqrt(xg) so mark *area* — not radius
  — tracks xG, clockKey / formatClock / spokenClock / periodLabel, plus
  buildShotMarks(shots, depth) and tallyThrough(marks, frame).
- Pitch in FIFA metres: goal mouth 7.32 wide, six-yard box 18.32 x 5.5,
  penalty area 40.32 x 16.5, penalty spot at 11, the D as a 9.15 arc centred on
  the spot and clipped to the top of the box (its half-width is
  sqrt(9.15^2 - 5.5^2) = 7.31), 1 m corner arcs, and the halfway line plus the
  centre circle only when the view is deep enough to contain them.
- Outcome is shape first: filled disc with a ring = goal, hollow diamond =
  saved, hollow square = blocked, cross = off target. Colour only reinforces it
  (on-target marks in var(--chart-1), the rest in muted ink), so the read
  survives greyscale and colour blindness; the same four glyphs appear in the
  chips, the legend and the detail strip, and the active mark also carries its
  clock as a direct label with a paint-order halo.
- Tokens only: bg-card, border, bg-muted, text-muted-foreground, bg-primary for
  the play button, ring-foreground for the current chip, var(--chart-1) for the
  series; the future chips are dashed rather than merely paler. cn() merges
  className.

Customization levers
- Pitch framing: `view` crops from the attacking half to the final third; both
  go through the same projection, so switching only changes the viewBox height,
  which markings fit, and which shots get pinned to the far edge. A "penalty
  area only" view is one more entry in viewBoxFor plus its depth.
- Mark scale: MARK_MIN_R / MARK_MAX_R set the xG ramp — shrink both for a
  season of shots, raise MARK_MIN_R if 0.01 xG chances must stay clickable.
- Tempo: frameMs ships with the data (default 1100 ms, clamped 200-8000); wire
  a speed control by multiplying it, or drive the frame entirely from outside
  through the controlled triple and ignore the internal timer.
- Encoding: the four shapes live in one OutcomeShape function — re-map them, or
  split home/away across var(--chart-1) and var(--chart-2) by passing a side
  and picking the token there.
- Blocks: the figures row, the drop/clamp note, the detail strip, the legend
  and the sr-only table are independent siblings; drop any of them without
  touching the drawing, and the numbers still derive from the same marks.
- Scrub density: the chip row is one button per shot — for a 40-shot match,
  cap it to goals plus the current shot, or swap it for a range input; keep the
  roving tab stop and the aria-live announcement wherever it lands.

Concepts

Derived playhead — the picture is a pure function of one integer frame index, not of a wall clock, so a paused card at frame 7 renders identically on every load and screenshots the same way twice; playback is just something that increments the integer.
Controlled or uncontrolled, same transport — pass frame + onFrameChange and the parent owns the moment (sync it to a video, a URL or a sibling chart); pass nothing and the card keeps its own. The buttons behave identically either way.
Transport, not autoplay — play / pause / step / kick-off / full time are real focusable buttons and the scrub is a row of minute chips with a roving tab stop, so there is never a moving picture the reader cannot stop, and never a scrubber that needs a mouse.
Football clock, not seconds — shots sort on minute × 1000 + stoppage so 45+2 lands between 45 and 46, and every read-out speaks the match's own units: the minute, the added minutes, the period, and xG to two decimals.
Shape carries the outcome — goal, saved, blocked and off target differ as disc, diamond, square and cross before they differ in colour, and the same glyphs repeat in the chips, the legend and the detail strip, so the encoding survives greyscale and never depends on the legend alone.
Honest geometry — shots outside the pitch are pulled onto the nearest line and counted in a visible note, shots with no coordinates are dropped and counted, shots with no readable clock replay last and are counted, an xG outside 0–1 is folded onto the range and counted; the xG total is only ever summed from the marks actually drawn, and every figure it had to bend is named under the pitch.

Soccer Shot Quality

Shot quality

Shot quality

Shot quality

Shot quality

Shot quality

Shot quality

Shot quality

Installation

Prompt

Concepts

On This Page

Shot quality

Shot quality

Shot quality

Shot quality

Shot quality

Shot quality

Shot quality