Crea una alerta de última hora.

// In: the staggered reveal ends when the accent line lands (0.6s delay + 0.6s
// transition). Hold: time on air. Out: the 0.6s fade.
const IN_MS = 1200;

const HOLD_MS = 3500;

const OUT_MS = 600;

// Each action takes the next revision number. Anything that finishes after a
// newer action has started checks it and backs off, so play → stop → play
// sent without waiting ends on air instead of hidden by the stale stop.
async playAction({ skipAnimation } = {}) {
  this._initDom();
  const rev = ++this._rev;
  this._root.classList.remove('out');
  if (skipAnimation) {
    this._root.classList.add('instant');
  } else {
    this._root.classList.remove('instant');
    void this._root.offsetWidth;
  }
  this._root.classList.add('visible');

  // stepCount is 0: the graphic runs start → end on its own. The promise
  // resolves once it is on screen, so the renderer is free for the next
  // action; the hold and the exit carry on in the background.
  if (!skipAnimation) await sleep(IN_MS);
  this._autoDismiss(rev, skipAnimation);
  return { statusCode: 200, currentStep: undefined };
}

async _autoDismiss(rev, skipAnimation) {
  await sleep(HOLD_MS);
  if (rev !== this._rev) return;
  if (skipAnimation) {
    this._root.classList.remove('visible', 'out');
    return;
  }
  this._root.classList.add('out');
  await sleep(OUT_MS);
  if (rev === this._rev) this._root.classList.remove('visible', 'out');
}

async stopAction({ skipAnimation } = {}) {
  this._initDom();
  const rev = ++this._rev;
  if (skipAnimation) {
    this._root.classList.add('instant');
    this._root.classList.remove('visible', 'out');
    return { statusCode: 200 };
  }
  this._root.classList.remove('instant');
  this._root.classList.add('out');
  await sleep(600);
  if (rev === this._rev) this._root.classList.remove('visible', 'out');
  return { statusCode: 200 };
}

// Every OGraf graphic must expose customAction, even without any declared.
// The renderer passes { id, payload, skipAnimation }; an unknown id is a 4xx.
async customAction({ id } = {}) {
  return { statusCode: 404, statusMessage: `Unknown custom action: ${id ?? ''}` };
}

.breaking.visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.breaking.visible .breaking-badge {
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.breaking.visible .breaking-headline {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
    opacity 0.5s ease 0.4s;
}

.breaking.visible .breaking-line {
  transform: scaleX(1);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

{
  "$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,
  "thumbnails": [
    {
      "file": "thumbnail.webp",
      "resolution": {
        "width": 1920,
        "height": 1080
      }
    }
  ],
  "schema": {
    "type": "object",
    "properties": {
      "headline": {
        "type": "string",
        "title": "Headline",
        "gddType": "single-line",
        "default": "City council approves new riverside transit line"
      }
    }
  }
}