
spatial-thinking
Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.
- Installs
- 527
- 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 spatial-thinking- 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 spatial-thinking 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.
Spatial Thinking
Think like a sculptor working in time. Your characters exist in three-dimensional space, even on a 2D screen. Every frame is a frozen moment in a world with depth.
Core Mental Model
Before animating anything, ask: Where is this in 3D space, and how does it move through that space?
Animation is 4D: three spatial dimensions plus time. Characters have fronts and backs. Rooms have depth. Actions travel along vectors through real (imagined) environments.
The 12 Principles Through Dimension
Solid Drawing — The foundation of spatial thinking. Every object has volume. Turn it around in your mind. Know what the back looks like. Draw through forms, not around them.
Arcs — All movement happens in 3D space. An arm swinging traces a curve through depth, not just across the screen. Think spherical paths, not flat shapes.
Staging — Spatial composition. Where in the Z-axis is each element? Foreground, midground, background create depth. Overlap establishes position in space.
Squash & Stretch — Deformation happens in 3D. When a ball squashes, it spreads outward in all directions, not just sideways. Maintain volume in depth.
Anticipation — Movement into the screen reads differently than across it. Anticipation toward camera: foreshortening increases. Away: forms recede.
Follow Through & Overlapping Action — Trailing elements exist in 3D. Hair doesn't just swing left-right; it wraps around forms, falls with gravity, catches on shoulders.
Secondary Action — Supporting elements occupy their own spatial positions. A cape occupies the space behind a character. Spatial consistency sells reality.
Timing — Depth affects perceived timing. Objects moving toward/away from camera have different visual rhythms than horizontal movement. Foreshortening compresses distance.
Slow In & Slow Out — Acceleration reads differently in depth. Objects approaching camera grow rapidly at the end (looming effect). Factor Z-axis speed changes.
Exaggeration — Spatial exaggeration includes depth. Characters can lean impossibly far into frame. Environments can stretch beyond physical possibility while maintaining spatial logic.
Appeal — Dynamic spatial composition is appealing. Interesting angles, depth variation, and dimensional poses create visual interest.
Straight Ahead & Pose to Pose — 3D motion paths are easier to plan (pose to pose). Complex spatial action benefits from knowing key positions in space before animating between them.
Practical Application
Spatial Awareness Checklist:
- Where is the floor? Characters need grounding.
- Where is the light source? It defines form.
- What overlaps what? Establish depth order.
- What's the camera angle? Affects all foreshortening.
- What exists off-screen? Implied space matters.
Common Spatial Errors:
- Floating: Characters not connected to environment
- Flattening: Losing depth in complex poses
- Scale drift: Objects changing size unintentionally
- Tangents: Edges aligning in ways that flatten depth
- Perspective inconsistency: Elements not sharing the same spatial grid
When animation feels "flat":
- Add overlapping elements to establish depth
- Include Z-axis movement (toward/away from camera)
- Use perspective in posing (near hand bigger than far hand)
- Add environmental shadows grounding characters
When space feels "confusing":
- Simplify depth layers
- Establish clear foreground/background separation
- Use staging to clarify spatial relationships
- Add establishing shots before complex action
Thinking in Depth:
- Turn poses 45 degrees in your mind
- Imagine the camera orbiting your scene
- Consider what's behind every surface
- Track objects through continuous 3D paths
The Golden Rule
The screen is a window, not a canvas. You're not decorating a flat surface—you're revealing a world that extends in all directions. Every element occupies a position in that world. Honor the space.
FAQ
What does the spatial-thinking skill do?
Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.
How do I install spatial-thinking?
Run npx skills add https://github.com/dylantarre/animation-principles --skill spatial-thinking 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/spatial-thinking/ (personal) or .claude/skills/spatial-thinking/ (project).
Which AI agents can use spatial-thinking?
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 spatial-thinking 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 spatial-thinking?
It is published by dylantarre in dylantarre/animation-principles. It has 527 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.