Motion direction

Flat slides with text fading in are not a film. A premium product film has a camera, depth, one real product action with a visible result, designed transitions, and rhythm (fast moves followed by readable holds). This skill says how to direct that and how to build it in Remotion.

Words like "premium", "wow" or "After Effects style" are goals, not instructions. Always turn them into observable direction: "camera dollies toward the browser; UI panels separate in Z; the active card snaps into focus; background flips charcoal → cobalt on a 3-frame flash with a low hit."

1. Two-pass workflow (do not skip)

1. Brief. Write the four video-rules lines (goal, audience, message, placement), then the four layers:
   • Art: palette (from the brand), materials, lighting, type, density, mood.
   • Motion: what moves, along which path, speed curve, what leads, how it settles.
   • Scene: order of reveals, the surprise moment, the feature proved, the final message.
   • Production: aspect ratios, platforms, real assets, fps, length, sound deliverable.
2. Three directions. Offer three distinct directions. Each gets: a primary style from §2 (+ one supporting texture), palette, one signature transition, a 6–8 frame storyboard (one line per frame) and why it fits the audience. The user picks one.
3. Beat sheet. For the chosen direction, one row per beat: time · shot · what enters / changes / is proved / exits · camera · foreground/mid/background layers · copy · sound cues · transition out. Get approval.
4. Styleframes. Build 4–6 key frames at final quality and show them as stills (--scale=0.5) before animating. The look is decided here, not in the render.
5. Animate, then draft render in the cloud (coldframe; it's free and doesn't heat the laptop). Watch it, review a contact sheet, give yourself notes in the form below, fix, re-render.

Good notes are mechanical: "The icon burst happens before the viewer sees the result. Move it after the demo, give the result a 1.5 s hold, cut icons from nine to four, keep the camera still under the final headline."

2. Styles worth naming (pick one primary)

(Also: retro-futurist interface, tactile mixed media, soft organic. Use only when the brand supports it.)

3. Motion vocabulary → how to build it in Remotion

Use these exact terms in beat sheets. A few controlled moves beat every effect at once.

4. Transitions that feel designed

Pick one signature transition for the film and use each other type at most once or twice. Each needs a reason.

• Palette impact: quiet monochrome, then on the product event a 1–3 frame flash, a bass hit, and a new saturated background; change lighting and type contrast at the same moment.
• Screen portal: push into a card/device until it fills the frame; its surface is the next scene. Match geometry across the cut.
• Object match: shot A ends with a shape/motion; shot B starts with the same shape at the same screen position and direction (button → ring → loader; progress bar → timeline).
• Typography mask: scale a bold word until a letter's counter fills the frame; reveal the demo through it; remove the type.
• Depth collapse: spread components across near/mid/far, pull them together into the final usable UI.
• UI extraction: lift a real icon/metric/card out of the screen into space, explain it, put it back in the same place.
• Whip pan: fast directional camera move with blur hides the cut; keep direction consistent.
• Rhythmic stop: after two or three fast shots, cut to a still product frame with near-silence. The next action lands bigger.

@remotion/transitions (TransitionSeries with slide, wipe, clockWipe, custom presentations) handles cuts between sequences; camera-based transitions are built in the scene itself.

5. Beat template (example, 24–30 s product film)

Continuity: every floating icon must be a real capability shown in the product. Show the result before the spectacle.

6. Quality rules

• One focal point per beat. Never move camera, headline, icons and background at full intensity together.
• Alternate motion and stillness: every fast entrance is followed by a hold the viewer can read (≥ 1.5 s for text).
• One accent colour, used as an event; if it's everywhere, the palette impact has no contrast.
• Design each aspect ratio separately. A 16:9 orbit clips in 9:16; re-frame, don't crop.
• The meaning must survive muted playback; sound adds, it doesn't explain.
• Real product only: real screenshots or UI rebuilt to match what exists; exact labels and numbers.
• End on a clean frame: one claim, the product, one CTA with URL.
• 30 fps default (60 for heavy cursor/UI motion, 24 for a filmic look). Budget CPU-heavy effects (blur, motion-blur samples) — they slow cloud renders.

7. Checklist before the final render

• Three directions offered, one picked; beat sheet and styleframes approved.
• There is a camera: at least push-ins/arcs and 3+ depth planes, not flat slides.
• One real product action with a visible, held result.
• One signature transition; other transitions mixed and motivated.
• Easing from one family; springs only for confirmations; nothing linear by accident.
• Focal point clear in every contact-sheet frame; holds readable on a phone (check at 390 px wide).
• Separate framing for every aspect ratio.
• sound-design checklist passed.