The 1% Rule: Why VideoFlow Uses em Units for Resolution-Agnostic Video

If you have ever tried to automate a video pipeline using traditional tools, you have likely hit the "resolution wall." You build a beautiful 1080p template with pixel-perfect positioning, only to realize that when you need a 4K version or a square 1:1 social crop, every single coordinate, font size, and stroke width breaks.

In the world of programmatic video, hardcoding pixels is a maintainability nightmare. That is why VideoFlow treats layout differently. By using a combination of normalized coordinates and em units, VideoFlow ensures that your videos are truly resolution-agnostic.

The Problem with Pixels in Video

Traditional video editing software (and many programmatic APIs) thinks in absolute pixels. If your canvas is 1920x1080 and you want a title in the middle, you place it at x: 960, y: 540. If you want a 48px font, you set fontSize: 48.

But what happens when you change the project dimensions to 3840x2160 (4K)? That "centered" title is now stuck in the top-left quadrant, and that 48px font looks like a footnote. You are forced to write complex scaling logic just to keep your design intact.

Enter the 1% Rule

VideoFlow solves this by decoupling your design from the output resolution. It uses two key primitives:

1. Normalized Position: All positions are expressed as [x, y] coordinates from 0 to 1. [0.5, 0.5] is always the center, whether the video is 100 pixels wide or 10,000.
2. The em Unit: In VideoFlow, 1em equals 1% of the project width.

This "1% rule" is the secret to building templates that scale. If you set a fontSize to 5, it will always occupy exactly 5% of the video's width. If you set a shape's width to 50, it will always span half the screen.

Scaling in Action

Take a look at how clean this makes the code. This snippet defines a hero title that will look identical across any aspect ratio or resolution:

import VideoFlow from '@videoflow/core';

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

// Positioned at 50% width, 40% height
// Font size is 8% of project width
const title = $.addText({
  text: 'RESOLUTION AGNOSTIC',
  fontSize: 8, 
  color: '#FF5A1F',
  fontWeight: 700,
  position: [0.5, 0.4],
});

title.fadeIn('800ms');
$.wait('3s');

const json = await $.compile();

Because we used fontSize: 8 and position: [0.5, 0.4], you can change the constructor to width: 1080, height: 1080 (Square) or width: 3840, height: 2160 (4K) and the layout will remain perfectly balanced without changing a single line of layer code.

Why This Matters for Automated Pipelines

For developers building SaaS dashboards, personalized video tools, or automated content factories, this approach is a game-changer.

When you are generating thousands of videos from dynamic data, you often don't know the final resolution until render time. A user might request a high-res MP4 for a presentation or a low-res preview for a mobile app. With VideoFlow, you generate one VideoJSON document, and it scales automatically.

This portability is a core advantage when comparing VideoFlow vs Remotion. While Remotion relies on a React runtime and CSS units that can be tricky to scale across different canvas sizes, VideoFlow's units are baked into the core builder API, ensuring byte-for-byte identical layouts across all official renderers.

Beyond Text: Shapes and Effects

The em unit isn't just for text. It applies to almost everything in the visual stack:

• Shapes: $.addShape({ width: 20, height: 10 }) creates a rectangle that is 20% of the project width wide.
• Effects: Blur radii and glow strengths can also be defined in em, ensuring that a "subtle glow" doesn't disappear when you upscale to 4K.
• Shadows: textShadowBlur and offsets scale with the project, maintaining the visual hierarchy of your design.

Start Building Scalable Video

Stop fighting with pixel math and start treating your video layouts like modern, responsive web designs. By embracing the em unit, you can build templates once and deploy them everywhere—from mobile ads to 4K cinematic trailers.

Ready to see it in action? Head over to the VideoFlow Playground to experiment with resolution-agnostic layouts in real-time, or check out our getting started guide to integrate the Apache-2.0 core into your next project. For more on how our rendering engine handles these units, see our post on Headless Video Rendering in Node.js.