---
name: video-composition
description: "Composition design decisions for HyperFrames videos (1920x1080 landscape by default; also 1080x1920 portrait / 1080x1080 square) — canvas zones, 7 layout templates, density rules, hierarchy logic, depth principles. Specific px / scale / shadow values live in build agent territory."
category: visual-design
---

# Composition for Video - Design-Judgment Layer

Video composition is closer to film and poster design than webpage layout. There is no scrolling and no responsive reflow. Every frame is a fixed canvas; every pixel matters. The default canvas is **1920×1080 (16:9 landscape)**; for **portrait (1080×1920)** and **square (1080×1080)** see "Portrait & Square" below — the principles are identical, the aspect ratio is not.

**Most of this file is plan-layer design judgment** - conceptual canvas zones, 7 composition templates, density rules, hierarchy logic, and depth-layering principles. Concrete px (safe margins 96-150), scale values (1.05 / 0.92), three-layer `box-shadow` recipes, `perspective` 800-1400px, etc. belong to the build agent; plan does not write code.

Composition is one of the highest-value parts of the plan - which layout to choose, how much frame the primary element occupies, and how many depth layers to use **are director decisions**.

## Squint Test

Squint your eyes (or blur the screenshot). Can you still identify:

- the most important element?
- the second most important element?
- clear spatial groups?

If everything has equal weight after blur, hierarchy is broken - redesign before writing the plan. The strongest archive beats all pass this test: one dominant block + one supporting structural element, with everything else demoted.

## Canvas Zones (conceptual)

The canvas (shown here as 1920×1080 landscape) has four zones:

```
+--------------------------------------------------+
|         Optional top chrome                       |
|  +----------------------------------------------+ |
|  |         Safe margin                          | |
|  |  +----------------------------------------+  | |
|  |  |                                        |  | |
|  |  |       Primary content area             |  | |
|  |  |    (center 65-75% of frame)            |  | |
|  |  |                                        |  | |
|  |  +----------------------------------------+  | |
|  |  | Caption band (bottom ~17%, HARD when captions) | | |
|  |  +----------------------------------------+  | |
|  +----------------------------------------------+ |
+--------------------------------------------------+
```

- **Top chrome** - only for workspace mockup scenes; otherwise skip.
- **Safe margin** - key content stays away from edges; hero / editorial scenes need more air.
- **Primary content area** - the center 65-75% of the frame is where the eye naturally rests; body text blocks should **never** press against the edge.
- **Caption band (bottom ~17%, HARD reserved when captions are enabled)** - when this film has captions enabled (`group_spec.captions_enabled`), the bottom ~17% of **canvas height** is a **HARD reserved zone** (landscape 1080h -> bottom 180px, y 900-1080; portrait 1920h -> bottom 320px, y 1600-1920): primary content area and all key visuals **must cap at the caption-band top y**, and vertical centering should anchor at **y ≈ 0.42 × height** (landscape ≈454, portrait ≈806), not the canvas midpoint. BACKGROUND / ambient / surface decoration layers are exempt and may remain full-bleed. When captions are disabled, this zone can be used normally. Plan example: "captions enabled - hero block centered in upper ~83%, stat card bottom edge sits at y≈880 just above the caption band; background mesh stays full-bleed."

Plan writes "hero word centered with generous safe margins"; it does not write `padding: 150px 120px 92px`.

## Portrait & Square (non-16:9 canvases)

The canvas is **1920×1080 (16:9 landscape) by default**, but the dispatch `Canvas:` line may be **1080×1920 (9:16 portrait — reels / shorts / TikTok)** or **1080×1080 (1:1 square — feed)**. The zones, density rules, hierarchy logic, and depth principles above all still apply; what changes is the **aspect ratio**, and a layout designed for a wide frame does not transplant into a tall one. Read the dispatched `Canvas:` and design for that shape from the start — do not plan landscape and "crop".

