Authoring Resolution-Agnostic Videos: Why 1em is Your Secret Weapon

When you build a website, you don't hardcode every pixel for a single monitor size. You use relative units, flexbox, and grid to ensure the layout breathes across mobile, tablet, and desktop. Yet, in the world of video automation, most developers are still stuck in the "pixel-perfect" trap—authoring content for 1080p and then realizing they need to rewrite everything for 4K or social-friendly vertical formats.

In VideoFlow, we decided that resolution-agnostic video should be the default, not an afterthought. By moving away from absolute pixel coordinates and embracing a relative unit system based on em and normalized coordinates, you can write a single VideoJSON document that renders identically across any aspect ratio or resolution.

The Pixel Problem in Programmatic Video

Traditional video tools (and even many code-based alternatives) require you to specify positions like x: 1920, y: 1080. If you suddenly need to render a 720p version for a quick preview, or a 4K version for high-end delivery, you're forced to do the math yourself. You end up with brittle templates littered with width / 2 and height * 0.1 calculations.

This approach is a maintenance nightmare. It makes it nearly impossible to build a truly robust programmatic video pipeline that serves multiple platforms.

1em = 1% of Project Width

VideoFlow solves this by redefining the em unit. In our builder, 1em is always equal to 1% of the project width.

This simple mental model changes everything. If you set a fontSize to 5, your text will always occupy exactly 5% of the canvas width, whether you are rendering at 480p or 8K. The same applies to shape dimensions. A shape with width: 50 and height: 25 will always cover exactly half the width and a quarter of the width's equivalent in height, maintaining its relative scale perfectly.

import VideoFlow from '@videoflow/core';

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

// This text will be 6% of the width regardless of resolution
$.addText({
  text: 'Resolution Independent',
  fontSize: 6,
  color: '#FF5A1F',
  position: [0.5, 0.4] // Centered horizontally, 40% from top
});

Normalized Coordinates: [0, 1]

Positioning follows a similar logic. Instead of pixels, VideoFlow uses normalized coordinates where [0, 0] is the top-left corner and [1, 1] is the bottom-right.

Want to center an element? Use [0.5, 0.5]. Want to place a logo in the bottom-right with some padding? Use [0.9, 0.9]. Because these values are fractions of the total canvas, your layout remains perfectly composed even if the project's width and height change.

How VideoFlow Handles Responsive Rendering

This architecture is what enables our three official renderers to produce byte-for-byte identical output. When you author a scene in the Playground, you are looking at a live DOM preview. When you hit export, @videoflow/renderer-browser uses WebCodecs to render that same JSON. If you move to a server-side batch job, @videoflow/renderer-server takes the exact same file and produces the same MP4.

Because the underlying VideoJSON is resolution-agnostic, you can even override the resolution at render-time without touching your source code:

// Authoring at 1080p
const $ = new VideoFlow({ width: 1920, height: 1080 });
// ... add layers ...

// Render at 4K without changing a single coordinate
await $.renderVideo({
  width: 3840,
  height: 2160,
  output: './hero-4k.mp4'
});

Building for the Future of Content

As content consumption fragments across devices, the ability to treat video like responsive code becomes a massive competitive advantage. Whether you're building a SaaS dashboard that generates weekly recap videos or an AI agent that emits video-as-code, you need a toolkit that respects the fluid nature of modern displays.

By leveraging em units and normalized coordinates, VideoFlow lets you stop worrying about pixel math and start focusing on cinematic storytelling.

Ready to see it in action? Head over to our Docs to explore the full builder API, or fork our repo on GitHub to start building your own resolution-agnostic video factory.