A football tactics board prototype where dragging one player reshapes the rest of the pitch in real time.
A football tactics board where the team reacts. Drag a winger wide and the rest respond with support runs, cover, pressing and receivers, and trails and ghost markers show where everyone's heading. Drag the ball and possession flips to the nearest player.
The first version looked serious, with a tool rail, an inspector, a timeline and action types, and none of it helped. I stripped it back to one interaction: move one thing and watch the rest respond.
React, Vite and TypeScript, a client-side interaction model for 22 players and a ball, and a heuristic movement engine that gives each marker a role-aware reaction. Deployed on Vercel.
The hard part was making a diagramming tool simulate: reactions that look plausible to a coach, without building a football game engine.
Live site
Most digital tactics boards are prettier whiteboards. You drag players, draw arrows and maybe export an image, and the rest stays in the coach’s head. I wanted to see if the board could react: drag a winger wider and the shape adjusts around it, with opponents pressing, teammates supporting and the ball changing possession.
The first version had all the usual furniture: a tool rail, an inspector, a timeline, action types and scenario labels. It looked serious and didn’t help. I stripped that away and focused on one interaction, moving one thing and watching the rest of the board respond.
What’s live now is a full-screen 11v11 pitch. Players and the ball are draggable. Dragging a player triggers role-aware support, cover, receiver and pressing reactions. Dragging the ball flips possession to the nearest player. Motion trails and ghost markers show where the system thinks players are heading next.
It’s still an experiment. What’s left is tablet ergonomics, save and export, and testing whether a real coach reaches for this over a whiteboard.