Aprenda criando grafismos de verdade.

O grafismo mais comum do broadcast. Uma tarja de nome e cargo que entra deslizando pela esquerda, com um visual limpo inspirado na CBS. Aprenda o ciclo de vida completo do OGraf: load, play, update, stop.

Um bug de canto que surge com uma animação de escala e traz um ponto LIVE pulsante. Costuma ser usado para a marca do canal, indicadores de ao vivo ou logos de eventos. Demonstra animações simples e um schema de dados mínimo.

Um ticker que rola sem parar na parte de baixo da tela — do tipo que você vê na CNN ou na BBC News. Demonstra animações CSS infinitas, arrays de dados dinâmicos e loop contínuo sem emendas.

Um cartão de citação elegante em tela cheia, com animações de entrada escalonadas — o texto da citação, a linha divisória e depois a atribuição aparecem em sequência. Usa Instrument Serif para dar impacto editorial.

Gráfico de barras horizontais animado para resultados eleitorais. As barras crescem em tempos escalonados e as porcentagens aparecem animadas. Ensina larguras guiadas por dados, entrada escalonada das linhas e cores por partido.

Um cartão com a escalação completa do time, com números, nomes e posições dos jogadores numa grade responsiva. Os cards aparecem com animação escalonada. Ensina dados em array, layouts em grade e entradas sequenciais.

Placar fixo na tela com ações customizadas. A ação 'goal' dispara um flash de comemoração. Ensina customActions — o recurso do OGraf para operações específicas do grafismo além de play/stop.

Um relógio de contagem regressiva que avança em tempo real com setInterval — sem precisar de updateAction do renderizador. Fica vermelho nos últimos 10 segundos. Ensina grafismos que se atualizam sozinhos e a limpeza de intervalos.

Overlay em tela cheia do tipo disparar e esquecer, com selo vermelho de BREAKING NEWS. Entra, fica 4 segundos e sai sozinho. Ensina stepCount: 0 — grafismos que executam o ciclo de vida completo automaticamente.

Cartão do tempo com as condições atuais e uma linha de previsão para 3 dias. Usa ícones emoji, objetos de dados aninhados e um layout compacto com várias seções. Ensina o design de schemas complexos.

Um card de post de rede social que entra deslizando pela direita. Gera automaticamente as iniciais do avatar a partir do nome do usuário. Ensina posicionamento à direita, geração de iniciais e selos de plataforma.