skills.rest
iart-ai
iart-aiOFFICIAL
Explore all skills by this author →
GitHub

shot-composition

Plan camera moves and grid layouts for motion graphics.

12|5|Updated Jun 22, 2026
Search Tags:#layout#composition#animation#grid#parallax#cinematography
One-click install
npx skills add https://github.com/iart-ai/motion-design-skills --skill shot-composition
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shot-composition
Source: https://github.com/iart-ai/motion-design-skills/tree/main/skills/shot-composition
Command: npx skills add https://github.com/iart-ai/motion-design-skills --skill shot-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the challenge of creating professional, visually balanced motion graphics by providing a structured framework for grid systems, focal hierarchy, and camera language.

Core Features & Use Cases

  • Grid & Layout Systems: Automatically calculate 12-column grids, baseline spacing, and safe areas for any aspect ratio.
  • Depth & Parallax: Implement professional depth layering (background, midground, foreground) to create cinematic parallax effects.
  • Camera Direction: Generate precise camera move plans (push, pull, pan, orbit) with timing and easing recommendations.

Quick Start

Use the shot-composition skill to generate a 16:9 layout plan with a 12-column grid and a push-in camera move for my product hero animation.

Frequently Asked Questions about shot-composition

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan a cinematic camera move for a 2D motion graphics animation?▼

Setting up a 12-column grid involves calculating baseline spacing and defining safe areas for your target aspect ratio. The framework automatically generates these grid and layout systems to ensure visually balanced motion graphics across multiple aspect ratios.

What is the best way to create depth and parallax effects in motion graphics?▼

Create depth and parallax effects by implementing professional depth layering across background, midground, and foreground planes. This establishes a clear focal hierarchy and produces cinematic parallax effects for web, video, and app motion graphics.

Does this composition framework support multiple aspect ratios for app and web video?▼

Yes, the composition framework supports multiple aspect ratios for web, video, and app motion graphics. It automatically calculates the required 12-column grids, baseline spacing, and safe areas to suit any specified aspect ratio.

How do I define focal hierarchy when staging frames for a product hero animation?▼

Define focal hierarchy by using the structured staging framework to organize visual weight within your frames. This establishes a clear focal point and aligns elements automatically using grid-based alignment rules for your product hero animation.

Related Skills

Explore More Design & Creative Skills→
ZateZate
17

godot-ui

Build and theme responsive Godot UIs with Control nodes, containers, and Themes.

Community
Intermediate
mohamedgshoaibmohamedgshoaib
5

make-interfaces-feel-better

Apply design engineering principles to polish frontend component visuals and motion.

Community
Intermediate
R1ve3raaTechR1ve3raaTech

gsap-timeline

Manages complex animation sequences and nesting for GSAP projects.

Community
Advanced
PatkikPatkik

i-arrange

Analyze UI spacing, hierarchy, and grid structure to create rhythmic layouts.

Community
Advanced