• Defining a frame's layout, focal point, and negative space.
• Planning element enter/exit directions and motion paths.
• Designing camera push/pull, pan, follow, and parallax moves.
• Adapting one composition across 16:9, 9:16, and 1:1 with safe areas.

What are you staging?
├─ A static frame's layout
│   └─ set grid → place ONE focal point on a thirds power point
│      → rank hierarchy (size>contrast>color>position) → reserve negative space
├─ Where things enter / leave
│   └─ follow reading direction; nearest edge; ease-out in, ease-in out
│      (new content → from right/below; back/undo → reverse it)
├─ A sense of depth / a camera move
│   └─ split into bg/mid/fg layers (the three motion layers)
│      → ONE camera move per beat (push | pan | follow | parallax), ease-in-out
└─ One comp across aspects (16:9 / 9:16 / 1:1)
    └─ master in 16:9, focal in the center band → RESTACK (don't crop) for 9:16
       → keep critical content inside title-safe margins

animation-principles

• 1/3 Rule (

  animation-principles

  ) has two forms and this skill uses both spatially: (a) Composition thirds — place the focal point on a rule-of-thirds power point (33%/67%); (b) Distance — no element travels more than ~1/3 of the frame without an intermediate keyframe or a scale/opacity change, so entrances stay readable.
• Three motion layers (

  animation-principles

  : Primary / Secondary / Ambient) map directly onto depth: foreground = Primary (the move the eye follows), midground = Secondary (the subject + supporting reactions), background = Ambient (slow, low-contrast life). Parallax speed scales with that role.
• Settle the Three Pillars (Emotional intent / Visual narrative / Motion craft) and the chosen Motion Personality (

  motion-art-direction

  ) before numbering a camera move — premium wants slow long pushes, energetic wants whip-pans.

• Push / pull — scale into or away from the subject (dolly). Builds intimacy or reveals context. 800-2000ms, ease-in-out.
• Pan / tilt / move — translate the frame across the scene. Reveals space, follows action.
• Follow — keep a moving subject framed (often slightly off-center, leading the motion).
• Parallax — layered move that sells depth.

cubic-bezier(0.65, 0, 0.35, 1)

linear

• New content arriving -> enter from the right / from below.
• Dismissing / going back -> exit right or down, or reverse the entrance.
• Drilling deeper -> scale up / push in.

Brief: app launch hero, Premium personality, must work as a web hero and a Reel.

• Grid: 1920×1080, margin 100, gutter 24, 12 cols. Phone mockup spans cols 7–11 (right power-column).
• Focal: phone screen on the right thirds intersection (1280, 360) — not centered. One focal point; the headline (cols 1–5) is secondary, lower contrast.
• Depth (three motion layers): bg = soft gradient drift, 0.2x, Ambient. mid = phone mockup, 0.6x, Secondary stage. fg = one out-of-focus UI chip drifting past, 1.2x + 3px blur, reads as Primary depth cue.
• Camera: single push-in, scale 1.0→1.10 over 1600ms ease-in-out, origin on the phone screen — matches Premium (slow, no overshoot). No pan added.
• 9:16 adapt: restack — headline moves above the phone, phone pulled up to the upper-middle to clear the bottom 19% CTA/nav zone, type +20%. Focal survives the crop because it started in the center band.

Why it works: one focal point, depth roles assigned, one camera move, safe-area-aware reflow instead of a blind crop.

• Phone mockup dead-center, headline centered above, logo centered below → three elements fighting on the same axis, no hierarchy, no power point.
• All three layers slide left at the same 1.0x speed → no parallax, no depth, reads as "the whole template moved" (violates the 1/3 Rule / distance: a full-width slide with no intermediate keyframe).
• Camera does push + pan + slight rotate at once → chaotic, no single intent.
• 9:16 made by cropping the 16:9 sides → headline and logo clipped, phone too low behind the nav bar.

Fix: pick one focal power point, assign each layer a depth role + distinct parallax speed, one camera move, and restack for vertical instead of cropping.

gsap-web

remotion-video

after-effects

• Frame spec: aspect(s), resolution, fps, grid (cols / margin / gutter), baseline unit.
• Focal point: coordinates (px or %) on a thirds power point + the hierarchy ranking of every element.
• Layer map: each element assigned bg/mid/fg → Ambient/Secondary/Primary, with parallax speed.
• Enter/exit: per element — edge, direction, easing family, and whether travel exceeds 1/3 (and how it's broken).
• Camera move: the single move, its property + from→to values, duration, easing, transform-origin.
• Safe areas: title-safe margins per target aspect + the restack plan for vertical.
• Cross-refs: which Motion Personality and which Pillars decisions drive the timing.

• Exactly one primary focal point, on a thirds power point (or deliberate symmetry).
• Hierarchy ranked (size > contrast > color > position); secondaries don't compete.
• Negative space reserved around the focal point.
• Every element assigned a depth layer (bg/mid/fg = Ambient/Secondary/Primary) with a parallax speed.
• One camera move, not stacked; eased (not linear unless a loop); 800–2000ms for hero moves.
• Entrances/exits use nearest edge, follow reading direction, ease-out in / ease-in out.
• No element travels >1/3 of frame without an intermediate keyframe or scale/opacity change.
• Critical content inside title-safe margins for every target aspect; vertical is restacked, not cropped.
• Motion Personality + Three Pillars settled before any number was chosen.

• references/camera-and-grids.md

  — grid math with worked numbers, full safe-area percentage tables per aspect, parallax layering code (CSS scroll + JS pointer + Three.js), and named camera-move recipes (push-in, whip-pan, orbit, dolly-zoom) with keyframe values.