How to Build a 'Spotify Wrapped' Style Video Recap for Your SaaS

Personalization is the ultimate retention engine, and nothing captures a user's attention quite like a cinematic summary of their own achievements. In this SaaS video recap tutorial, we'll show you how to build a high-production "Spotify Wrapped" style summary using VideoFlow and a few lines of TypeScript.

Why Automated Video Personalization Matters

For SaaS companies, the "Year in Review" or "Monthly Digest" is a critical touchpoint. Static emails are easily ignored, but a personalized video recap that visualizes user data—lines of code written, tasks completed, or revenue generated—is inherently shareable.

Traditionally, generating thousands of unique MP4s required complex FFmpeg clusters or expensive proprietary APIs. With VideoFlow, you can transform raw JSON data into professional-grade video content with the same ease as rendering a web page. By treating video as code, you gain the ability to iterate on your motion design without the overhead of traditional video production.

Step 1: The Architecture of a Data-Driven Video

The core strength of VideoFlow is its resolution-agnostic builder API. Because it uses em units (where 1em = 1% of project width), you can design a layout once and render it at 1080p for social sharing or 4K for high-fidelity displays without changing a single line of code.

To start, we construct our project and define the canvas:

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({
  width: 1080,
  height: 1920, // Vertical format for mobile sharing
  fps: 30,
  backgroundColor: '#0a0a0a',
});

Step 2: Building the Scene with Layers and Transitions

A great recap needs cinematic flair. VideoFlow ships with 27 transition presets and 42 GLSL effects out of the box. For a "Wrapped" style feel, we'll use blurResolve for text entries and zoom for data highlights.

// Add a background image with a subtle blur effect
const bg = $.addImage(
  { fit: 'cover', opacity: 0.4, filterBlur: 0.2 },
  { source: 'https://assets.yoursaas.com/recap-bg.jpg' }
);

// Animate the background blur over time
bg.animate(
  { filterBlur: 0.2 },
  { filterBlur: 0 },
  { duration: '5s', wait: false }
);

// Create a hero title with a cinematic transition
const title = $.addText({
  text: "Your Year in Code",
  fontSize: 8,
  color: '#FF5A1F',
  fontWeight: 800,
  position: [0.5, 0.4],
}, {
  transitionIn: { transition: 'blurResolve', duration: '800ms' }
});

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

Step 3: Dynamic Data Injection

This is where the programmatic video magic happens. Instead of hardcoding values, we loop through the user's data to generate layers dynamically. This pattern is much more robust than the animated dashboards approach used in simpler visualizations.

const userData = { commits: 1240, languages: ['TypeScript', 'Rust', 'Go'] };

const stats = $.addText({
  text: `${userData.commits} Commits`,
  fontSize: 12,
  color: '#ffffff',
  position: [0.5, 0.5],
}, {
  transitionIn: { transition: 'overshootPop', duration: '600ms' }
});

$.wait('3s');
stats.remove();

Step 4: Rendering at Scale

Once your template is ready, you need to decide where to render. VideoFlow offers three official renderers to fit any pipeline:

1. @videoflow/renderer-browser: Perfect for "Save to Device" buttons. It exports MP4s directly in the user's browser using WebCodecs, costing you zero server dollars.
2. @videoflow/renderer-server: Ideal for batch processing. This Node.js renderer uses headless Chromium to generate videos in the background.
3. @videoflow/renderer-dom: Provides a frame-accurate 60fps live preview, allowing users to scrub through their recap before exporting.

For a massive year-end campaign, you might use the server renderer to pre-generate videos or the browser renderer to let users generate them on-demand. You can test these different rendering paths in the VideoFlow Playground.

How VideoFlow Handles SaaS Personalization

VideoFlow is uniquely suited for automated video generation because it decouples the scene description (JSON) from the rendering engine. This means your backend can emit a VideoJSON document, and you can render it anywhere—from a serverless function to a mobile browser.

Unlike alternatives that require a proprietary React runtime or complex FFmpeg scripting, VideoFlow is an Apache-2.0 open-source toolkit. It gives you the cinematic primitives (like bloom, chromaticAberration, and glitchResolve) you need to make data look beautiful without the math-heavy lifting.

Build Your Own Recap Factory

Ready to turn your user data into cinematic stories? You can start building today by exploring our examples gallery or diving into the documentation.

If you're building a commercial product and need a drop-in editor for your users, check out the React Video Editor—it's free for individuals and small teams.

Join the community and help us build the future of video-as-code on GitHub.