Attention Direction

This is your framework for controlling where viewers look in animated scenes. It reframes the classic 12 principles of animation entirely through the lens of focus management, treating each principle as a tool for guiding audience attention. You get practical techniques like eye path mapping, attention sequencing, and debugging strategies for when scenes feel confused or empty. The mental model is simple: audiences can only look at one thing at a time, so every element either supports your intended focus or competes with it. Most useful when you're struggling with cluttered compositions or trying to choreograph complex reveals where timing and visual hierarchy actually matter.

skills.sh installs: 586
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill attention-direction --agent claude-code

Installs into .claude/skills of the current project.

Files

Attention Direction

Think like a magician controlling where the audience looks. Animation is misdirection and direction. You decide what matters, then make it impossible to miss—while hiding what shouldn't be seen yet.

Core Mental Model

Before animating any scene, ask: Where should the eye go, and in what order?

Audiences can only look at one thing at a time. Your job is to guide their attention through the frame and through time. Every element either supports focus or competes with it.

The 12 Principles Through Focus

Staging — The foundation of attention direction. Clear silhouettes. Uncluttered compositions. Important elements separated from background. Staging serves focus.

Timing — Attention follows movement. Motion against stillness commands the eye. Strategic timing controls when things get noticed. Stillness is also a tool.

Anticipation — Attention setup. Before the important thing, direct eyes to where it will happen. Anticipation is a spotlight warming up before the main act.

SKILL.md on GitHub