Dynamic Lower Thirds: Animating Professional Overlays with Code

When you're building an automated video pipeline—whether it's for a SaaS recap, a news bot, or a personalized sales video—the "professional" feel often comes down to the details. One of the most critical details is the lower third: that sleek overlay at the bottom of the screen that introduces a speaker, labels a location, or provides context.

Traditionally, these are built in After Effects and exported as heavy transparent MOVs. But in a world of programmatic video, we need something better. We need Dynamic Lower Thirds that are lightweight, diffable, and generated on-the-fly from data.

In this tutorial, we'll use VideoFlow to build a professional, animated lower third using nothing but TypeScript.

Why Programmatic Overlays Matter

If you are generating 10,000 personalized videos, you cannot have a human editor swapping names in After Effects. You need a system where the "introduction" is just a JSON object. By treating your overlays as code, you gain:

1. Infinite Scalability: Render thousands of variations without manual intervention.
2. Resolution Independence: Your overlays look just as sharp at 4K as they do at 720p because they are rendered as vectors.
3. Real-time Integration: Pull names, titles, and even brand colors directly from your database or an LLM prompt.

Step 1: Building the Base Shape

In VideoFlow, we use $.addShape to create the background for our lower third. Unlike CSS where you might wrestle with absolute positioning, VideoFlow uses a normalized 0–1 coordinate system. This ensures your overlay stays in the same relative spot regardless of the video's aspect ratio.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({ width: 1920, height: 1080, fps: 30 });

// Add a background bar for the lower third
const bar = $.addShape(
  {
    width: 40,               // 40% of project width
    height: 8,               // 8% of project width
    fill: '#FF5A1F',         // VideoFlow orange
    opacity: 0.9,
    position: [0.25, 0.85],  // Bottom-left quadrant
    cornerRadius: 0.5,       // Rounded edges
  },
  {
    shapeType: 'rectangle',
    transitionIn: { transition: 'slideRight', duration: '600ms' },
  }
);

By using transitionIn: { transition: 'slideRight' }, we've already handled the "entrance" animation without writing a single keyframe.

Step 2: Adding Dynamic Text

Next, we layer the introduction text on top. The fontSize in VideoFlow is in em units, where 1em equals 1% of the project width. This makes your typography perfectly responsive.

const name = $.addText({
  text: 'ALEX RIVERA',
  fontSize: 3.5,
  fontWeight: 700,
  color: '#ffffff',
  position: [0.25, 0.835], // Centered vertically on the bar
});

const title = $.addText({
  text: 'Lead Solutions Architect',
  fontSize: 1.8,
  color: '#ffffff',
  opacity: 0.8,
  position: [0.25, 0.87],
});

name.fadeIn('800ms');
title.fadeIn('1000ms');

Notice how we use .fadeIn() on the layer instances. This advances the internal flow pointer by default, ensuring the text appears just after the bar starts its slide.

Step 3: Animating the Exit

A professional overlay doesn't just vanish; it exits gracefully. We can use transitionOut or the .animate() method for more control. Let's make the entire group fade and slide out after 4 seconds.

$.wait('4s');

// We can animate properties directly
bar.animate(
  { position: [0.25, 0.85], opacity: 0.9 },
  { position: [0.1, 0.85], opacity: 0 },
  { duration: '500ms' }
);

name.fadeOut('400ms', 'easeIn', false); // wait: false so they happen together
title.fadeOut('400ms', 'easeIn', true);

How VideoFlow Handles Overlays

VideoFlow's architecture is designed for this exact use case. While other tools might require you to re-render the entire video just to change a name, the VideoFlow Core produces a portable VideoJSON document.

This document can be sent to any of the three official renderers:

• @videoflow/renderer-browser: Perfect for letting users preview their dynamic lower thirds in real-time or exporting them as MP4s directly in their browser.
• @videoflow/renderer-server: Ideal for high-volume batch processing in a Node.js environment.
• @videoflow/renderer-dom: Provides a frame-accurate 60fps preview inside your React or Vue dashboard.

Unlike chaining FFmpeg shell scripts, which is notoriously fragile when it comes to text wrapping and complex easing, VideoFlow gives you a typed, predictable API. If you're coming from other frameworks, check out our guide on Remotion alternatives to see how our JSON-first approach simplifies automation.

Conclusion

Building dynamic lower thirds shouldn't feel like a chore. By combining simple geometric shapes with powerful typography and built-in transitions, you can create professional-grade overlays that scale with your data.

Ready to see it in action? Head over to the VideoFlow Playground to tweak this example live, or dive into our full documentation to explore the 27 other transition presets available. For more advanced visual tricks, don't miss our guide on Mastering GLSL Effects.

Happy rendering!

Find the source code and contribute at github.com/ybouane/VideoFlow.