- **Stack vertically, not side-by-side.** Portrait has little horizontal room: split-screen / triptych / asymmetric 60-40 become **top/bottom stacks**, vertical step lists, and stacked bands. A wide marquee strip becomes a centered stack. Square tolerates side-by-side only for two compact items.
- **Vertical center moves with the canvas.** Anchor a centered hero around **y ≈ 0.42 × canvas height** (portrait ≈ 806, square ≈ 454), not a fixed 540. The caption band is still the bottom ~17% of **height** (portrait → y1600–1920; square → y900–1080) and is HARD-reserved when captions are enabled.
- **Type runs larger, fewer words per line.** A narrow frame wraps long headlines badly — prefer short kinetic lines, bigger type, and more vertical rhythm. Treat the tall axis as the primary reading flow.
- **Templates that travel well to portrait:** Centered (hero/climax), Layered Depth, Full-Width Strip (now a stacked band), vertical Rule-of-Thirds. **Avoid** wide Split Screen and Triptych in portrait; reach for stacked equivalents.
- **Density still rules.** Primary visual ≥ 40% of canvas, ≥ 3 depth layers — but measured against the tall frame; an empty top or bottom third reads as placeholder just like dead center does on landscape.
- **Real captured 16:9 screenshots / product assets don't fit a tall frame.** A landscape screenshot does not transplant into portrait/square. **Never** letterbox it with dead bars and **never** stretch-distort it to fill. Instead: (a) crop to the salient region; (b) seat it as a top or bottom band with kinetic type / supporting graphics filling the remaining vertical space; or (c) scale it down inside a device / browser-frame mock.

## 7 Composition Templates

Use at least 3 different templates in a single video (5 scenes -> 3+ templates, 9 scenes -> 4+ templates). **Do not default every scene to centered.** The strongest archive plans never use the same layout class twice in a row.

### 1. Centered (hero / climax)

One dominant element centered with generous breathing room. Use for: brand reveal, key metric, CTA, climax beat.

### 2. Rule of Thirds

Visual anchor placed on thirds intersections. Remaining space carries supporting elements or negative space. Use for: feature showcase, product demo with description.

### 3. Split Screen (comparison / dual focus)

Left and right halves carry separate elements. Use for: before/after, feature comparison, problem/solution, palette-switch moments.

### 4. Layered Depth (immersive)

Foreground / midground / background use different scale + opacity to create depth. Use for: opening hooks, atmosphere-heavy scenes, workbench beats.

### 5. Asymmetric (editorial)

Primary content is pushed to one side (60/40 or 70/30). Intentional imbalance -> visual tension + sophistication. Use for: feature focus, dense text information, editorial proof beats.

### 6. Triptych (three-panel)

Three equal-width zones, often used to show three capabilities / three feature beats simultaneously.

### 7. Full-Width Strip

One horizontal band (ticker, logo chain, marquee). Usually only 20% of canvas height.

## Frame Density - Avoid Empty Frames

Common failure: small elements floating in the center of 1920x1080 with empty space around them. Every scene must feel **intentionally filled**, not sparse.

**Density rules:**

- **Primary visual element occupies at least 40% of the canvas** - product image starts around ~800x600. Hero text 50-75% height × 60-80% width; centered card 30-50% width × 50-70% height.
- **Every scene has at least 3 visual layers** - background (gradient / particles / grid), midground (main content), foreground (emphasis / decoration).
- **Opening and closing** are especially prone to emptiness - black background + lonely line of text feels placeholder-like. Add environmental layers: dual-radial swell, floating particles, brand-color ambient texture, low-opacity scanlines.
- **Text-only scenes still need visual elements** - logo, extracted asset, icon decoration, halftone dot field, brand-derived geometry.
- **Use `assetCandidates` actively** - extracted real assets are the highest-value visual material; a product screenshot occupying 60% of frame + supporting text + ambient layer feels full; the same text alone feels empty.

**Fullness test:** could this frame work as a poster or social graphic? If it looks like a sparse PPT slide -> add visual layers.

**Poster-pause test:** if you freeze the video at any moment, can the frame stand as an independent graphic design? Codex's 6 beats all pass.

## Negative Space as Design Tool

Whitespace is not waste; it directs attention.

- **Tight grouping** (icon + label, image + caption) - small spacing.
- **Generous separation** (unrelated groups) - large spacing.
- **Asymmetric outer margins** feel more designed than equal padding everywhere.
- **Hero words often keep large side whitespace** - it lets one word carry the weight of "this is everything."

### Spacing Failure Modes

- Every element is equidistant from every other element -> no grouping, no hierarchy.
- Elements unintentionally touch or overlap.
- Text sits tight against container edge.
- Captions collide with bottom visuals.
- The same padding appears everywhere because it was the framework default.

