Animated pull-quote cards for editorial video

An animated pull quote is an editorial graphic that takes a short excerpt — a sentence or two — and animates it on a card with the same compositional rules a magazine spread would use: an oversized opening quote-mark, a typewriter reveal of the line, and an attribution that lifts in from below. Done right, it sits inside a longer video like a paragraph sits inside an article: a beat of emphasis, then back to the flow.

This post is that template. Three elements, six seconds, every frame computed from e.detail.time.

What a pull quote is for

In print, the pull quote is the editor's job: pick a sentence that sells the article on first scan. The reader who's flipping pages stops on the pull quote, reads it, and decides whether to back up and read the piece. In video, the same function: the pull quote interrupts the flow of footage, gives the viewer a beat of stillness, and asks them to sit with a sentence.

The animation has to match that function. It can't be flashy — a pull quote that moves communicates urgency, which is the opposite of the intended pause. It has to feel like the line is being placed on the page rather than performed.

The oversized opening glyph

The opening " (or “) is set at 280px — five to six times the size of the body type — and bleeds slightly off the top-left of the card. It's colored in the signal red and held at 85% opacity, so it reads as texture rather than content. The reader's eye lands on it first, registers "this is a quote," and continues to the line without consciously reading the punctuation.

The glyph fades in over 0.8 seconds with a cubic ease-out and a small upward translate. No spin, no scale-up — the glyph is set in type and behaves like type.

.mark {
  position: absolute;
  left: 7%;
  top: -2%;
  font-size: 280px;
  line-height: 1;
  color: #ff3b1f;
  font-family: ui-serif, Georgia, serif;
  opacity: 0;
  transform: translateY(20px);
}

The word-by-word typewriter

The line reveals one word at a time, not one character. Character-by-character typewriters read as nostalgia — terminal screens, old films — which is the wrong register for editorial. Word-by-word reads as speech, like the line is being spoken into the room.

words.forEach((el, i) => {
  const slot = (typeEnd - typeStart) / words.length;
  const start = typeStart + i * slot;
  const wp = Math.min(1, Math.max(0, (t - start) / (slot * 1.6)));
  el.style.opacity = easeOut(wp);
  el.style.transform = `translateY(${(1 - easeOut(wp)) * 8}px)`;
});

The overlap factor — slot * 1.6 — means each word is still finishing its fade when the next one starts. That overlap is what turns a sequence of pops into a line. Without it, the words appear like flashcards; with it, they feel composed.

The duration scales with word count automatically: the same template handles a 9-word quote and a 22-word quote without retiming. That's important when you're rendering a season's worth of episodes off a manifest and don't want to babysit each one.

The attribution rise

The attribution sits below the line and lifts in from 18px below its resting position, fading from 0 to 1 over 0.8 seconds. The accent rule — a 36px black horizontal line to the left of the name — draws after the name arrives, over 0.8 seconds with an ease-in-out.

The draw-order matters. If the rule draws before the name appears, the rule looks like UI chrome — a divider waiting for content. If it draws after, it reads as an authorial flourish, a piece of punctuation under the line. Same pixels, different meaning.

Why this works as editorial

The pull quote borrows three habits from print typography:

1. The opening glyph is decoration, not punctuation — it's larger than the type, colored, and positioned off-axis. In print, this is called a drop quote; the eye uses it as a landmark.
2. The serif sets the register. A pull quote in sans-serif reads as marketing copy. A pull quote in serif reads as something worth considering. The convention is older than the web and isn't going to change.
3. The attribution is small. The line is the content; the name is the receipt. Setting the name as large as the quote reads as a tribute, not a quote.

A version that violates any of these rules — a sans-serif pull quote, a pull quote without the glyph, a pull quote where the attribution outweighs the line — looks like a Twitter screenshot, which is the visual genre to avoid if you're making editorial video. See animated quote cards for Twitter for the social-card version, which has different rules.

Render to MP4

hyperframes render input.html --out clip.mp4 --duration 6 --fps 30

For an editorial video pipeline, the pull quote is one of several cards rendered from the same source. A typical episode might have three pull quotes, each rendered as a standalone 6-second MP4 and dropped into the timeline at the appropriate beat.

{
"template": "pull-quote.html",
"duration": 6,
"fps": 30,
"width": 1920,
"height": 1080,
"outputs": [
  {
    "slug": "ep07-quote-1",
    "quote": "The best code is the code you didn't have to write.",
    "name": "Jamie Zawinski",
    "role": "Mosaic, Netscape, XEmacs"
  },
  {
    "slug": "ep07-quote-2",
    "quote": "If you wish to make an apple pie from scratch, you must first invent the universe.",
    "name": "Carl Sagan",
    "role": "Cosmos, 1980"
  }
]
}

Variable word count, fixed duration

A nice property of the word-slot scheme: the typewriter ranges across a fixed window (typeStart to typeEnd), and each word claims 1/N of that window plus an overlap. So a 9-word quote and a 22-word quote both finish the typewriter at the same t. The attribution rise and the held final frame happen at the same wall-clock moment in every render. Consistent pacing without per-clip tuning.

Common mistakes

Sans-serif body type. Pull quotes are serif. The genre rule predates the web.

Animating the quote itself (slide, fade, scale). The line should appear placed, not performed. The typewriter is the only motion the line gets.

Centering everything. Centered pull quotes look like motivational posters. Left-align the line, anchor the opening glyph to the top-left, and let the page breathe asymmetrically.

Logo on the card. No. The typography is the brand. See animated quote cards for Twitter for the longer argument.

For more on the rhythm of editorial motion see the three Ts of editorial motion and the broader pattern in kinetic typography for headlines.

FAQ

How long should the quoted line be?

Twelve to twenty-two words. Below twelve, the typewriter feels rushed; above twenty-two, the line wraps to four lines and the reader's eye loses the rhythm. If the source quote is longer, edit it (with an ellipsis) — pull quotes have always been edited.

Can I do a two-sentence pull quote?

Yes, but treat the period as a beat. Add a 0.4-second hold between sentences — pause the typewriter at the punctuation. That pause is the visual equivalent of a comma in speech.

What about the closing quote glyph?

Optional. The opening glyph is the landmark; the closing glyph is symmetrical decoration. Including it doubles the visual weight of the punctuation, which competes with the line. Editorial pull quotes typically omit it.

How do I match the typography to my brand?

Replace ui-serif with your brand's serif (a webfont, an OpenType file). Keep the size relationships — opening glyph at 5-6× the body, attribution at 25-30% the body, accent rule at 30-40px. The proportions matter more than the specific typeface.

Can I use this as a chyron during an interview cut?

Yes — render the same template at 1920×1080 with a transparent background (--alpha) and composite over the interview footage. The pull quote then acts as an overlay rather than a full-screen card. The animation timing stays identical.

Close

Pull quotes are an editorial convention that long predates video and translates cleanly into HTML. Build the template once, drive it with hf-seek, and every episode that wants a pull quote is a row in a manifest and a 30-second render. The result reads like a magazine spread, not a meme — which, for editorial video, is the entire point.

Start at the quickstart, browse the playground, or read the case for HTML-as-source in HTML is the next video codec.