Carregando...
Carregando...
Guia da especificação
Seja você designer, desenvolvedor ou profissional de emissora, este guia explica o formato OGraf em linguagem simples, com exemplos reais. Não é preciso experiência prévia. Para a especificação técnica completa, veja a documentação oficial da EBU.
Imagine que você cria um lower third (tarja) no After Effects. Hoje, você teria de exportá-lo de um jeito diferente para cada sistema — uma versão para o CasparCG, outra para o SPX, outra para o Vizrt. Cada uma com seu próprio formato, suas manias e suas limitações.
O OGraf acaba com isso. Você cria o grafismo uma única vez como uma pequena página web (HTML + CSS + JavaScript), empacota num formato padrão, e ele roda em qualquer sistema compatível com OGraf. O mesmo arquivo, em todo lugar.
Você cria
Desenhe o grafismo com HTML, CSS e JavaScript — as mesmas ferramentas usadas para construir sites.
Você empacota
Adicione um arquivo de manifesto que descreve o grafismo — nome, campos de dados e comportamento.
Ele roda
Qualquer sistema de playout compatível com OGraf (SPX, CasparCG, ograf-server…) consegue carregá-lo e executá-lo.
Os três papéis no ecossistema OGraf
Pense assim
Pense no OGraf como um PDF. Um PDF tem a mesma aparência seja no Adobe Reader, no Chrome ou no Pré-Visualização. Um grafismo OGraf funciona do mesmo jeito seja no SPX, no CasparCG ou em qualquer outro sistema compatível. O formato é o contrato.
O fluxo de trabalho OGraf
Do editor de texto do designer até um quadro de transmissão ao vivo: cada etapa do fluxo de trabalho OGraf — e onde cada parte do ecossistema se encaixa.
Um pacote OGraf é só uma pasta com alguns arquivos. Não é preciso nenhum software especial para criar um — dá para montá-lo com qualquer editor de texto.
Um pacote OGraf típico para um lower third
Dois arquivos são obrigatórios: o manifesto (.ograf.json) e o módulo JavaScript para o qual aponta o campo main. Todo o resto fica a seu critério — inclua no pacote as fontes, imagens, CSS ou bibliotecas JavaScript de que o grafismo precisar.
Para designers de After Effects
O manifesto é um pequeno arquivo JSON que apresenta o seu grafismo ao mundo. Ele responde perguntas como: qual é o nome deste grafismo? De que dados ele precisa? Como ele se comporta?
Quando alguém carrega o seu grafismo no SPX ou em qualquer outro controlador, o controlador lê este arquivo primeiro. Ele usa essas informações para mostrar o nome do grafismo na lista de templates, gerar formulários de entrada de dados para o operador e saber como controlar a reprodução.
{
"$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
"id": "com.mystation.lower-third",
"version": "1.0.0",
"name": "News Lower Third",
"description": "Standard two-line name and title overlay",
"author": {
"name": "Jane Smith",
"email": "jane@mystation.com"
},
"main": "graphic.mjs",
"stepCount": 1,
"supportsRealTime": true,
"supportsNonRealTime": false,
"schema": {
"type": "object",
"properties": {
"name": { "type": "string", "title": "Name", "default": "John Doe" },
"title": { "type": "string", "title": "Title", "default": "Reporter" }
}
}
}Vamos destrinchar cada parte:
Pense assim
O manifesto é como o verso da caixa de um jogo de tabuleiro. Ele diz o nome do jogo, quantos jogadores aceita, o que vem na caixa e as regras básicas — antes mesmo de você abri-la. Os controladores leem o manifesto para saber como apresentar e operar o seu grafismo.
Quando um operador clica em "Play" no controlador (como o SPX), uma sequência precisa acontece nos bastidores: o renderizador chama estes métodos no grafismo, nesta ordem. Entender essa sequência é a chave para entender o OGraf. Os grafismos também podem declarar ações customizadas — um efeito de gol num placar, por exemplo —, que os controladores mostram como botões extras e entregam por meio de customAction().
load()
O grafismo recebe os dados do operador (nome, cargo, cores…) e se prepara.
O operador preenche "Jane Smith" e "Reporter" no formulário.
playAction()
O grafismo entra na tela com animação. O lower third desliza a partir da esquerda.
O diretor clica em Play. O crédito com o nome entra com uma animação suave.
updateAction()
Os dados mudam enquanto o grafismo está no ar. O texto é atualizado ao vivo.
O cargo muda de "Reporter" para "Senior Correspondent" no meio do programa.
stopAction()
O grafismo sai da tela com animação. O lower third desliza de volta para fora.
O diretor clica em Stop. O grafismo sai com uma animação limpa.
dispose()
Tudo é limpo. A memória é liberada. Pronto para o próximo grafismo.
O sistema remove o grafismo da memória do renderizador.
O ciclo de vida de um grafismo OGraf durante uma transmissão ao vivo
Cada uma dessas etapas é um método no seu código. O renderizador os chama em ordem e espera cada um terminar antes de chamar o próximo. Ou seja: quando você diz ao renderizador "minha animação leva 500ms", ele respeita isso e não interrompe.
A sacada principal
O OGraf não se importa com como você anima o grafismo — transições CSS, JavaScript, GSAP, Lottie, canvas, SVG — tudo funciona. Ele só se importa com quando você terminou. Sinalize "estou pronto" e o renderizador segue em frente.
Nem todo grafismo é um simples lower third. Um resultado de eleição pode ter 5 páginas. Um placar esportivo pode ser atualizado dinamicamente. O OGraf resolve isso com passos.
stepCount: 0Dispara e esquece
Disparado uma vez, vai do início ao fim sozinho — entra, fica e sai. Não há passos para o operador avançar.
Exemplos: Vinheta de replay, transição de wipe, animação de bumper
stepCount: 1Passo único (o mais comum)
Aparece quando recebe play, fica visível e some quando recebe stop.
Exemplos: Lower third, bug (selo de canto), marca d'água com logo, relógio
stepCount: 3Vários passos
Cada Play avança para a próxima página. Stop sai a partir de qualquer página.
Exemplos: Resultado de eleição (3 partidos), grafismo com várias estatísticas, apresentação de slides
stepCount: -1Passos dinâmicos
O número de páginas depende dos dados — podem ser 2 ou 20.
Exemplos: Tabelas baseadas em dados, classificações ao vivo, listas com rolagem
A parte mais poderosa do OGraf para designers: você define de que dados o grafismo precisa, e o controlador monta automaticamente um formulário para o operador. Sem precisar de interface personalizada.
Isso é feito pelo schema no seu manifesto, usando um formato chamado GDD (Graphics Data Definition). Não se intimide com o nome — é só uma forma de dizer "este grafismo precisa de um campo de texto chamado Nome e de um seletor de cor chamado Fundo".
O que o operador vê
O que você escreve no manifesto
O que o operador vê vs. o que você escreve no manifesto
O gddType diz ao controlador que tipo de campo mostrar. Estas são as opções:
single-lineCampo de texto (uma linha)
multi-lineÁrea de texto (várias linhas)
selectMenu suspenso com opções
color-rrggbbSeletor de cor
color-rrggbbaaSeletor de cor com transparência
file-pathSeletor de arquivo
file-path/image-pathSeletor de arquivo de imagem
percentageControle deslizante de porcentagem
duration-msDuração em milissegundos
Cada conceito desta especificação corresponde a algo real que você pode construir. Cada tutorial guia você por um grafismo OGraf completo — manifesto, Web Component, animação, dados — em 10 a 25 minutos.
Escolha um e construa. Cada exemplo vem como um pacote OGraf funcionando.

Lower third
Nome e cargo sobre a imagem

Bug / AO VIVO
Indicador de canto com pulso

Ticker de notícias
Manchetes rolando na tela

Citação em tela cheia
Tipografia cinematográfica em tela cheia

Barras de eleição
Gráfico de porcentagens animado

Escalação esportiva
Grade com o elenco do time

Placar
Placar de partida ao vivo

Contagem regressiva
Relógio que avança sozinho

Plantão
Alerta urgente em tela cheia

Previsão do tempo
Condições atuais e previsão de 3 dias

Card de rede social
Post sobreposto com avatar
Estes recursos são menos comuns, mas importantes para fluxos de trabalho especializados.
Crie seu primeiro template
Tutorial mão na massa. Do zero a um lower third funcionando em 15 minutos.
Começar a construir →
Especificação oficial da EBU
A especificação técnica completa, com JSON schemas e tipos TypeScript.
Ler a especificação →
Explore o ecossistema
Descubra editores, renderizadores, controladores e ferramentas compatíveis com OGraf.
Ver todas as ferramentas →
Verifique seu pacote
Solte um .zip e receba um relatório estruturado com base em 85 regras e no schema da EBU em vigor.
Abrir o verificador →