The 1% Rule: Why Resolution-Agnostic Layout is the Secret to Scalable Video

If you have ever tried to automate video production using traditional tools, you have likely hit "The Pixel Wall." You build a beautiful 1080p template, only for it to fall apart the moment you need a 9:16 vertical version for social media or a 4K version for high-end delivery. Hardcoded pixel values are the enemy of scalable video pipelines.

In programmatic video, we treat videos like software. And just as modern web development moved from fixed-width tables to responsive CSS, video authoring needs a layout system that doesn't care about the final resolution. In this deep dive, we explore how VideoFlow implements a resolution-agnostic layout system to ensure your content looks perfect everywhere.

Enter VideoFlow's 1% Rule.

The Problem with Fixed Pixels

Traditional video editing software (and many programmatic tools) anchors everything to absolute pixel coordinates. If your title is at x: 960, y: 540, it's centered in a 1920x1080 frame. But if you render that same project at 720p, your title is suddenly off-center and oversized.

This creates a maintenance nightmare. You end up maintaining separate templates for every aspect ratio and resolution, or writing complex math to recalculate positions on the fly. This isn't just inefficient; it's a barrier to building truly automated programmatic video localization or personalized video at scale.

The 1% Rule: Authoring in Em-Units

VideoFlow solves this by adopting a resolution-agnostic unit system. Instead of pixels, we use em-units, where 1em is always equal to 1% of the project width.

If you set a fontSize to 5, it will always occupy 5% of the video's width, whether you are rendering a 512px preview or an 8K master. This simple abstraction ensures that your typography and shapes maintain their visual weight and hierarchy regardless of the output scale.

// This text will look identical on 720p, 1080p, and 4K
$.addText({
  text: 'Scalable Video',
  fontSize: 6, // 6% of project width
  color: '#FF5A1F',
  fontWeight: 700,
});

By decoupling the design from the resolution, you can focus on the composition. This is a core part of the VideoFlow builder API philosophy: author once, render anywhere.

Normalized Coordinates: 0 to 1

Layout isn't just about size; it's about position. VideoFlow uses a normalized coordinate system for all positioning.

Instead of [960, 540], you use [0.5, 0.5]. The values 0 and 1 represent the edges of the canvas. This means a position of [0.5, 0.2] is always centered horizontally and 20% from the top, no matter the aspect ratio.

When combined with the em-unit system, you get a layout that is naturally responsive. You can preview your work at a low resolution in the Playground to save bandwidth and compute, then trigger a full-resolution render on the server, knowing the output will be byte-for-byte identical in composition.

Putting it Together: A Responsive Snippet

Here is how you build a cinematic lower-third that scales perfectly. Notice how we use em-units for font size and shape dimensions, and normalized coordinates for positioning. This approach is fundamental to VideoFlow's core concepts.

import VideoFlow from '@videoflow/core';

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

// A background bar that scales with the width
const bar = $.addShape(
  { 
    width: 40, height: 8, // 40% wide, 8% high (relative to width)
    fill: '#FF5A1F', 
    position: [0.3, 0.8] 
  },
  { shapeType: 'rectangle' }
);

const name = $.addText({
  text: 'ALEX RIVERA',
  fontSize: 3.5,
  color: '#fff',
  position: [0.3, 0.78],
});

bar.fadeIn('500ms');
name.fadeIn('800ms');

$.wait('3s');

Because of the The Three-Renderer Rule: Preview, Export, and Automate with VideoFlow, this exact code can be used for a 60fps live preview in a React dashboard, a browser-side export for an indie user, or a headless server render for a massive batch job.

How VideoFlow Handles the Math

Under the hood, the @videoflow/core compiler translates these relative units into absolute values only at the very last second—during rendering. The intermediate VideoJSON format preserves the relative units, making it the most portable video format for developers.

This architecture is what makes VideoFlow a powerful Remotion alternative. While other tools might tie you to a specific runtime or resolution, VideoFlow gives you the freedom to scale your video production horizontally without ever touching a pixel-math calculator again.

Start Scaling Your Video Today

Resolution-agnostic layout is more than just a convenience; it's a prerequisite for the next generation of automated content. Whether you are building an AI video agent or a SaaS recap engine, the 1% rule will save you hundreds of hours of template maintenance.

Ready to see it in action? Head over to the Playground to experiment with em-units live, or check out our animation guide to see how these units interact with keyframes. If you're ready to build, grab the source from GitHub and start rendering.