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

Naturalistic Motion

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

Apply physics-informed easing, overlap, and staging so UI transitions, hovers, and gestures feel organic instead of stiff across web and mobile product surfaces.

About

Skill from dylantarre/animation-principles for naturalistic-motion: guides developers and designers applying believable motion—timing curves, overlap, drag physics, and staged transitions—to product interfaces so interactions feel intentional, premium, and consistent across components and pages.

  • Translates animation principles into implementable easing and transition patterns
  • Balances anticipation, follow-through, and restraint to avoid motion overload
  • Aligns micro-interactions with accessibility and prefers-reduced-motion needs
  • Connects staging and overlap to credible state-change storytelling in UI

Naturalistic Motion by the numbers

  • 330 all-time installs (skills.sh)
  • Ranked #757 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 naturalistic-motion

Add your badge

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

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

What it does

Apply physics-informed easing, overlap, and staging so UI transitions, hovers, and gestures feel organic instead of stiff across web and mobile product surfaces.

Files

SKILL.mdMarkdownGitHub ↗

Naturalistic Motion

Think like a biologist watching life unfold. Nothing in nature moves mechanically. Everything breathes, adjusts, responds. Life is continuous subtle motion.

Core Mental Model

Before animating anything alive, ask: What is this creature feeling and responding to?

Living things are never truly still. They shift weight, breathe, notice, adjust. Naturalistic motion isn't about copying reality—it's about capturing aliveness.

The 12 Principles Through Organic Life

Secondary Action — Life is layered motion. While a character talks, they breathe. While they breathe, they blink. While they blink, their weight shifts. Stack subtle actions.

Follow Through & Overlapping Action — Bodies are systems of connected parts. Movement cascades through joints and soft tissue. Nothing moves in isolation.

Arcs — Nature abhors straight lines. Every joint creates rotation. Every movement traces curves. Study the path of a hand gesture—it's never linear.

Slow In & Slow Out — Organic motion accelerates and decelerates continuously. Muscles engage and release. This is what makes movement look "alive" rather than robotic.

Timing — Life has varied timing. Quick glances, slow stretches, medium walks. The diversity of speeds creates believable organism behavior.

Squash & Stretch — Flesh is malleable. Skin wrinkles, muscles bulge, fat jiggles. Even subtle squash and stretch sells organic tissue.

Anticipation — Living things telegraph intention. Watch a cat before it pounces. The body organizes itself before action. Include preparatory micro-movements.

Solid Drawing — Anatomy matters. Understand skeletal structure, muscle groups, and how they connect. Organic motion respects physical construction.

Appeal — Naturalistic doesn't mean realistic. Appealing organic motion is idealized life—the essence of a cat, not a veterinary diagram.

Exaggeration — Subtle exaggeration. Naturalistic motion pushes organic qualities just 10-20% past reality. Enough to read clearly, not enough to break believability.

Staging — Let organic motion read. Don't let naturalistic complexity become visual noise. Clarity serves believability.

Straight Ahead & Pose to Pose — Organic motion often benefits from straight ahead animation for its emergent quality. Let movement discover itself.

Practical Application

Signs of Life:

  • Breathing: Constant subtle chest/belly movement
  • Weight shifts: Never perfectly balanced
  • Micro-saccades: Eyes are never frozen
  • Postural adjustments: Comfort-seeking behavior
  • Environmental awareness: Reactions to sound, light, temperature

Common Naturalistic Mistakes:

  • Twinning: Both arms doing exactly the same thing (never happens in nature)
  • Perfect symmetry: Living poses are asymmetrical
  • IK lock: Limbs shouldn't feel pinned to points in space
  • Mechanical timing: Uniform speed reads as robotic

When motion feels "dead": 1. Add breathing rhythm 2. Introduce subtle weight shifts 3. Offset timing between left/right 4. Include environmental micro-reactions

When motion feels "noisy": 1. Reduce secondary motion layers 2. Clarify the primary intention 3. Slow down and simplify 4. Establish clearer pose hierarchies

Reference is Essential:

  • Study video reference of real creatures
  • Film yourself performing the action
  • Watch slow-motion footage to understand mechanics
  • Observe animals at rest, not just in action

The Golden Rule

Living things are always doing something, even when doing nothing. The baseline state of life is gentle motion. Stillness in animation equals death. Let your creatures breathe.

Related skills

This week in AI coding

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

unsubscribe anytime.