Intermediate15 min

Build a breaking news alert.

The breaking news alert is a full-screen interrupt — a bold, red overlay that demands attention. Unlike other graphics, it uses stepCount: 0, meaning it's fire-and-forget: it plays in, holds, and auto-dismisses without any operator interaction.

Breaking News — OGraf Template

1920 x 1080

Headline

What's different from other graphics?

Fire-and-forget

stepCount: 0 in the manifest. The graphic plays in, holds for a set duration, then auto-dismisses. No operator needed to take it out.

Full-screen overlay

Covers the entire viewport with a semi-transparent dark background. The red "BREAKING NEWS" badge and headline dominate the screen.

Staggered reveal

Three elements animate in sequence — badge, then headline, then the accent line — creating a dramatic reveal that builds urgency.

The auto-dismiss pattern

With stepCount: 0, the playout system expects the graphic to handle its own lifecycle. The playAction method plays the entrance animation, holds for a fixed duration, then plays the exit — all in a single async call.

graphic.mjs (key parts)JavaScript

async playAction() {
  // Phase 1: Reveal the overlay
  this._root.classList.add('visible');
  await new Promise(r => setTimeout(r, 300));

  // Phase 2: Reveal the badge
  this._badge.classList.add('show');
  await new Promise(r => setTimeout(r, 400));

  // Phase 3: Reveal the headline
  this._headline.classList.add('show');
  await new Promise(r => setTimeout(r, 200));

  // Phase 4: Reveal the accent line
  this._line.classList.add('show');

  // Hold for 8 seconds
  await new Promise(r => setTimeout(r, 8000));

  // Phase 5: Auto-dismiss
  this._root.classList.add('out');
  await new Promise(r => setTimeout(r, 600));
  this._root.classList.remove('visible', 'out');
  this._badge.classList.remove('show');
  this._headline.classList.remove('show');
  this._line.classList.remove('show');

  return { statusCode: 200 };
}

async load({ data }) {
  if (data?.headline) this._headline.textContent = data.headline;
  return { statusCode: 200 };
}

// No stopAction needed — the graphic dismisses itself
// No updateAction needed — fire-and-forget

Key insight: stepCount: 0

Setting stepCount: 0 tells the playout system this graphic has no interactive steps. It plays, runs its full animation cycle (including hold and exit), and returns. The system won't send play/stop commands — the graphic is fully autonomous once triggered.

The CSS — urgency design

The breaking news alert uses a dark semi-transparent backdrop, a bold red badge, and a pulsing red dot to convey urgency. The staggered reveal uses increasing transition-delay values for each element.

style.css (key parts)CSS

