Fork of the 5v5 Football Tactics Board by Jack Abraham (MIT)

Tactics Board

Drag markers to position them. Capture a keyframe, adjust positions, capture again — playback tweens between them automatically.

Add to pitch

Players are plain coloured dots by default. Tap or click a player to select it — the "Selected player" panel below lets you name it and give it a photo. (Double-clicking a player on the pitch also works on desktop.) Leave the name empty and no tag is shown.

Selecting more than one: drag a box on empty grass to rubber-band a group. Dragging any player in a group moves the whole group and keeps its shape, even against the touchline. Use "Delete selected" to remove them all. On a keyboard you can also shift-click to add and remove individuals, and press Delete.
Turns every red player blue and every blue player red on the current board — handy if you built a play in the wrong colour. Names/labels are left untouched. To fix a saved play: load it, click this, then "Save as preset" to overwrite it.

Pitch

Which way the pitch lies. Nobody moves: every player keeps the same spot on the pitch, so turning the board and turning it back leaves the drill exactly as it was. Saved with the play, because a drill drawn one way up should open that way for whoever you send it to. To change the way new plays start, use Settings.
x
Sizes are the recommended value for each format; leagues vary within the permitted range, so set your own above if yours differs. Changing format redraws the markings at their real proportions and the players keep their relative positions. The format is saved with the play.

Teams

Which end each team is playing towards. It points the triangular markers below, and decides which half a newly added player starts in. Saved with the play, because it is part of the drill rather than a setting on your screen.
Triangles say which way a side is playing without you having to read the whole board. A photo keeps its full round shape and its full size, so it crosses the edges of the triangle — that is deliberate. Shrinking a photo to fit inside a triangle halves it, which puts the face below the size anyone can recognise. Saved with the play.

Settings

Players arc smoothly through their keyframe positions instead of moving in straight lines, which reads much more like a real run. Speed stays even along the curve. Needs three or more keyframes to differ from a straight line — and it is saved with the play, since it changes how the play moves.
30px
30px
A photo covers the whole marker, so a photographed player loses the red or blue that says whose side they are on. This leaves a band of that colour showing around the face. The marker does not get any bigger — the face gives up the room — so a photographed player still matches a plain dot exactly. The band scales with the marker size, within limits, so it stays readable when tokens are small and stays subtle when they are large.
Every marker carries a thin outline. Dark holds it apart from the grass and from other markers where they overlap, which matters most for a red player, since red and green are close in brightness. In the team colour it looks cleaner, and on a photographed player it simply widens the ring — but a plain dot loses that separation, because its outline and its fill become the same colour. "Photos only" keeps both: a wider ring where you need one, a crisp edge where you do not. The selected marker is outlined in amber whichever you choose.
A face at the default 30px is hard for a young player to pick out, so photos are worth enlarging. Sizes are matched by default so a half-photographed squad still looks like one set of players — untick to size the plain dots separately. Bigger tokens stay just as easy to grab and drag, and the size shows in every export.
16px
18px
The ball and cones are drawn small by default, which is easy to miss on a phone and easy to lose against the markings. Enlarging them makes them easier to grab as well as to see, and the size carries into every export.
The strip keeps the sequence under the board while you work, so capturing and re-selecting a frame does not cost a tab switch. Tap a frame to jump to it. With "strip only" the Frames tab drops its copy of the list, and the selected frame's own controls — seconds, rename, reorder, delete — sit just below the strip instead. Capture and "Update selected keyframe" stay in the Frames tab whichever you choose. This only affects narrow screens.
Actually moves the photographed features — pulls the mouth corners up for a smile, drops the jaw for a shocked mouth, raises the brows — instead of only drawing over them. Turn it off on a slow device: the drawn expression still works, it just sits on top of the original face.
Draws the face box and the eye, brow, nose and mouth points found when the photo was added, straight onto the token. A diagnostic for checking the crop found the right thing — it is remembered in this browser only and never appears in an export or in a saved play.
Which way round a play starts when you click "New play". It applies to a new board only — opening someone else's play always shows it the way they drew it, and this setting stays in this browser.
Settings are remembered in this browser only. They are not saved into a play, so sharing a play never changes anyone else's view.

Presets

Loading a preset replaces the current board.
To update a saved play: load it, make your changes, then click "Save as preset" again — the name box above is pre-filled with whatever you loaded, so it overwrites automatically. Change the name first if you want to save it as a new play instead.

Save / Load

Clears the board and starts fresh, using the orientation you chose under "New plays start" in Settings. It asks first, and it leaves your autosave alone.

Keyframes (the sequence)

Select a keyframe below, drag players to new spots, then "Update selected keyframe" — or just capture a fresh one to append to the sequence. Tap ✎ on a keyframe to rename it.

Notes on the pitch

Notes stay fixed where you drop them — they no longer move between keyframes. Use "From" / "Until" to make a note appear only for part of the sequence, or leave both as "Always" to show it throughout. Edit a note's text in the box next to it below.

Export

GIF is always exported at standard size — a larger GIF becomes enormous very quickly.
MP4 plays anywhere you might send it — phone, WhatsApp, email. It renders frame by frame rather than recording playback, so it is exact and usually finishes faster than the clip is long. If this browser cannot encode MP4 it falls back to WebM automatically.