BoardX

Professional football tactical visualization for sports content creators.

Features • Getting Started • Usage • Tech Stack • Contributing • License

---

BoardX is a browser-based tactical board built for sports content creators, analysts, and coaches. Drag players onto a pitch, animate tactical sequences frame-by-frame, draw annotations, and export polished visuals for social media — all without leaving your browser.

Features

Tactical Board

• Standard football pitch (1280x720) with half-space and central zone highlights
• 22 draggable players (11 home + 11 away) with editable labels, numbers, and team colors
• Draggable ball token
• Show/hide individual teams

Formations

• 13 preset formations: 4-3-3, 4-4-2, 4-2-3-1, 3-5-2, 5-4-1, 4-1-4-1, 3-4-3, 4-3-1-2, 4-5-1, 3-4-2-1, 4-4-1-1, 4-1-2-1-2, 5-3-2
• One-click switching with smooth position transitions
• Configurable formation lines connecting groups of players
• Bulk roster import via CSV (number,label)

Keyframe Animation

• Frame-by-frame animation with smooth interpolation (easeInOutQuad)
• Each keyframe stores player positions, ball position, and annotations
• Movement paths shown as dashed lines between frames

Drawing Tools

Tool	Action	Result
Arrow	Click & drag	Arrow for passing lanes and runs
Circle	Click & drag	Dashed circle to highlight zones
Text	Click & type	Free-form text labels
Select	Drag	Move players and the ball

Drawings sync to keyframes with smooth grow/shrink animations between frames.

Export

• PNG — High-resolution static image (2x)
• WebM — Video export for match analysis
• GIF — Optimized for social media sharing

Internationalization

• English and Simplified Chinese
• Auto-detects browser language, with manual toggle

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

git clone https://github.com/massuhora/boardx.git
cd boardx
npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm run preview

Usage

Creating a Tactical Animation

1. Set up — Drag players and the ball to starting positions, or select a preset formation
2. Add keyframe — Click Add Keyframe to capture the current state
3. Rearrange — Move players to the next tactical position
4. Annotate (optional) — Use arrow, circle, or text tools to draw on the pitch
5. Repeat — Add more keyframes to build the sequence
6. Preview — Click Play Animation to watch the full sequence
7. Export — Choose PNG, Video, or GIF

Team Roster Import

1. Expand Team Roster in the sidebar
2. Enter one player per line in number,label format (e.g. 10,Messi)
3. Click Apply to update the team

Formation Lines

1. Toggle Formation Lines on
2. Click Configure Lines
3. Create chains by naming the group and clicking players in order
4. Edit or delete chains at any time

Tech Stack

Layer	Technology
Framework	React 19
Language	TypeScript
Build	Vite
Styling	Tailwind CSS v4
Canvas	Konva / react-konva
State	Zustand
i18n	i18next / react-i18next
Icons	Lucide

Contributing

Contributions are welcome! Please feel free to submit a pull request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Acknowledgments

• Konva.js — Canvas rendering engine
• Zustand — Lightweight state management
• Tailwind CSS — Utility-first CSS
• Lucide — Beautiful icons
• i18next — Internationalization framework

License

MIT