How to Build a Dynamic 'Year in Review' Video for Your SaaS Users

Every December, the internet fills with "Wrapped" summaries and "Year in Review" recaps. From Spotify to Duolingo, personalized data visualization has become the gold standard for user retention and social-media virality. For SaaS founders and engineering teams, the promise is clear: higher engagement, reduced churn, and a wave of user-generated marketing.

But for most developers, the technical hurdle is steep. Generating thousands—or millions—of unique MP4 files usually involves managing fragile FFmpeg shell scripts, expensive cloud-rendering APIs, or complex proprietary frameworks.

In this guide, we’ll show you how to build a high-performance Year in Review video pipeline using TypeScript and VideoFlow. We’ll turn raw user data into cinematic, personalized videos that render identically in the browser and on the server.

The Architecture of Personalized Video

The secret to scaling personalized video is treating video like data, not like a heavy binary asset. In VideoFlow, your video is defined as a portable VideoJSON document. This allows you to separate your creative logic (the "template") from your rendering engine.

Instead of "baking" a video and hoping it looks right, you build a fluent pipeline using @videoflow/core. This pipeline accepts a user’s specific metrics—like "Total Tasks Completed" or "Hours Saved"—and generates a unique timeline on the fly.

Step 1: Defining the Video Template

First, let's set up the core VideoFlow builder. We'll use a standard 1080p landscape canvas at 30fps. Notice how we use em units for sizing (where 1em = 1% of project width); this ensures our layout remains resolution-agnostic whether we're rendering for a mobile app or a 4K display.

import VideoFlow from '@videoflow/core';

async function createRecapVideo(userData) {
  const $ = new VideoFlow({
    name: `Year in Review - ${userData.name}`,
    width: 1920,
    height: 1080,
    fps: 30,
    backgroundColor: '#0b0e14'
  });

  // 1. Add a personalized background
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.4 },
    { source: userData.heroImage || 'https://assets.example.com/default-bg.jpg' }
  );
  
  // Subtle zoom-in animation over 10 seconds
  bg.animate({ scale: 1 }, { scale: 1.1 }, { duration: '10s', wait: false });

  // 2. Add the User's Name with a cinematic entrance
  const title = $.addText({
    text: `Hey ${userData.firstName},`,
    fontSize: 8,
    color: '#FF5A1F',
    fontWeight: 700,
    position: [0.5, 0.4]
  }, {
    transitionIn: { transition: 'blurResolve', duration: '800ms' }
  });

  $.wait('1.5s');
  title.fadeOut('400ms');

  // 3. Highlight a Key Metric
  const metricLabel = $.addText({
    text: 'You crushed it this year!',
    fontSize: 5,
    color: '#ffffff',
    position: [0.5, 0.3]
  });
  metricLabel.fadeIn('500ms');

  const count = $.addText({
    text: `${userData.totalActions}`,
    fontSize: 15,
    color: '#FF5A1F',
    fontWeight: 900,
    position: [0.5, 0.55]
  }, {
    transitionIn: { transition: 'overshootPop', duration: '600ms' }
  });

  $.wait('3s');

  return $.compile();
}

Step 2: Adding Cinematic Polish

Static text on a background isn't enough to capture attention. VideoFlow ships with 27 transition presets and 42 GLSL effects that allow you to stack professional-grade visuals with just a few lines of code. Unlike other tools that require you to write custom shaders from scratch, VideoFlow provides high-level primitives like bloom, vhsDistortion, and chromaticAberration out of the box.

In our recap video, we can add a 'glow' effect to the user's metrics to make them feel more premium:

$.addShape({
  width: 40,
  height: 20,
  fill: '#FF5A1F',
  opacity: 0.2,
  effects: [
    { effect: 'glow', params: { strength: 0.8, radius: 2 } },
    { effect: 'gaussianBlur', params: { radius: 1 } }
  ]
}, {
  shapeType: 'rectangle',
  transitionIn: { transition: 'zoom', duration: '500ms' }
});

By leveraging the builder API, you can create complex, multi-layered scenes that feel like they were edited in After Effects, but are entirely driven by your database.

Step 3: Rendering at Scale

Once you have your VideoJSON, the next step is rendering it to an MP4. This is where VideoFlow’s "three-renderer rule" becomes a superpower.

1. Live Preview: Use @videoflow/renderer-dom to show the user a frame-accurate, 60fps preview of their video directly in your React dashboard. This is much faster and cheaper than generating a video for every small change.
2. Browser Export: For individual users, use @videoflow/renderer-browser. This leverages WebCodecs to export the MP4 directly in the user's browser tab. It costs you $0 in server fees.
3. Server Batching: For scheduled email campaigns or high-volume batch jobs, use @videoflow/renderer-server. It runs in Node.js and uses headless Chromium to produce byte-for-byte identical output to the browser renderer.

If you've previously built automated SaaS onboarding videos, you'll recognize this pattern. The same code that powers your onboarding can be reused for your Year in Review recaps, ensuring visual consistency across the entire user lifecycle.

Why VideoFlow for SaaS Recaps?

Compared to alternatives like Remotion, VideoFlow is built for portability. Because the output is a standard JSON document, you don't need a React runtime to render the final video. You can store your templates in Postgres, diff them in Git, and generate them from any language that can produce JSON (though our TypeScript builder is the most powerful way to author them).

Furthermore, VideoFlow is Apache-2.0 open source. You can embed the core and the renderers into your commercial products without worrying about proprietary license fees. For teams that want to go further, the React Video Editor provides a drop-in UI component that lets your users edit their own recaps before exporting.

Get Started

Ready to build your first Year in Review pipeline?

• Experiment: Head over to the Playground to build a scene interactively.
• Read the Docs: Check out our transitions guide to see the full catalog of entry patterns.
• Fork the Code: Explore the GitHub repository and join the community.

Personalized video is no longer a luxury reserved for the giants. With VideoFlow, you can ship a cinematic "Year in Review" experience in a single afternoon.