Aprende creando grafismos reales.

El grafismo más habitual en televisión. Un rótulo con nombre y cargo que entra deslizándose desde la izquierda, con un diseño limpio inspirado en la CBS. Aprende el ciclo de vida completo de OGraf: load, play, update, stop.

Una mosca de esquina que aparece con una animación de escala y lleva un punto LIVE que late. Se usa normalmente para la marca del canal, indicadores de directo o logotipos de eventos. Muestra animaciones sencillas y un schema de datos mínimo.

Un ticker que se desplaza sin parar en la parte inferior de la pantalla, como los que ves en la CNN o en BBC News. Muestra animaciones CSS infinitas, arrays de datos dinámicos y bucles sin cortes.

Una elegante tarjeta de cita a pantalla completa con animaciones de entrada escalonadas: el texto de la cita, la línea divisoria y luego la atribución aparecen en secuencia. Usa Instrument Serif para lograr impacto editorial.

Gráfico de barras horizontales animado para resultados electorales. Las barras crecen de forma escalonada y los porcentajes aparecen animados. Enseña anchos basados en datos, filas que aparecen escalonadas y colores por partido.

Una tarjeta con la alineación completa del equipo, con dorsales, nombres y posiciones de los jugadores en una cuadrícula adaptable. Las tarjetas aparecen con una animación escalonada. Enseña datos en arrays, diseños en cuadrícula y apariciones secuenciales.

Marcador fijo en pantalla con acciones personalizadas. La acción 'goal' lanza un destello de celebración. Enseña customActions, la función de OGraf para operaciones propias del grafismo más allá de play/stop.

Un reloj de cuenta atrás que avanza en tiempo real con setInterval, sin necesitar updateAction del renderizador. Se pone en rojo en los últimos 10 segundos. Enseña grafismos que se actualizan solos y la limpieza de intervalos.

Overlay a pantalla completa de tipo lanzar y olvidar, con el distintivo rojo de BREAKING NEWS. Entra, se mantiene 4 segundos y se retira solo. Enseña stepCount: 0, grafismos que ejecutan su ciclo de vida completo automáticamente.

Tarjeta del tiempo con las condiciones actuales y una fila de previsión a 3 días. Usa iconos emoji, objetos de datos anidados y un diseño compacto con varias secciones. Enseña a diseñar schemas complejos.

Una tarjeta de publicación de redes sociales que entra deslizándose desde la derecha. Genera automáticamente las iniciales del avatar a partir del nombre de usuario. Enseña posicionamiento a la derecha, generación de iniciales y distintivos de plataforma.