Pizarra tactica de futbol gratis, open source y moderna para entrenadores

Demo en vivo  ·  Reportar bug  ·  Pedir feature

Leer en otros idiomas: English  ·  Portugues

---

Note

Proyecto en desarrollo activo. La Fase 1 (estructura base) ya esta lista. El editor 2D, 3D, la biblioteca de entrenamientos y el sistema de jugadas animadas estan en construccion. Mira el roadmap abajo.

Por que existe esto

TacticalPad y similares son geniales, pero son pagos, viejos o complicados de usar para un entrenador que solo quiere abrir la app y dibujar una jugada. TacticBasicsFootball es la respuesta: gratis, open source, moderno, rapido y pensado para que un DT de 45 anios lo agarre en una tablet en el campo y entienda todo sin tutorial.

Features

Editor de cancha

• ⚽ Modo 2D cenital, SVG escalable, cancha reglamentaria 105x68m
• 🎮 Modo 3D con Three.js, camaras preset (cenital, lateral, detras del arco, DT)
• 🔄 Toggle 2D ↔️ 3D con animacion suave
• 📱 Drag and drop fluido (touch + mouse)
• ⚽ Soporte para futbol 11, 8, 7 y futsal con dimensiones reales

Formaciones

• 📋 40+ formaciones preset del futbol mundial
• Clasicas: 4-4-2, 4-3-3, 4-2-3-1, 3-5-2, 5-3-2, arbol de Navidad...
• Modernas: 2-3-2-3 (Guardiola), 3-4-2-1, 4-2-2-2 cuadrado magico...
• Historicas: WM, 2-3-5 piramide clasica, catenaccio...
• Cada formacion con su descripcion, fortalezas y debilidades

Jugadas animadas

• 🎬 Timeline tipo video editor con keyframes
• ▶️ Reproducir, pausar, scrubbing, velocidad ajustable (0.25x a 2x)
• ➰ Herramientas de dibujo: flechas, lineas de pase, zonas, texto
• ⚽ Pelota como entidad independiente con trayectoria visible

Biblioteca de entrenamientos

• 📚 80+ ejercicios preset listos para usar
• Por posicion: arqueros, defensores, laterales, volantes, extremos, delanteros
• En equipo: posesion, transiciones, presion alta, pelota parada, ataque combinativo
• Cada uno con objetivo, duracion, materiales y variantes

Compartir y exportar

• 🔗 Compartir tactica con URL corta (sin backend, todo va comprimido en el hash)
• :frame_photo: Export PNG en alta resolucion
• 🎥 Export GIF y MP4 de la jugada animada
• 📄 Export PDF con plan de entrenamiento completo
• 📺 Modo presentacion fullscreen para mostrar al equipo

UX para DTs

• 🚀 Funciona sin login, todo se guarda local
• ⬅️ Undo/Redo con 50 niveles de historial
• ⌨️ Atajos de teclado (presiona ? para verlos)
• 🌙 Modo oscuro por default (cambiable)
• 📱 PWA, funciona offline despues de la primera carga
• 🌐 i18n: espaniol (default), ingles, portugues

Quick start

# 1. Clonar
git clone https://github.com/meser1905/TacticBasicsFootball.git
cd TacticBasicsFootball

# 2. Instalar dependencias
pnpm install

# 3. Levantar el dev server
pnpm dev

Abri http://localhost:3000 y listo.

Scripts disponibles

Comando	Descripcion
pnpm dev	Levanta el servidor de desarrollo con Turbopack
pnpm build	Compila para produccion
pnpm start	Levanta el servidor de produccion
pnpm lint	Corre ESLint
pnpm typecheck	Chequea tipos con TypeScript
pnpm test	Corre los tests con Vitest
pnpm format	Formatea el codigo con Prettier

Stack tecnico

Capa	Tech
Framework	Next.js 15 (App Router)
UI	React 19 + TypeScript 5.7
Estilos	Tailwind CSS v4 + shadcn/ui
2D	SVG + Framer Motion
3D	Three.js + React Three Fiber + Drei
Estado	Zustand (con persist)
Storage	localStorage + IndexedDB (Dexie)
Compartir	lz-string en URL hash
Export	html2canvas (PNG), gif.js (GIF), MediaRecorder (MP4), jsPDF (PDF)
i18n	next-intl
Tests	Vitest + Testing Library + Playwright
PWA	next-pwa
Deploy	Vercel

Roadmap

• Fase 1 - Estructura del repo, configs base, README
• Fase 2 - Layout principal, theme provider, header, sidebar, i18n
• Fase 3 - Cancha 2D con drag and drop de jugadores
• Fase 4 - Sistema de formaciones preset (4-4-2, 4-3-3, 3-5-2)
• Fase 5 - Modo 3D con Three.js y R3F
• Fase 6 - Timeline y sistema de keyframes
• Fase 7 - Herramientas de dibujo (flechas, zonas, texto)
• Fase 8 - Biblioteca de entrenamientos
• Fase 9 - Export (PNG, GIF, MP4, PDF)
• Fase 10 - Compartir por URL, PWA, optimizaciones

Como contribuir

Toda contribucion es bienvenida. Si queres sumar una formacion, un ejercicio de entrenamiento, traducir a tu idioma, reportar un bug o mejorar el codigo, mira CONTRIBUTING.md.

Tres formas faciles de empezar:

1. ⭐ Dale una estrella al repo si te gusta la idea (es gratis y ayuda muchisimo).
2. ⚽ Sumar una formacion: usa el template de issue y mandanos los datos.
3. 🐛 Reporta un bug o pedi una feature con los templates correspondientes.

Tambien tenemos un Code of Conduct para que todos la pasemos bien.

Apoyar el proyecto

Si TacticBasicsFootball te ayuda en tu trabajo como DT o como dev, podes apoyar el desarrollo:

• ⭐ Estrella en GitHub (gratis y la mejor ayuda)
• ☕ Cafecito (Argentina)
• ❤️ GitHub Sponsors
• ☕ Ko-fi

Licencia

MIT (c) 2026 meser1905 y contribuidores

---

Hecho con ❤️ y mate por entrenadores y devs hispanohablantes.

English  ·  Portugues