Learn by building real graphics.

The most common broadcast graphic. A name and title card that slides in from the left with a clean CBS-inspired design. Learn the full OGraf lifecycle: load, play, update, stop.

A corner bug that pops in with a scale animation and features a pulsing LIVE dot. Typically used for channel branding, LIVE indicators, or event logos. Demonstrates simple animations and minimal data schema.

A continuous scrolling ticker at the bottom of the screen — the kind you see on CNN or BBC News. Demonstrates infinite CSS animations, dynamic data arrays, and seamless looping.

An elegant full-screen quote card with staggered reveal animations — quote text, divider line, then attribution appear sequentially. Uses Instrument Serif for editorial impact.

Animated horizontal bar chart for election results. Bars grow with staggered timing, percentages animate in. Teaches data-driven widths, staggered row reveals, and color-coded parties.

A full team lineup card with player numbers, names, and positions in a responsive grid. Cards reveal with staggered animation. Teaches array data, grid layouts, and sequential reveals.

Persistent on-screen score display with custom actions. The 'goal' action triggers a celebration flash. Teaches customActions — the OGraf feature for graphic-specific operations beyond play/stop.

A countdown clock that ticks in real-time using setInterval — no updateAction needed from the renderer. Goes red in the last 10 seconds. Teaches self-updating graphics and interval cleanup.

Fire-and-forget full-screen overlay with red BREAKING NEWS badge. Plays in, holds 4 seconds, auto-dismisses. Teaches stepCount: 0 — graphics that run their complete lifecycle automatically.

Weather card with current conditions and a 3-day forecast row. Uses emoji icons, nested data objects, and a compact multi-section layout. Teaches complex schema design.

A social media post card that slides in from the right. Auto-generates avatar initials from the user name. Teaches right-side positioning, initial generation, and platform badges.