Intermediate15 min

Build a full page quote.

An elegant full-screen quote card — the kind used for interview soundbites, motivational segments, or editorial intros. The text, divider, and attribution reveal in a staggered sequence for cinematic impact.

Full Page Quote — OGraf Template

1920 x 1080

Quote

Author

Role

The staggered reveal technique

The magic here is CSS transition delays. Each element starts hidden and below its final position. When the .visible class is added, they animate in sequence:

delay: 0.3s

Quote text

Fades up from below

delay: 0.4s

Divider line

Scales from center

delay: 0.5s

Attribution

Fades up last

The CSS — staggered transitions

style.css (key parts)CSS

.quote {
  position: absolute;   /* against the graphic's root, not the viewport */
  inset: 0;            /* fills the render area */
  opacity: 0;
}

.quote.visible { opacity: 1; transition: opacity 0.8s ease; }

/* Each child has its own delay */
.quote.visible .quote-text {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.3s,       /* 300ms delay */
              transform 0.8s ease-out 0.3s;
}

.quote.visible .quote-line {
  transform: scaleX(1);
  transition: transform 0.6s ease-out 0.4s;  /* 400ms delay */
}

.quote.visible .quote-attr {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.5s,         /* 500ms delay */
              transform 0.8s ease-out 0.5s;
}

Design tip

The background uses scale(1.1) as its starting state, then transitions to scale(1). This creates a subtle "camera settling" effect — the background gently zooms in as the quote appears. Cinematic feel with one line of CSS.

Typography choices

This template uses two fonts for contrast:

"The quote"

Instrument Serif — italic, large (48px). The editorial, elegant voice.

The Attribution

ROLE / TITLE

Inter — clean, modern sans-serif. The factual voice.

The playAction timing

Since the staggered animation takes longer than a simple slide, the playAction() promise waits 1200ms — enough for all three elements to finish their reveal before the renderer considers the graphic "ready."

graphic.mjsJavaScript

async playAction({ skipAnimation } = {}) {
  this._root.classList.remove('out');
  if (skipAnimation) {
    this._root.classList.add('visible');
    return { statusCode: 200, currentStep: 0 };
  }
  void this._root.offsetWidth;
  this._root.classList.add('visible');

  // Wait for all staggered animations to complete
  // Quote text: 0.3s delay + 0.8s duration = 1.1s
  // Attribution: 0.5s delay + 0.8s duration = 1.3s
  await new Promise(r => setTimeout(r, 1200));

  return { statusCode: 200, currentStep: 0 };
}

The manifest

quote.ograf.jsonJSON

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id": "dev.ograf.tutorial.quote",
  "version": "1.0.0",
  "name": "Full Page Quote",
  "description": "Cinematic full-screen quote card with staggered reveal of text, divider, and attribution. Tutorial from ograf.dev.",
  "author": {
    "name": "ograf.dev",
    "url": "https://ograf.dev"
  },
  "main": "graphic.mjs",
  "stepCount": 1,
  "supportsRealTime": true,
  "supportsNonRealTime": false,
  "schema": {
    "type": "object",
    "properties": {
      "text": {
        "type": "string",
        "title": "Quote",
        "gddType": "multi-line",
        "default": "Open graphics, open broadcast, open standards. That's the future."
      },
      "author": {
        "type": "string",
        "title": "Author",
        "gddType": "single-line",
        "default": "Demo Quote"
      },
      "role": {
        "type": "string",
        "title": "Role",
        "gddType": "single-line",
        "default": "Sample Credit"
      }
    }
  }
}

Download the full Full Page Quote 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.

quote.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 quote.zipMIT · fonts included · drop on /check to validate

Deploy to a compliant OGraf renderer

Quote complete.

You've learned staggered CSS transitions, full-screen layouts, typographic contrast, and timing coordination between CSS and JavaScript.

All tutorials Read the spec guide

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

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

Intermediate15 min

Breaking News

Full-screen urgent alert

Intermediate20 min

Weather Forecast

Conditions & 3-day outlook

Beginner10 min

Social Media Card

Post overlay with avatar

The CSS — staggered transitions

style.css (key parts)CSS

.quote {
  position: absolute;   /* against the graphic's root, not the viewport */
  inset: 0;            /* fills the render area */
  opacity: 0;
}

.quote.visible { opacity: 1; transition: opacity 0.8s ease; }

/* Each child has its own delay */
.quote.visible .quote-text {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.3s,       /* 300ms delay */
              transform 0.8s ease-out 0.3s;
}

.quote.visible .quote-line {
  transform: scaleX(1);
  transition: transform 0.6s ease-out 0.4s;  /* 400ms delay */
}

.quote.visible .quote-attr {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.5s,         /* 500ms delay */
              transform 0.8s ease-out 0.5s;
}

Design tip

The playAction timing

graphic.mjsJavaScript

async playAction({ skipAnimation } = {}) {
  this._root.classList.remove('out');
  if (skipAnimation) {
    this._root.classList.add('visible');
    return { statusCode: 200, currentStep: 0 };
  }
  void this._root.offsetWidth;
  this._root.classList.add('visible');

  // Wait for all staggered animations to complete
  // Quote text: 0.3s delay + 0.8s duration = 1.1s
  // Attribution: 0.5s delay + 0.8s duration = 1.3s
  await new Promise(r => setTimeout(r, 1200));

  return { statusCode: 200, currentStep: 0 };
}

The manifest

quote.ograf.jsonJSON

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id": "dev.ograf.tutorial.quote",
  "version": "1.0.0",
  "name": "Full Page Quote",
  "description": "Cinematic full-screen quote card with staggered reveal of text, divider, and attribution. Tutorial from ograf.dev.",
  "author": {
    "name": "ograf.dev",
    "url": "https://ograf.dev"
  },
  "main": "graphic.mjs",
  "stepCount": 1,
  "supportsRealTime": true,
  "supportsNonRealTime": false,
  "schema": {
    "type": "object",
    "properties": {
      "text": {
        "type": "string",
        "title": "Quote",
        "gddType": "multi-line",
        "default": "Open graphics, open broadcast, open standards. That's the future."
      },
      "author": {
        "type": "string",
        "title": "Author",
        "gddType": "single-line",
        "default": "Demo Quote"
      },
      "role": {
        "type": "string",
        "title": "Role",
        "gddType": "single-line",
        "default": "Sample Credit"
      }
    }
  }
}

Download the full Full Page Quote 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.

quote.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 quote.zipMIT · fonts included · drop on /check to validate

Deploy to a compliant OGraf renderer