## In-Frame Visual Hierarchy

Visual weight order (strong -> weak):

1. **Large image** (mockup, photo, hero visual)
2. **Motion** (moving beats static)
3. **High contrast** (bright text on dark ground, saturated color on neutral ground)
4. **Type scale** (display > heading > body)
5. **Position** (center and upper third are golden zones)

Combine **at least two** to build clear hierarchy. An element that is large, moving, and in the upper third is unquestionably the primary focus.

### Layer Hierarchy Across Dimensions

A title that is only larger, while sharing weight/color/spacing with body text, creates weak hierarchy. Stack dimensions:

| Dimension | Strong contrast                                             |
| --------- | ----------------------------------------------------------- |
| Size      | 3:1 ratio or larger                                         |
| Weight    | 800-900 vs 400                                              |
| Color     | high contrast against background                            |
| Motion    | one element moving vs all else static                       |
| Position  | top / left = primary                                        |
| Space     | large surrounding whitespace vs equidistant from everything |

## Cards and Grouping

Spacing + alignment can create natural grouping - **card containers are not required**.

**Use cards when:**

- content is genuinely distinct from surroundings
- in a UI demo scene, the group is independently actionable (command-panel row, feature card)
- you need shadow stacking to communicate "lifted above the canvas"

**Do not use cards when:**

- you only want visual separation -> use whitespace instead
- content belongs to a continuous list or flow

**Never nest cards inside cards** - visually claustrophobic + hierarchy becomes muddy. Wanting nested cards usually means the outer card is unnecessary.

Plan writes "comparison-split: left/right dual cards, three-layer shadow stack"; it does not write `box-shadow: 0 30px 60px rgba(0,0,0,0.45)...` - that is build work.

## Asset Prominence

Extracted assets (logos, product images, screenshots) are the most valuable visual material. They are real and strongly brand-related.

- **Feature them prominently**, not as tiny decoration.
- When a product screenshot is the focus, it should **fill at least 40-60% of the frame**.
- Logo must remain recognizable at playback size - do not shrink it into an icon.
- Use the highest-quality available version.
- **Never replace real assets with AI-generated decorative graphics** (generic color blocks, abstract blobs) when real assets exist - the extraction step exists for a reason.

## Creating Depth on a 2D Canvas

Every scene should layer **at least 2-3 depth techniques** to avoid flat poster feel. Concrete values (perspective px, rotate degrees, scale values) are build work:

| Technique               | Effect                                                                                                                                    |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **Size difference**     | larger = nearer, smaller = farther                                                                                                        |
| **Blur**                | blurred = background, sharp = foreground                                                                                                  |
| **Opacity gradient**    | low = receding, full = primary                                                                                                            |
| **Overlap**             | foreground partially covers background                                                                                                    |
| **Shadow stacking**     | three-layer shadow = lift + brand feel                                                                                                    |
| **Motion speed**        | faster parallax = closer                                                                                                                  |
| **Counter-scale trick** | camera pushes toward focus -> background appears larger, focal element CSS scale <1 but fills frame after composition (archive signature) |

Plan writes "3 depth layers: background layer + midground main content + foreground emphasis; background counter-scales to make the camera push feel closer"; it does not write `scale: 1.05 / 1.0 / 0.92` - that is build work.

## What Should Not Appear in Promo Videos

- nav bars, footers, cookie banners (interactive webpage elements with no use in video)
- scrollbars, cursor arrows, browser chrome - unless the scene is **intentionally** a workspace mockup
- unclickable buttons
- generic decorative shapes (color blocks, spheres, ribbons) replacing real product assets
- floating bokeh / purple-to-blue AI gradients - "default AI cliché look", explicitly banned in multiple brand briefs

**Exception:** intentional product-interface reconstruction for UI demo scenes. Nav bars, command panels, timeline tracks, CTA buttons provide real context - that convention makes the scene feel like a **real** workflow rather than a marketing reenactment.

## Plan Reference Example

> "Composition: asymmetric 60/40 - product screenshot occupies left 60%, copy + CTA occupy right 40%. Generous safe margin; text block capped inside primary content area. 3 depth layers: background swell + midground product screenshot + foreground CTA glow. Density: primary visual ~55% of canvas, ambient layer adds 5% scanline + architectural grid."

Do not write concrete px / scale values / shadow recipes.
