The Logic of Motion: Building Data-Driven Video Templates with TypeScript

Video production has traditionally been a manual, creative endeavor. You open a timeline, drag clips, align keyframes, and hit export. But as developers building modern SaaS products, we are increasingly faced with a different challenge: how do we generate 10,000 unique videos for 10,000 different users without a human in the loop?

Whether it is a personalized "Year in Review" recap, a dynamic product ad based on inventory, or an automated social media report, the solution isn't a better video editor—it is a better logic engine. By treating video as code, we can transform video production into a deterministic data-processing task. This is where building Data-Driven Video Templates with TypeScript and VideoFlow becomes a superpower.

The Template Pattern: Moving Beyond Static Timelines

In a standard video editor, the timeline is absolute. In a code-driven environment like VideoFlow, the timeline is a function of your data. The core pattern for scalable video generation is to wrap your video construction logic in a reusable TypeScript function.

Instead of hardcoding layers, your function accepts a data object and maps those values directly to VideoFlow primitives. This allows you to scale from a single video to an entire content factory with zero manual intervention.

import VideoFlow from '@videoflow/core';

interface RecapData {
  userName: string;
  metricValue: number;
  themeColor: string;
  isPremium: boolean;
}

async function generateRecapVideo(data: RecapData) {
  const $ = new VideoFlow({ width: 1080, height: 1920, fps: 30 });

  // Logic-driven background selection
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.8 },
    { source: data.isPremium ? '/assets/gold-bg.jpg' : '/assets/standard-bg.jpg' }
  );

  // Data-driven text content
  const title = $.addText({
    text: `Great job, ${data.userName}!`,
    fontSize: 7,
    color: data.themeColor,
    fontWeight: 700,
    position: [0.5, 0.4],
  });

  title.fadeIn('800ms');
  $.wait('3s');
  
  return $.compile();
}

Conditional Layers and Dynamic Timing

one of the most difficult things to manage in traditional video automation is timing. If a user has three metrics to show, the video needs to be 15 seconds long. If they have five, it needs to be 25.

With the VideoFlow Builder API, timing is handled through flow primitives like $.wait() and $.parallel(). You don't have to calculate absolute frame numbers. You simply describe the sequence of events, and VideoFlow handles the math.

// Dynamic sequence based on an array of events
for (const event of userEvents) {
  const eventCard = $.addShape(
    { width: 80, height: 20, fill: '#ffffff', opacity: 0 },
    { shapeType: 'rectangle' }
  );
  
  // Stagger the entrance using logic
  eventCard.fadeIn('500ms');
  $.wait('2s');
  eventCard.fadeOut('500ms');
}

This approach ensures that your video remains frame-perfect regardless of the input data's size. By using parallel and wait, you can compose complex, overlapping animations that respond to the specific context of the user's data.

Animating with Data: The Power of GLSL Effects

Data-driven doesn't have to mean "boring." You can use numeric data to drive cinematic visual effects. VideoFlow ships with dozens of built-in GLSL effects that can be animated programmatically.

Imagine a financial app where the glow intensity of a chart increases based on the percentage of growth, or a fitness app where a motionBlur effect is applied to a runner's avatar based on their actual pace.

const stats = $.addText({ text: `${data.metricValue}%`, fontSize: 10 });

// Drive effect intensity with data
stats.set({
  effects: [
    { 
      effect: 'glow', 
      params: { strength: data.metricValue / 100, radius: 20 } 
    }
  ]
});

By mapping data ranges to effect parameters, you create a visual language that is intrinsically tied to the information being presented. This level of dynamic styling is what separates professional automated content from generic templates.

How VideoFlow Handles the Pipeline

The real magic of this workflow is the portability of the output. When you call $.compile(), VideoFlow produces a VideoJSON document. This is a resolution-agnostic, portable representation of your video that can be rendered anywhere.

• In the Browser: Use @videoflow/renderer-browser to let users export their own personalized videos locally, saving you massive cloud rendering costs.
• On the Server: Use @videoflow/renderer-server in a Node.js environment to batch-process thousands of videos in the background using headless Chromium.
• In your App: Use the Playground or the @videoflow/renderer-dom to show a live, frame-accurate preview as the user changes their data.

This "Three-Renderer Rule" ensures that the same logic you write once in TypeScript can power every stage of your video product's lifecycle.

Conclusion: Your Video, Your Logic

Moving to a logic-driven video pipeline is a fundamental shift in how we think about content. It moves video from the "manual asset" column to the "dynamic data" column. If you're currently struggling with fragile FFmpeg scripts or looking for a more portable Remotion alternative, it's time to start building with templates.

Ready to turn your data into motion? Start by exploring our automated SaaS user recap guide or head over to the VideoFlow GitHub to see the source code. The future of video isn't just recorded—it's computed.