Disney Animation Rules Skill for Procedural Motion

What is the disney-animation-rules skill?

Its own instructions open with a warning: do not force all 12 principles into every shot. The skill asks your agent to pick the smallest set of principles that fixes the specific perceptual problem in the motion.

The folder is named disney-animation-rule-skill inside the vibe-motion/skills repository. It targets code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera and 3D scenes, especially when motion feels stiff, weightless or mechanical.

What changes in your agent's output

• The agent describes the action in one sentence first: subject, intention, force, destination and desired feeling.
• Poses come before easing. Rest, anticipation, launch, passing pose, apex, contact, overshoot and settle are blocked with durations and velocities.
• Secondary motion is derived from the primary action and starts later, so a tail or a shadow follows instead of leading.
• Impact intensity is tied to incoming speed or force, so the contact moment reads as heavy or light for a reason.
• Animation state becomes a pure function of time and inputs, which keeps frames repeatable.

How the skill works through a motion problem

• Inspect the scene, code, inputs and renderer before touching any timing.
• Rank the primary action, then every secondary action beneath it.
• Make the primary path readable with the subject drawn as a simple shape.
• Add deformation, then follow-through, then secondary action, and accents last.
• Tune timing and spacing at representative frames, then review the full motion.

Who the disney-animation-rules skill is for

Best for

• Fixing a jump, bounce, reveal or camera move that looks physically right but visually dull.
• Remotion work, where frames may render out of order and every frame must be computable on its own.
• Reviewing code-driven motion with a written checklist instead of a gut feel.
• Interface motion that needs weight and rhythm, paired with web-motion-design for page-level patterns.

Not for

• Projects that need active maintenance. The repository README says the project is no longer maintained and points to motionface.cc.
• Choosing durations for a fast productivity UI. For that, see emil-animate.
• Performance tuning. For layout thrash and dropped frames, use fixing-motion-performance.

Use it with UiChemy

The skill shapes motion code, not a WordPress site. Once an animated section looks right, UiChemy Composer can hold it as real HTML, CSS and JS in Elementor or Gutenberg. Click Get Started on uichemy.com. For a review pass, see review-animations.

How to install Disney Animation Rules Skill for Procedural Motion

the skills CLI add command pointed at vibe-motion/skills

1. Run the installer

   Run the skills CLI add command pointed at vibe-motion/skills. The README describes it as an interactive installer. The disney-animation-rule-skill folder sits next to the repository's other motion skills.

2. Pick the skill and your agent

   Use the space bar to select skills, and choose your agent, for example Claude Code. The README notes that each agent stores skills in a different path, so the agent choice matters.

3. Keep the references folder

   If you copy the folder by hand instead, keep the references folder. SKILL.md points to references/twelve-principles.md and references/implementation-patterns.md for detail, so the whole folder needs to travel together.

4. Ask for motion work

   Describe a stiff animation or ask for a new one in code. Phrases like review this animation or fix this jump match the skill's description.

Check that it loaded

Ask the agent to improve one stiff animation. It should restate the action in one sentence, list its event poses and name which principles it will apply, instead of just changing an easing curve.

Read the official instructions on GitHub

Key features

• One-sentence action briefBefore changing anything, the agent states the action as subject, intention, force, destination and desired feeling, so every later choice has a reason.
• Event pose blockingPhases such as rest, anticipation, launch, passing pose, apex, contact, overshoot and settle each get a duration, path, velocity, scale, rotation, pivot and silhouette goal.
• Ordered motion hierarchyConstraints come first, then a readable primary path, then deformation, follow-through, secondary action and finally accents. The primary motion must work without blur, particles or sound.
• Deterministic state evaluationState is computed as a function of frame or time plus inputs. Variation is seeded from stable identifiers, and nothing depends on previous renders or render order.
• Contact and continuity rulesContact anchors stay fixed during squash and recoil, and position and velocity stay continuous across phase boundaries unless a hit or snap is intended.
• Tuning by spacingWider spacing between samples reads as speed, tight spacing near an apex reads as emphasis, and delayed extremities read as flexibility and momentum.
• Deliberate asymmetryEqual ascent and descent, identical easing on every channel and synchronized body parts are flagged as mechanical, so the agent varies them on purpose.
• Review checklistNine checks cover readable stills, anticipation direction, impact response, secondary lag, intentional holds, responsive scaling and frame determinism.
• Defaults to avoidOne linear progress value for every property, generic bounce or elastic easing, constant squash and stretch, and exaggerating every channel at once are all called out.
• Reference filesThe folder adds twelve-principles.md, implementation-patterns.md and a jump comparison case study that the agent reads when a task needs deeper detail.

Frequently asked questions