Animated Infographics as Code: Building a Reusable Data-Viz Library

Creating animated charts for SaaS recaps, weekly reports, or marketing explainers usually involves a tedious dance between a designer and a developer—or worse, a mountain of fragile FFmpeg scripts. But what if you could treat your charts like components? In this guide, we'll explore how to build animated infographics as code, turning raw data into cinematic video using VideoFlow.

By leveraging the @videoflow/core builder API, we can create a reusable data-viz library that renders identically across the browser and server. Whether you are building a "Year in Review" feature for your users or an automated social media dashboard, the "infographics as code" approach ensures your videos are as dynamic as your data.

The Building Blocks: ShapeLayer and GroupLayer

VideoFlow's ShapeLayer is the engine for vector graphics. Unlike raster images, shapes in VideoFlow are resolution-agnostic; they use em units (where 1em = 1% of project width) to ensure that a bar chart looks just as crisp at 4K as it does at 720p.

To build a reusable library, we rely on the GroupLayer. A group allows you to nest multiple layers—like a bar, its label, and a value indicator—and treat them as a single entity. This is critical for data-viz because it lets you animate the entire group (e.g., a fade-in or a slide-up) while maintaining independent animations for the internal components.

Building a Reusable Bar Component

Let’s start by building a simple function that creates an animated bar. We'll use VideoFlow's parallel and wait primitives to coordinate the entrance of the bar with its value label.

import VideoFlow from '@videoflow/core';

function createAnimatedBar($, { label, value, x, color }) {
  return $.group(
    { position: [x, 0.8] }, 
    {}, 
    ($g) => {
      // The bar itself
      const bar = $g.addShape(
        { 
          width: 8, 
          height: 0, // Start at zero height
          fill: color, 
          cornerRadius: 0.5 
        },
        { shapeType: 'rectangle' }
      );

      // Animate the height from 0 to the target value
      bar.animate(
        { height: 0 },
        { height: value },
        { duration: '1s', easing: 'easeOut' }
      );

      // Add the label
      const text = $g.addText({
        text: label,
        fontSize: 2.5,
        color: '#fff',
        position: [0.5, 0.1] // Relative to the group
      });
      text.fadeIn('500ms');
    }
  );
}

In this snippet, we use normalized coordinates. position: [x, 0.8] places the group at a specific horizontal point, 80% down from the top. Because children inside a group use the same coordinate space, we can easily stack bars side-by-side.

Composing the Infographic

Now that we have a component, we can loop through a dataset to compose our full infographic. This is where the power of programmatic video creation truly shines. You aren't keyframing by hand; you are mapping data to a timeline.

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

const dataset = [
  { label: 'Q1', value: 40, color: '#FF5A1F' },
  { label: 'Q2', value: 65, color: '#FF7D4D' },
  { label: 'Q3', value: 55, color: '#FF9F7A' },
  { label: 'Q4', value: 90, color: '#FFC1A8' },
];

$.parallel(($p) => {
  dataset.forEach((data, i) => {
    createAnimatedBar($p, { ...data, x: 0.2 + i * 0.2 });
  });
});

$.wait('3s');
const json = await $.compile();

By wrapping the loop in $.parallel, all bars begin their animations simultaneously. If you wanted a staggered "waterfall" effect, you could simply add a $.wait((i * 100) + 'ms') before calling createAnimatedBar inside the loop.

How VideoFlow Handles This

Traditional video tools struggle with data-viz because they treat the final output as a flat sequence of pixels. VideoFlow treats it as a tree of properties.

1. Resolution Agnostic: Because we used em for the bar width and height, you can export this infographic for a mobile story (9:16) or a desktop presentation (16:9) without changing a single line of logic.
2. Portable JSON: The $.compile() call produces a portable VideoJSON document. You can send this JSON to the @videoflow/renderer-server to generate an MP4 in the cloud, or preview it instantly at 60fps in your React app using the DOM renderer.
3. Cinematic Polish: You can easily add GLSL effects to your charts. Want your bars to have a subtle glow or a frosted glass look? Just add an entry to the effects array in the ShapeLayer properties.

Start Building Your Library

Building a data-viz library with VideoFlow means you never have to build the same chart twice. You can bake your brand's easing functions, color palettes, and transition styles directly into your TypeScript components.

Ready to see your data in motion? Head over to the VideoFlow Playground to experiment with shapes and animations in real-time, check out the documentation for a deep dive into the API, or star the project on GitHub to stay updated on the latest features.