Beyond Static Images: Automating Open Graph Videos for Your Blog

Static preview images are the industry standard for social sharing, but in a crowded feed, they often blend into the background. If you want your content to stand out, you need motion. Automated open graph videos—short, dynamic MP4s that preview your article's title, branding, and key takeaways—can significantly boost your click-through rates.

In this tutorial, we’ll walk through how to build a programmatic video pipeline that turns your blog metadata into cinematic preview videos using VideoFlow. We'll use the core builder API to design a template and @videoflow/renderer-server to automate the export in a headless environment.

The Anatomy of an Open Graph Video

An effective social preview video doesn't need to be complex. It just needs to be clear and visually engaging. For most platforms, a 1200x630 resolution (the standard OG image ratio) works perfectly. We’ll aim for a 5-second loop that includes:

1. A dynamic background: A subtle zoom or blur effect on a hero image.
2. Typography: Your post title appearing with a smooth transition.
3. Branding: A logo or accent shape to tie it all together.

Building the Template

With VideoFlow, we don't deal with manual frame math. We define our scene using a fluent, sequential API. Here is a minimal template for an OG video:

import VideoFlow from '@videoflow/core';

async function generateOGVideo(postData) {
  const $ = new VideoFlow({
    width: 1200,
    height: 630,
    fps: 30,
    backgroundColor: '#0b0b1f'
  });

  // 1. Add a background image with a subtle zoom
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.4 },
    { source: postData.coverImage }
  );
  
  bg.animate(
    { scale: 1 },
    { scale: 1.1 },
    { duration: '5s', easing: 'linear', wait: false }
  );

  // 2. Add the title with a 'blurResolve' transition
  const title = $.addText(
    {
      text: postData.title,
      fontSize: 6,
      color: '#FFFFFF',
      fontWeight: 700,
      position: [0.5, 0.45],
    },
    {
      transitionIn: { transition: 'blurResolve', duration: '800ms' }
    }
  );

  // 3. Add a branded accent line
  const accent = $.addShape(
    {
      width: 40,
      height: 0.5,
      fill: '#FF5A1F',
      position: [0.5, 0.6]
    },
    {
      shapeType: 'rectangle',
      transitionIn: { transition: 'slideUp', duration: '600ms' }
    }
  );

  $.wait('4s');
  
  return await $.compile();
}

In this snippet, we use wait: false on the background animation so it runs in the background while the rest of the flow proceeds. This is a core concept explained further in our guide on parallel and wait.

Automating the Render

Once you have your VideoJSON from $.compile(), you need to turn it into an MP4. While you can do this in the browser using the Playground, automation requires a server-side solution.

By using @videoflow/renderer-server, you can run this in a GitHub Action, a Lambda function, or your own Node.js backend. The best part? It uses headless Chromium and WebCodecs to render, meaning you don't even need FFmpeg installed for the default pipeline.

import '@videoflow/renderer-server';

const json = await generateOGVideo({
  title: 'Automating Open Graph Videos',
  coverImage: 'https://example.com/blog-hero.jpg'
});

// The renderVideo method automatically uses the server renderer
await $.renderVideo({
  outputType: 'file',
  output: './public/og-previews/my-post.mp4',
  verbose: true
});

For a deeper dive into how this works without external dependencies, check out our guide on rendering MP4s in Node without FFmpeg.

Why VideoFlow for Social Automation?

Automating open graph videos presents a few unique challenges that VideoFlow is specifically designed to solve:

• Resolution Agnostic: Because we use em units (1% of project width) and normalized coordinates, you can render the same JSON at 1200x630 for Twitter, 1080x1920 for TikTok, or 1080x1080 for Instagram without changing your code.
• Portable JSON: Your video templates are just data. You can store them in a database, version control them, and generate them from any language that speaks JSON.
• Cinematic Defaults: With 27 built-in transitions like blurResolve and lightSweepReveal, your automated videos will look like they were hand-crafted in After Effects.

Get Started

Ready to move beyond static images? You can start experimenting with your own templates right now in the VideoFlow Playground. If you're building a commercial platform and need a UI for your users to customize these videos, take a look at our React Video Editor.

For the full API reference and more examples, head over to the official documentation or explore the source on GitHub.