Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
dylantarre avatar

Spatial Thinking

  • 339 installs
  • 68 repo stars
  • Updated December 30, 2025
  • dylantarre/animation-principles

spatial-thinking is an agent skill that applies 3D spatial animation mental models so developers who design motion, layout transitions, or interactive UI can make movement feel intentional, readable, and on-brand.

About

spatial-thinking is a Design & UI/UX agent skill from dylantarre/animation-principles that teaches a sculptor-in-time mental model for UI motion. Before animating, the skill asks where elements live in 3D space and how they move through it across time—treating animation as four dimensions: depth, width, height, plus time. It applies when motion involves perspective, volume, camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships on a 2D screen. Developers reach for spatial-thinking when CSS transforms, Framer Motion sequences, or page transitions feel flat, disorienting, or physically inconsistent. The skill encodes Disney-inspired spatial discipline into concrete layout and motion decisions rather than generic easing tweaks.

  • Frames motion around hierarchy and user focus
  • Balances depth, parallax, and screen-plane movement
  • Aligns animation timing with usability goals
  • Reduces disorienting or gratuitous transitions
  • Pairs with component-level motion implementation

Spatial Thinking by the numbers

  • 339 all-time installs (skills.sh)
  • Ranked #740 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill spatial-thinking

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs339
repo stars68
Last updatedDecember 30, 2025
Repositorydylantarre/animation-principles

How do you animate UI with convincing spatial depth?

Apply spatial-thinking animation principles when designing motion, layout transitions, or interactive UI so movement feels intentional, readable, and on-brand.

Who is it for?

Frontend developers implementing product UI motion who need depth-aware transitions instead of flat slide-and-fade defaults.

Skip if: Teams needing only copy-level microcopy tone guidance or backend-only work with no interactive motion requirements.

When should I use this skill?

User asks for spatially coherent UI animation, perspective-aware transitions, or depth-consistent motion design.

What you get

Motion specs with depth-aware positioning, camera-style transitions, and spatially consistent layout animation parameters.

  • motion design rationale
  • spatial transition specs

Files

SKILL.mdMarkdownGitHub ↗

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": 1. Add overlapping elements to establish depth 2. Include Z-axis movement (toward/away from camera) 3. Use perspective in posing (near hand bigger than far hand) 4. Add environmental shadows grounding characters

When space feels "confusing": 1. Simplify depth layers 2. Establish clear foreground/background separation 3. Use staging to clarify spatial relationships 4. 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.

Related skills

How it compares

Pick spatial-thinking over generic easing guides when motion must communicate physical depth and orientation, not just timing curves.

FAQ

When should I use spatial-thinking?

spatial-thinking applies when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships across UI frames.

What mental model does spatial-thinking teach?

spatial-thinking teaches developers to think like a sculptor working in time: every frame is a frozen moment in a world with depth, and motion must travel along vectors through 3D space even on a 2D screen.

Design & UI/UXuiuxbranding

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.