How to Build Personalised SaaS Recap Videos with VideoFlow and JSON

Static dashboards are a staple of modern SaaS, but they often lack the "wow" factor that keeps users coming back. Whether it’s a "Year in Review" or a "Weekly Productivity Digest," users love seeing their achievements reflected back at them. However, building a scalable pipeline for personalised SaaS recap videos has historically been a nightmare of fragile FFmpeg scripts and expensive server-side rendering costs.

VideoFlow changes that. By treating videos as portable VideoJSON documents, you can generate cinematic, data-driven videos directly from your existing JSON data. Even better, you can offload the rendering cost entirely to the user's browser.

Why Personalised Video Matters for SaaS

Engagement isn't just about features; it's about the narrative. A personalised video that highlights a user's 20% growth in efficiency or their 50th successful deployment is far more shareable and memorable than a static table.

For engineering teams, the hurdle is usually technical:

1. Cost: Rendering thousands of unique MP4s on a server is expensive.
2. Complexity: FFmpeg isn't built for cinematic motion or easy templating.
3. Latency: Users don't want to wait minutes for a video to "process" in a queue.

VideoFlow solves these by providing a typed builder API and multiple official renderers that produce byte-for-byte identical output across environments.

Step 1: The Data-to-Video Pipeline

The first step is mapping your user metrics to visual elements. Because VideoFlow is a TypeScript toolkit, you can use your existing types and data fetching logic.

import VideoFlow from '@videoflow/core';

async function createRecapVideo(userData) {
  const $ = new VideoFlow({ 
    width: 1080, 
    height: 1920, // 9:16 for social sharing
    fps: 30,
    backgroundColor: '#0b0b1f' 
  });

  // Background image with a subtle zoom
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.4 },
    { source: userData.heroImage }
  );
  bg.animate({ scale: 1 }, { scale: 1.1 }, { duration: '10s', wait: false });

  // Add the user's name with a 'scrambleDecode' transition
  const title = $.addText(
    { 
      text: `Nice work, ${userData.name}!`, 
      fontSize: 8, 
      color: '#FF5A1F',
      position: [0.5, 0.4] 
    },
    { transitionIn: { transition: 'scrambleDecode', duration: '800ms' } }
  );

  $.wait('2s');
  
  // Highlight a specific metric
  const metric = $.addText({
    text: `${userData.deployCount} Deploys this week`,
    fontSize: 6,
    position: [0.5, 0.6],
    opacity: 0
  });
  metric.fadeIn('500ms');

  $.wait('3s');

  return await $.compile();
}

In this snippet, we use the @videoflow/core builder to define the timeline. Notice how we use normalized 0-1 coordinates for positioning and em units (1% of project width) for font sizes. This ensures your recap looks perfect whether it's rendered at 720p or 4K.

Step 2: Zero-Cost Rendering in the Browser

This is where VideoFlow shines. Instead of sending the data to a server, you can use @videoflow/renderer-browser to export the MP4 directly in the user's browser tab using WebCodecs.

import { renderVideo } from '@videoflow/renderer-browser';

const videoJson = await createRecapVideo(userStats);

// Export the MP4 without hitting your server
const blob = await renderVideo(videoJson, {
  onProgress: (p) => console.log(`Rendering: ${Math.round(p * 100)}%`)
});

const url = URL.createObjectURL(blob);
// Now the user can download or share their video immediately!

By choosing to render video in the browser, you eliminate your egress costs and server CPU bills. If you've previously explored automated SaaS user recap videos, you'll know that scaling this on the server usually requires complex GPU clusters. VideoFlow makes it a client-side feature.

Advanced Motion and Effects

To make the recap truly cinematic, you can stack any of the 42 GLSL effects or 27 transition presets included in the core. For example, adding a bloom effect to your metrics or a blurResolve transition to images takes seconds, not hours of GLSL coding.

const highlight = $.addShape(
  { 
    shapeType: 'rectangle', 
    width: 80, height: 20, 
    fill: '#FF5A1F',
    effects: [{ effect: 'bloom', params: { strength: 0.5 } }]
  },
  { transitionIn: { transition: 'blurResolve', duration: '600ms' } }
);

Getting Started

Building personalised SaaS recap videos shouldn't be a month-long infrastructure project. With VideoFlow, it’s just another piece of your frontend stack.

• Try it out: Head over to the VideoFlow Playground to experiment with the builder API live.
• Read the docs: Check out our Getting Started guide to install the core and renderers.
• Go Open Source: The core and all renderers are Apache-2.0. Star us on GitHub and join the community.

Whether you're building a fitness app recap or a B2B productivity report, VideoFlow gives you the tools to turn data into motion.