
disney-animation-rule-skill
Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes; especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.
- Installs
- 660
- Last 24h
- +14
- Trending rank
- #7200
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/vibe-motion/skills --skill disney-animation-rule-skill- 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 disney-animation-rule-skill 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.
Disney Animation Rules for Procedural Animation
Design motion for readable intent, weight, rhythm, and personality. Treat physical simulation and interpolation as inputs, not as the final animation.
Do not force all 12 principles into every shot. Select the smallest set that fixes the perceptual problem.
Workflow
- Inspect the scene, code, inputs, renderer, and project constraints before changing motion.
- State the action in one sentence: subject, intention, force, destination, and desired feeling.
- Identify the primary action and rank all secondary actions beneath it.
- Block semantic phases and event poses before selecting easing curves.
- Select relevant principles from
references/twelve-principles.md. - Define one deterministic state evaluator from frame or time plus explicit inputs.
- Derive deformation, overlap, accents, and effects from primary motion or semantic events.
- Tune timing and spacing at representative frames, then review the full motion.
- Remove effects that hide weak posing, unclear timing, broken contacts, or poor silhouettes.
For detailed engineering patterns, read references/implementation-patterns.md. For the motivating jump comparison, read references/clawd-jump-case-study.md.
Block the Action
Define event poses such as:
- Rest or setup
- Anticipation
- Commitment or launch
- Passing pose
- Apex, hold, or decision point
- Contact or impact
- Overshoot
- Settle or recovery
Adapt the vocabulary to the action. A button press may use rest, press, contact, overshoot, and settle. A camera move may use establish, accelerate, reveal, brake, and settle.
For each phase, specify:
- Duration or duration ratio
- Position and path
- Velocity at each boundary
- Scale, rotation, and pivot
- Contact constraints
- Silhouette or readability goal
- Secondary-action lag
- Optional accent such as smear, blink, particles, or camera shake
Prefer a phase table or explicit constants over one opaque easing expression.
Build the Motion Hierarchy
Build in this order:
- Preserve functional constraints, contacts, bounds, and input behavior.
- Make the primary path and timing readable with the subject rendered as a simple shape.
- Add pose changes and deformation around force and contact events.
- Add follow-through and overlap with controlled phase offsets.
- Add secondary action that reinforces, never competes with, the main action.
- Add accents only where speed, impact, or clarity justify them.
Make the primary motion work without motion blur, particles, trails, or sound.
Engineer Deterministically
- Compute animation state as
state = f(frameOrTime, inputs, parameters). - Keep evaluation independent of previous renders and render order.
- Preserve fractional frames through interpolation and derivative calculations.
- Seed procedural variation from stable identifiers; never use unseeded randomness during rendering.
- Derive velocity and acceleration analytically or by sampling the pure state function.
- Snapshot interactive inputs at an intentional commitment event when later changes would break the action.
- Keep contact anchors fixed during squash, stretch, recoil, or settle unless sliding is intentional.
- Preserve position and velocity continuity across phase boundaries unless a deliberate hit, cut, or snap requires discontinuity.
- Normalize thresholds and amplitudes by subject size, travel distance, viewport, or scene scale.
- Clamp exaggeration to protect legibility, geometry, and interaction constraints.
For Remotion, make every frame independently calculable because frames may render in parallel and out of order. For browser-based 3D work in environments that prohibit Remotion for 3D, use the project's Puppeteer capture workflow.
Tune by Perception
Judge spacing, not just curves:
- More distance between samples reads as more speed.
- A short preparation followed by a large spacing change reads as force.
- Closely spaced samples near an apex or decision point create emphasis.
- Fast contact followed by compression and recovery creates weight.
- Delayed extremities create flexibility and momentum.
- A clean silhouette creates clarity before detail does.
Use asymmetry deliberately. Equal ascent and descent, identical easing on every channel, and synchronized body parts often read as mechanical.
Review Checklist
- Read the action correctly from a few still frames.
- Confirm anticipation points in the direction of the coming action.
- Confirm the path, orientation, and deformation agree with velocity and force.
- Confirm impact intensity responds to incoming speed or force.
- Confirm secondary action starts later and settles later than the primary action.
- Confirm holds are intentional and do not freeze every channel.
- Confirm responsive layouts preserve the same action logic at different scales and endpoints.
- Confirm no effect compensates for a weak pose or broken transition.
- Confirm each rendered frame is deterministic for identical inputs.
Avoid These Defaults
- Do not use one linear progress value for every property.
- Do not assume a symmetric parabola automatically creates a convincing jump.
- Do not add generic bounce or elastic easing without identifying the force and pivot.
- Do not apply squash and stretch continuously; concentrate it around acceleration and contact.
- Do not let secondary motion lead the primary action.
- Do not preserve physical realism at the cost of readability.
- Do not exaggerate every channel at once.
- Do not introduce stateful frame-to-frame simulation into an out-of-order renderer.
FAQ
What does the disney-animation-rule-skill skill do?
Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes; especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.
How do I install disney-animation-rule-skill?
Run npx skills add https://github.com/vibe-motion/skills --skill disney-animation-rule-skill 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/disney-animation-rule-skill/ (personal) or .claude/skills/disney-animation-rule-skill/ (project).
Which AI agents can use disney-animation-rule-skill?
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 disney-animation-rule-skill 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 disney-animation-rule-skill?
It is published by vibe-motion in vibe-motion/skills. It has 660 recorded installs.
More from vibe-motion/skills
svg-assembly-animator
vibe-motion/skills
为 SVG 矢量图创建充满“力量感”与“速度感”的零件组装动画,并支持一键导出 30fps 的透明背景序列帧。适用于需要将静态 SVG 转换为可用于视频剪辑(如 AE/PR)的透明素材场景。
claude-typer
vibe-motion/skills
Render a Claude-style prompt typing animation video by calling Remotion CLI against the remote site https://www.laosunwendao.com. Use when the user asks for "做一个 claude 的提示词打字机动画", "做 Claude 打字动画", "创建提示词动画", or similar requests that convert a text prompt into a typing-animation video.
procedural-fish-render
vibe-motion/skills
Clone or update https://github.com/vibe-motion/procedural-fish and render procedural-fish animation to a video using the project's own render command. Use when the user asks to render 程序鱼/procedural fish, export a 程序鱼视频, or run procedural-fish Remotion rendering.
ruler-progress-render
vibe-motion/skills
Clone or update https://github.com/sxhzju/ruler-progress-animator and render a ruler progress video with default parameters. Use when users ask for requests like "绘制个尺子进度条", "做个尺子进度动画", "渲染 ruler progress", or ask to export the default demo video from this project.
remotion-3d-ticker
vibe-motion/skills
Creates infinite 3D vertical scrolling ticker animations in Remotion. Use when you need to build a parallax gallery, infinite image scroll, multi-column continuous vertical scrolling effect, or a 3D photo wall (3D照片滚动墙 / 3D相册瀑布流).
light-spotlight-render
vibe-motion/skills
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.
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.