Beyond Static Images: Generating Dynamic Social Share Videos from Metadata

When a user shares your link on X, LinkedIn, or Slack, the Open Graph (OG) image is often the only thing standing between a scroll-past and a click. But in a feed saturated with static rectangles, even the most polished image can start to feel like wallpaper.

If you want to truly command attention, you need movement. You need dynamic social share videos.

In this guide, we’ll look at how to move beyond static OG tags by building an automated pipeline that turns page metadata into cinematic, 10-second MP4 previews using VideoFlow.

Why Video Matters for Social Previews

Static OG images are difficult to maintain at scale. You either settle for a generic default or build complex Canvas-based generation scripts that produce flat, uninspiring assets.

Dynamic video previews change the math. They allow you to:

1. Highlight Content: Animate the actual headline, author avatar, and read-time directly into the frame.
2. Brand Consistency: Use GLSL effects and transitions that match your product’s aesthetic.
3. Higher CTR: Social algorithms and human eyes are naturally drawn to motion in the feed.

By treating your social previews as code, you can generate a unique, high-quality video for every single post on your site without ever opening After Effects.

The Architecture: Metadata to MP4

The workflow is straightforward: your server-side logic extracts metadata (like from a CMS or a Markdown file), passes it into the VideoFlow builder API, and renders a portable VideoJSON document. That document is then sent to a renderer to produce the final file.

Unlike other solutions that require a heavy React runtime, VideoFlow’s core is a lightweight TypeScript toolkit. This makes it perfect for serverless functions or background workers where memory and startup time are critical.

Building the Preview Component

Let’s build a "Social Card" template. We’ll use a background image, a semi-transparent overlay, and animated text for the title.

import VideoFlow from '@videoflow/core';

export async function generateSocialVideo(data) {
  const $ = new VideoFlow({
    width: 1200,
    height: 630, // Standard OG aspect ratio
    fps: 30,
    backgroundColor: '#0f172a',
  });

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

  // 2. Add a branding shape (the VideoFlow orange accent)
  $.addShape(
    {
      width: 0.5, height: 100, // 0.5% width, full height
      fill: '#FF5A1F',
      position: [0.05, 0.5]
    },
    { shapeType: 'rectangle' }
  ).fadeIn('600ms');

  // 3. Add the Title with a reveal transition
  const title = $.addText(
    {
      text: data.title,
      fontSize: 6,
      color: '#ffffff',
      fontWeight: 800,
      position: [0.1, 0.4],
      effects: [{ effect: 'glow', params: { strength: 0.5 } }]
    },
    {
      transitionIn: { transition: 'blurResolve', duration: '800ms' }
    }
  );

  $.wait('4s');
  title.fadeOut('500ms');

  return await $.compile();
}

In this snippet, we’re using blurResolve, one of the 27 built-in transition presets, to give the text a premium feel. Notice the use of wait: false on the background animation—this allows the zoom to run in the background while the rest of the timeline advances.

Server-Side Rendering without FFmpeg

One of the biggest hurdles in automated video is managing FFmpeg dependencies on the server. VideoFlow simplifies this. Using @videoflow/renderer-server, you can render videos inside a headless Chromium instance using WebCodecs. This means no manual FFmpeg installs are required for standard MP4 exports.

import '@videoflow/renderer-server';

const json = await generateSocialVideo({
  title: '10 Ways to Scale Your SaaS',
  coverImage: 'https://assets.site.com/post-1.jpg'
});

// Render directly to a file or buffer
await $.renderVideo({
  outputType: 'file',
  output: './social-preview.mp4',
});

For more details on setting up your environment, check out our renderers guide.

Why VideoFlow for Social Automation?

If you've looked into Remotion alternatives, you'll know that licensing and portability are often the main friction points.

VideoFlow was built to solve this:

• Apache-2.0: The core and all renderers are truly open source. You can scale your automation factory without worrying about per-seat or per-render costs.
• JSON Portability: Because scenes are compiled to VideoJSON, you can store them in a database, diff them in Git, or generate them from any language that speaks JSON.
• Cinematic Primitives: You get 42 GLSL effects (like bloom and chromaticAberration) out of the box, so your "automated" videos don't look like they came from a template.

Start Automating

Moving from static images to dynamic videos is the single biggest upgrade you can give your site's social presence. Whether you're building a YouTube Shorts factory or just want your blog posts to pop on LinkedIn, the tools are ready.

Ready to see it in action? Head over to the VideoFlow Playground to experiment with transitions in real-time, or dive into the Docs to start building your own pipeline. If you want to contribute or see how the renderers work under the hood, visit the GitHub repository.

Stop shipping static links. Start shipping motion.