shot-composition

Name: shot-composition
Availability: InStock
Author: iart-ai

Plan camera moves and grid layouts for motion graphics.

12|5|Updated Jun 22, 2026

Search Tags:#layout #composition #animation #grid #parallax #cinematography

Ready to run

npx skills add https://github.com/iart-ai/motion-design-skills --skill shot-composition

💬 Prompt for ChatGPT / Claude Chat▼

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.