
attention-direction
Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.
- Installs
- 540
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/dylantarre/animation-principles --skill attention-direction- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads attention-direction automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
Secondary Action — Supporting, not competing. Secondary elements should enhance focus on primary action, not steal attention. The backup singer shouldn't upstage the lead.
Follow Through & Overlapping Action — Attention carries momentum. Where one motion ends, the eye expects the next to begin. Use follow-through to guide gaze through sequences.
Exaggeration — Emphasis through amplification. Important elements are bigger, faster, more contrasted. Exaggeration says "look here." Restraint says "this can wait."
Squash & Stretch — Visual attention-grabbers. Impact frames (squash) and speed lines (stretch) create pops of visual interest that capture the eye.
Arcs — Eye paths. The audience's gaze follows arcs of motion. Design movement paths that lead attention where you want it to land.
Slow In & Slow Out — Attention ramps. Ease-in gives time to find the action. Ease-out gives time to process. Control pacing of comprehension.
Solid Drawing — Hierarchy through form. Important elements have more dimensional presence. Background elements are flatter, less detailed. Volume commands attention.
Appeal — The eye seeks appeal. Attractive elements draw focus naturally. Use appeal strategically—the most appealing thing in frame gets looked at first.
Straight Ahead & Pose to Pose — Planning attention (pose to pose) ensures focus hits are intentional. Spontaneous discovery (straight ahead) might need attention refinement afterward.
Practical Application
Attention Tools:
- Contrast: Light against dark, color against neutral
- Isolation: Space around important elements
- Size: Bigger elements read first
- Position: Center and rule-of-thirds intersections
- Motion: Movement in stillness commands eyes
- Detail: More detailed areas attract focus
- Character eyelines: Audiences look where characters look
Attention Sequence:
- Establish where eyes should start
- Plan the path through the frame
- Land on the most important element
- Allow processing time
- Transition to next focus point
Common Attention Errors:
- Competing centers: Multiple elements fighting for focus
- Buried information: Important elements lost in noise
- Nowhere to look: No clear hierarchy
- Missed beats: Focus points not held long enough
- Leading nowhere: Motion that doesn't resolve to landing point
When focus feels "confused":
- Reduce secondary motion
- Increase contrast on primary element
- Add stillness around important areas
- Simplify background during key moments
When scenes feel "empty":
- Add supporting motion (without competing)
- Use secondary action to create visual interest
- Ensure something is always moving
- Create visual rhythm in attention flow
Eye Path Mapping: Sketch your scene with arrows showing intended eye movement. If the path is unclear or chaotic, simplify. If multiple paths compete, choose one.
The Golden Rule
You can't control attention if you haven't decided what matters. Before worrying about technique, answer the fundamental question: What's the single most important thing in this frame right now? Everything else serves that.
FAQ
What does the attention-direction skill do?
Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.
How do I install attention-direction?
Run npx skills add https://github.com/dylantarre/animation-principles --skill attention-direction in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/attention-direction/ (personal) or .claude/skills/attention-direction/ (project).
Which AI agents can use attention-direction?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is attention-direction safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains attention-direction?
It is published by dylantarre in dylantarre/animation-principles. It has 540 recorded installs.
More from dylantarre/animation-principles
video-motion-graphics
dylantarre/animation-principles
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
mobile-touch
dylantarre/animation-principles
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
framer-motion
dylantarre/animation-principles
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
motion-designer
dylantarre/animation-principles
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
micro-interactions
dylantarre/animation-principles
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
web-motion-design
dylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.