---
id: "concept-safe-zones"
type: "concept"
source_timestamps: ["00:02:56", "00:03:00"]
tags: ["video-editing", "ui-ux", "social-media"]
related: ["action-prompt-safe-zones", "concept-remotion"]
definition: "The central areas of a vertical video frame where text and graphics will not be obscured by platform-specific UI overlays like buttons and captions."
sources: ["sabrina"]
sourceVaultSlug: "claude-code-remotion-video-automation-2026May14"
originDay: 3
---
# Short-Form Video Safe Zones

## Definition

The central areas of a vertical video frame (9:16 aspect ratio) where text and graphics will not be obscured by platform-specific UI overlays like buttons and captions.

## What Gets Obscured Where

- **Too high** → interferes with the search bar or following tabs (TikTok, Reels, Shorts).
- **Too low** → overlaps with captions and the bottom action rail.
- **Too far right** → covered by like buttons, share buttons, and profile icons.

## Prompting for Safe Zones

When prompting [[concept-claude-code|Claude Code]] to generate a video via [[concept-remotion|Remotion]], explicitly instructing it to **"use short-form video safe zones"** ensures the AI calculates the CSS margins and padding correctly so the generated motion graphics are perfectly formatted for cross-platform publishing.

See [[action-prompt-safe-zones]] for the exact prompt pattern.

## Why This Matters for Automation

In an automated pipeline that posts directly to multiple platforms via [[entity-product-blotato|Blotato]], you cannot manually reposition text per platform. Safe-zone-aware generation upfront eliminates this entire class of post-render correction.

## Related

- [[framework-automated-content-pipeline]] — step 1 outputs must respect safe zones to be publishable in step 4


## Related across days
- [[concept-remotion]]
- [[action-prompt-safe-zones]]