How to Automate Sports Highlights with TypeScript

Sports media is a race against the clock. When a game-winning goal happens, the window for viral engagement is measured in minutes, not hours. But manual editing—trimming clips, adding score overlays, and applying cinematic transitions—is a bottleneck that doesn't scale.

If you are building a sports platform or an automated content factory, you need a way to turn raw data into polished video without a human in the loop. In this tutorial, we’ll show you how to build a pipeline for automated sports highlights using TypeScript and VideoFlow.

Why Programmatic Video for Sports?

Traditional video pipelines often rely on fragile FFmpeg shell scripts or expensive proprietary APIs. VideoFlow offers a different path: treating video as portable JSON that can be rendered identically on a server, in a browser, or as a live preview. This approach allows you to:

• Scale effortlessly: Generate thousands of personalized highlight reels for every fan.
• Maintain Brand Consistency: Use code to ensure every video follows your exact design system.
• Reduce Costs: Render in the user's browser with @videoflow/renderer-browser to eliminate server overhead.

Setting Up the Highlight Builder

First, let's initialize a new VideoFlow project. We’ll use a standard 1080p landscape canvas at 30fps.

import VideoFlow from '@videoflow/core';

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

Handling Dynamic Clips

In a sports context, your "source" footage is often a series of timestamped clips from a larger broadcast. VideoFlow’s VideoLayer makes it easy to precisely slice these clips using sourceStart and sourceDuration in the settings object.

// Add a highlight clip from a remote source
const highlight = $.addVideo(
  { fit: 'cover' },
  {
    source: 'https://cdn.example.com/match-raw.mp4',
    sourceStart: '12m 45s',
    sourceDuration: '5s',
    transitionIn: { transition: 'blurResolve', duration: '600ms' }
  }
);

$.wait('5s');

Adding the Score Overlay

To make the highlights informative, we need a dynamic score overlay. We can use $.group to bundle a background shape and text into a single unit that we can animate together.

$.group({ position: [0.5, 0.85], opacity: 0.9 }, {}, ($group) => {
  // Background card
  $group.addShape(
    { width: 40, height: 10, fill: '#FF5A1F', cornerRadius: 1 },
    { shapeType: 'rectangle' }
  );

  // Team Scores
  $group.addText({
    text: 'TEAM A 2 - 1 TEAM B',
    fontSize: 4,
    color: '#ffffff',
    fontWeight: 700,
    position: [0.5, 0.5]
  });
});

Applying Cinematic Flair

Raw clips can feel jarring without professional motion graphics. VideoFlow ships with 27 transition presets and 42 GLSL effects out of the box. For a high-energy sports feel, we can stack a glow effect and use a glitchResolve transition.

const title = $.addText({
  text: 'GOAL!',
  fontSize: 12,
  color: '#FF5A1F',
  effects: [{ effect: 'glow', params: { strength: 0.8 } }]
}, {
  transitionIn: { transition: 'glitchResolve', duration: '400ms' }
});

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

Rendering at Scale

Once your builder logic is ready, you can compile it to VideoJSON. This JSON is the source of truth that any VideoFlow renderer can understand. If you're building a backend service, you'll use @videoflow/renderer-server to generate the final MP4.

import '@videoflow/renderer-server';

await $.renderVideo({
  outputType: 'file',
  output: './highlights/goal-01.mp4'
});

How VideoFlow Powers Your Pipeline

VideoFlow is designed for developers who need more flexibility than a simple API but more structure than raw FFmpeg.

• Open Source: The core and all renderers are Apache-2.0. No hidden costs for your core infrastructure.
• JSON Portability: Store your video edits in a database, version control them, and render them anywhere.
• Performance: Built on WebCodecs, our renderers avoid the overhead of traditional re-encoding where possible.

Whether you are building a YouTube Shorts factory or a complex sports analytics dashboard, VideoFlow provides the primitives to build it with code.

Ready to start building? Head over to the VideoFlow Playground to experiment with the API in your browser, or dive into our Getting Started guide on GitHub.

Check out the VideoFlow GitHub repository to see the source code and join our community of developers building the future of programmatic video.