El Builder de KronoGraph es un editor visual de plantillas pensado para directores de arte, productores y operadores que necesitan crear overlays propios — o ajustar los existentes — sin pasar por el ciclo "pedirle a un programador, esperar el deploy, probar". Lo abrís en el navegador, arrastrás capas a un canvas, vinculás slots a datos del partido y publicás. La nueva plantilla aparece en el panel del operador como cualquier otra.
Para quién es este servicio
- Federaciones y ligas con identidad propia que necesitan que el scorebug, el lineup y el final score se vean exactamente como los aprobó su director de arte.
- Productoras audiovisuales que cambian de cliente cada semana y no pueden depender de un developer para cada brand kit.
- Equipos broadcast pequeños que producen sus propias señales y quieren elevar la calidad gráfica sin contratar plantilla técnica.
- Eventos one-off (torneos especiales, finales, all-star) que requieren plantillas específicas que nunca más se van a usar.
Qué incluye el Builder
Editor de capas drag-drop
Arrastras capas de texto, imagen, formas geométricas o slots de datos al canvas. Cada capa tiene posición, tamaño, opacidad, blend mode y filtros. Las capas se reordenan con drag, se duplican con un atajo y se alinean con guías inteligentes.
Animaciones IN/OUT por capa
Cada capa elige una animación de entrada y otra de salida del catálogo: slide (desde cualquier dirección), fade, scale, clip-path. Cada animación tiene durIn, durOut, delayIn y delayOut editables. El preview corre con el mismo render que producción — lo que ves es lo que sale al aire.
Vinculación a datos en vivo
Los slots de texto e imagen se vinculan a placeholders del partido: {home.name}, {score.home}, {quarter}, {player.headshot}, {player.points}. Cuando llega data del feed (Genius Sports REST, FLS WebSocket, FEB scraper, OCR), la gráfica se actualiza automáticamente sin que el operador tenga que tocar nada.
Atajos de teclado y persistencia
Cmd/Ctrl+D duplica capa, Cmd/Ctrl+Z deshace, flechas mueven 1px, Shift+flechas mueven 10px. Cada plantilla persiste con un identificador built-{name} y aparece automáticamente en el catálogo de gráficas activas del evento.
Builder FEB — variante de tuning
Para clientes con paquete FEB ya instalado, existe una variante del Builder pensada solo para ajustar timings de las plantillas oficiales sin recrearlas. El director técnico puede subir el delayIn de la Game Title de 0.4s a 0.8s para que case con el corte de cámara, sin pedir un cambio de código. Persiste en evento.extra_data.gfxTiming.
Cómo funciona
- Abrís el Builder en
/builder/{shortCode}. Cargás un canvas vacío o duplicás una plantilla existente como punto de partida. - Componés la gráfica arrastrando capas. Vinculás slots a placeholders del partido. Configurás animaciones IN/OUT.
- Probás en preview con datos sintéticos o con un partido grabado en JSONL (replay mode) para ver cómo reacciona ante eventos reales.
- Publicás. La plantilla aparece en el panel del operador del evento. Cero deploy, cero reload, cero downtime.
Casos de uso reales
El Builder lo usaron clientes en producción para:
- Crear un final-score animado custom para una final continental que necesitaba un look distinto al regular season.
- Ajustar timings del paquete FEB partido a partido cuando el director técnico cambiaba durante la temporada (Builder FEB).
- Componer una gráfica de "Player of the Match" que solo se usaba en eventos especiales y reutilizaba assets del bundle base.
- Replicar el lower-third de un partner audiovisual sin entregarle acceso al repo de código.
Funcionalidades incluidas
- Editor drag-drop con capas de texto, imagen, formas y slots data-bound
- Animaciones IN/OUT configurables (slide, fade, scale, clip-path)
- Vinculación a placeholders del partido en vivo
- Preview en tiempo real con el mismo render path de producción
- Atajos de teclado para selección, duplicación, alineación y reorden
- Persistencia automática — aparece en el panel del operador como cualquier plantilla
- Builder FEB para tuning de timings sin código
- Compatible con cualquier brand kit (color1/2/3 + font del proyecto)
- Modo replay con captura JSONL para QA pre-evento
Preguntas frecuentes
¿Hay que saber programar para usar el Builder?
No. Es 100% drag-drop. Arrastras capas, eliges animaciones de un catálogo y vinculas datos con placeholders {home.name}. Cero JavaScript.
¿Las plantillas custom se ven igual que las oficiales?
Sí. Pasan por el mismo render path (browser source 1920×1080 transparente). OBS y vMix las capturan idéntico.
¿Puedo tunear los timings FEB sin reescribir nada?
Sí. El Builder FEB es la variante de tuning. Subís un panel, ajustás durIn/durOut/delayIn/delayOut, persiste en extra_data.gfxTiming.
¿Funcionan con Genius Sports en vivo?
Sí. Cualquier slot data-bound recibe el feed automáticamente vía REST polling o WebSocket FLS.
¿Puedo copiar plantillas entre proyectos?
Sí. Se duplican entre proyectos. El brand kit del proyecto destino reaplica colores y fuente.