.breaking-overlay {
  position: absolute;   /* against the graphic's root, not the viewport */
  inset: 0;
  background: rgba(10, 10, 15, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.breaking-overlay.visible {
  opacity: 1;
}

.breaking-badge {
  background: #dc2626;
  color: white;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.breaking-badge.show {
  opacity: 1;
  transform: translateY(0);
}

/* Pulsing red dot */
.breaking-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  animation: dot-pulse 1.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.breaking-headline {
  font-size: 36px;
  font-weight: 600;
  color: white;
  text-align: center;
  max-width: 800px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.breaking-headline.show {
  opacity: 1;
  transform: translateY(0);
}

.breaking-line {
  width: 60px;
  height: 3px;
  background: #dc2626;
  margin-top: 20px;
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.breaking-line.show {
  opacity: 1;
  transform: scaleX(1);
}

Design tip

The pulsing red dot in the badge adds urgency without being distracting. It's a subtle but effective broadcast convention — viewers associate that blinking dot with live, important content. The animation is slow (1.5s cycle) so it doesn't feel frantic.

The manifest

Notice stepCount: 0 — that's how OGraf declares fire-and-forget graphics. The renderer expects playAction to run the full lifecycle and return.

breaking-news.ograf.jsonJSON

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id": "dev.ograf.tutorial.breaking-news",
  "version": "1.0.0",
  "name": "Breaking News",
  "description": "Fire-and-forget full-screen breaking news overlay that plays in, holds, and auto-dismisses. Tutorial from ograf.dev.",
  "author": {
    "name": "ograf.dev",
    "url": "https://ograf.dev"
  },
  "main": "graphic.mjs",
  "stepCount": 0,
  "supportsRealTime": true,
  "supportsNonRealTime": false,
  "schema": {
    "type": "object",
    "properties": {
      "headline": {
        "type": "string",
        "title": "Headline",
        "gddType": "single-line",
        "default": "EBU announces OGraf v2 roadmap for 2027"
      }
    }
  }
}

Download the full Breaking News package

A real OGraf Graphics Definition v1 package. A compliant renderer reads the manifest and drives the lifecycle. MIT-licensed; drop it into any OGraf-compatible system.

breaking-news.ograf.json
Manifest — what a renderer reads (id, schema, lifecycle flags)
graphic.mjs
Web Component with load / play / update / stop / customAction / dispose
style.css
Stylesheet, loaded by graphic.mjs via a <link> tag
README.md
Usage notes

Download breaking-news.zipMIT · fonts included · drop on /check to validate

Deploy to a compliant OGraf renderer

Breaking news complete.

Fire-and-forget with stepCount: 0, staggered dramatic reveal, and auto-dismiss — a fully autonomous alert graphic.

Next: Weather All tutorials

More tutorials

View all 11

Beginner15 min

Lower Third

Name & title overlay

Beginner10 min

Bug / LIVE

Corner indicator with pulse

Intermediate20 min

News Ticker

Scrolling headline crawl

Intermediate15 min

Full Page Quote

Cinematic full-screen typography

Intermediate20 min

Election Bars

Animated percentage chart

Intermediate20 min

Sport Lineup

Team roster grid

Advanced25 min

Score Bug

Live match scoreboard

Intermediate15 min

Countdown Timer

Self-ticking clock

Intermediate20 min

Weather Forecast

Conditions & 3-day outlook

Beginner10 min

Social Media Card

Post overlay with avatar

What's different from other graphics?

Fire-and-forget

stepCount: 0 in the manifest. The graphic plays in, holds for a set duration, then auto-dismisses. No operator needed to take it out.

Full-screen overlay

Covers the entire viewport with a semi-transparent dark background. The red "BREAKING NEWS" badge and headline dominate the screen.

Staggered reveal

Three elements animate in sequence — badge, then headline, then the accent line — creating a dramatic reveal that builds urgency.

The auto-dismiss pattern

graphic.mjs (key parts)JavaScript

async playAction() {
  // Phase 1: Reveal the overlay
  this._root.classList.add('visible');
  await new Promise(r => setTimeout(r, 300));

  // Phase 2: Reveal the badge
  this._badge.classList.add('show');
  await new Promise(r => setTimeout(r, 400));

  // Phase 3: Reveal the headline
  this._headline.classList.add('show');
  await new Promise(r => setTimeout(r, 200));

  // Phase 4: Reveal the accent line
  this._line.classList.add('show');

  // Hold for 8 seconds
  await new Promise(r => setTimeout(r, 8000));

  // Phase 5: Auto-dismiss
  this._root.classList.add('out');
  await new Promise(r => setTimeout(r, 600));
  this._root.classList.remove('visible', 'out');
  this._badge.classList.remove('show');
  this._headline.classList.remove('show');
  this._line.classList.remove('show');

  return { statusCode: 200 };
}

async load({ data }) {
  if (data?.headline) this._headline.textContent = data.headline;
  return { statusCode: 200 };
}

// No stopAction needed — the graphic dismisses itself
// No updateAction needed — fire-and-forget

Key insight: stepCount: 0

The CSS — urgency design

style.css (key parts)CSS

.breaking-overlay {
  position: absolute;   /* against the graphic's root, not the viewport */
  inset: 0;
  background: rgba(10, 10, 15, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.breaking-overlay.visible {
  opacity: 1;
}

.breaking-badge {
  background: #dc2626;
  color: white;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.breaking-badge.show {
  opacity: 1;
  transform: translateY(0);
}

/* Pulsing red dot */
.breaking-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  animation: dot-pulse 1.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.breaking-headline {
  font-size: 36px;
  font-weight: 600;
  color: white;
  text-align: center;
  max-width: 800px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.breaking-headline.show {
  opacity: 1;
  transform: translateY(0);
}

.breaking-line {
  width: 60px;
  height: 3px;
  background: #dc2626;
  margin-top: 20px;
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.breaking-line.show {
  opacity: 1;
  transform: scaleX(1);
}

Design tip

The manifest

Notice stepCount: 0 — that's how OGraf declares fire-and-forget graphics. The renderer expects playAction to run the full lifecycle and return.

breaking-news.ograf.jsonJSON

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id": "dev.ograf.tutorial.breaking-news",
  "version": "1.0.0",
  "name": "Breaking News",
  "description": "Fire-and-forget full-screen breaking news overlay that plays in, holds, and auto-dismisses. Tutorial from ograf.dev.",
  "author": {
    "name": "ograf.dev",
    "url": "https://ograf.dev"
  },
  "main": "graphic.mjs",
  "stepCount": 0,
  "supportsRealTime": true,
  "supportsNonRealTime": false,
  "schema": {
    "type": "object",
    "properties": {
      "headline": {
        "type": "string",
        "title": "Headline",
        "gddType": "single-line",
        "default": "EBU announces OGraf v2 roadmap for 2027"
      }
    }
  }
}

Download the full Breaking News package

A real OGraf Graphics Definition v1 package. A compliant renderer reads the manifest and drives the lifecycle. MIT-licensed; drop it into any OGraf-compatible system.

breaking-news.ograf.json
Manifest — what a renderer reads (id, schema, lifecycle flags)
graphic.mjs
Web Component with load / play / update / stop / customAction / dispose
style.css
Stylesheet, loaded by graphic.mjs via a <link> tag
README.md
Usage notes

Download breaking-news.zipMIT · fonts included · drop on /check to validate

Deploy to a compliant OGraf renderer