Animated quote cards for Twitter (and other platforms)

A quote card is the easiest piece of social content to make and the easiest to make badly. A handful of design rules separate the version that gets shared from the version that looks like a Canva default. Once you have the rules pinned down, the production path is one HTML file — and the animated version is the same HTML rendered as render(t).

The five rules

1. One quote per card. Not two. Not a sentence with a follow-up. One quote, one attribution.
2. Serif typeface for the quote. A serif reads as "a thought worth thinking." A sans-serif reads as "marketing."
3. The opening quote glyph is huge. A 200-300pt opening " (or ") in a tinted color, anchoring the top-left. The eye lands on it first, then reads the line.
4. The attribution is small. 14-16pt, tracked-out, all caps. Below the quote, never above.
5. One color per quote. A subtle accent — a brand tint on the opening glyph, a thin rule under the attribution. No gradients, no shadows.

That's the whole brief.

The HTML version

<style>
  body { background: #f6f5f1; color: #0a0a0a; display: grid; place-items: center; height: 100vh; }
  .card { max-width: 720px; padding: 80px 88px; position: relative; font-family: ui-serif, Georgia, serif; }
  .open { position: absolute; left: 32px; top: -20px; font-size: 240px; color: #ff3b1f; opacity: .25; line-height: 1; }
  .q { font-size: 48px; line-height: 1.25; letter-spacing: -.01em; }
  .by { margin-top: 40px; font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .25em; text-transform: uppercase; color: #6b6862; }
  .rule { display: inline-block; width: 28px; height: 1px; background: #0a0a0a; vertical-align: middle; margin-right: 12px; }
</style>
<div class="card">
  <span class="open">"</span>
  <div class="q">Make new mistakes. Make glorious, amazing mistakes. Make mistakes nobody's ever made before.</div>
  <div class="by"><span class="rule"></span>Neil Gaiman</div>
</div>

Forty lines. The animated version adds a render(t) that ranges the quote in via a clip-reveal:

function render(t) {
  const u = ease(t / 0.9);
  quoteEl.style.transform = `translateY(${(1 - u) * 30}px)`;
  quoteEl.style.opacity = u;
  byEl.style.opacity = ease((t - 0.4) / 0.8);
}

The two outputs

From one source:

• Still PNG (1200×630) for Twitter, LinkedIn, Bluesky og:image.
• Animated MP4 (1200×630, 4 seconds) for Discord, Slack, iMessage og:video.

The still is the last frame of the animation. They never drift.

For vertical Stories (1080×1920), the same template re-renders at the new aspect with the quote re-wrapped — the design rules don't change.

Templating at scale

For a long-running quote series (one a week for a year), the CSV is:

slug,quote,author,accent_color
neil-mistakes,"Make new mistakes...","Neil Gaiman","#ff3b1f"
ursula-rules,"Rules change in the act of obeying them","Ursula K. Le Guin","#1f6f8a"
...

Render 52 cards in a few seconds. Schedule one per week. Cost: zero, after the template exists.

The pitfall to dodge

Don't add a brand mark to every quote card. The card is the brand mark — the typeface, the serif, the rule under the attribution. Adding a logo on top reads as advertising. The card is more credible without the logo because it doesn't feel like it's selling.

Save the logo for the third or fourth card the viewer sees from your account. By then they know it's your aesthetic without the logo confirming it.

For the kinetic-type variant (animated reveal patterns) see kinetic typography for headlines. For the broader OG-card pattern see animated Open Graph images.

A close

A quote card is the lowest-effort, highest-ROI piece of social content you can ship. The trick is to stop iterating on the design every week and let one template carry a hundred quotes. The repetition is what makes the account recognizable.