12 Principles of Animation: Web UI Motion Audit Skill

LinkraphaelsalajaTool

An installable skill package by raphaelsalaja audits web animation code against Disney's twelve animation principles adapted for user interfaces.

Key points

  1. Audits code across four core categories: Timing, Easing, Physics, and Staging.
  2. Timing rules enforce animations under 300ms for user actions, consistent timings across similar elements, and no entrance transitions on context menus.
  3. Easing rules require ease-out on entrances, ease-in on exits, and restrict linear motion to progress indicators.
  4. Physics rules require subtle active-state deformation (0.95–1.05 scale), spring physics for overshoot-and-settle effects, and stagger delays capped at 50ms per item.
  5. Staging rules demand a single focal point, dimmed backdrops for dialogs, and correct z-index layering.
  6. Outputs file:line findings alongside a severity-weighted summary table.

Why it matters

Web animations frequently feel sluggish or distracting. Automating animation audits against concrete thresholds ensures consistent interaction feedback and avoids performance pitfalls across component libraries.

Analysis

The skill operationalises traditional animation theory into deterministic linter-style checks for CSS and motion components. By enforcing concrete thresholds—such as strict 300ms limits and tightly bounded scale deformations—it prioritises responsiveness and usability over decorative motion.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Jakub Krehel

    Make Interfaces Feel Better: Design Engineering Principles for Polished UIs

    Jakub Krehel shares 'make-interfaces-feel-better', a design engineering skill and guideline package for building and reviewing UI details. It covers rules across typography, surfaces, animations, icons, and performance, alongside a structured review methodology.

    Web development· Resource

  • Link:Emil Kowalski

    Emil Kowalski's Design Engineering Philosophy

    Emil Kowalski outlines his design engineering philosophy for UI polish, component craft, and interface animations. The guide highlights trained taste, compounding micro-details, and clear rules for animation frequency, custom easings, and component states.

    Web development· Resource

  • Link:Jakub Krehel

    Better UI: Ruleset for Interface Polish and Visual Refinements

    Jakub Krehel's 'better-ui' skill offers specific rules for polishing user interfaces. The guide emphasizes exact animation values, spacing calculations, and optical alignments over geometric defaults.

    Web development· Resource

  • X post:Kailash

    UI Skills: Curated Guidelines and Prompts for Higher-Quality Interfaces

    Kailash highlights five specialised skills from ui-skills.com designed to help developers and AI coding agents build better frontend interfaces, fluid physics-based animations, refined shadows, and accessible components.

    7.3kbookmarks248.3kviews

    Web development· Resource

  • X post:Kiyotaka

    Top 5 UI Skills for Design Engineers Using AI Agents

    Kiyotaka (@SubhanHQ) highlights five curated skill rulebooks designed to enhance how AI coding agents handle UI craft, animation, accessibility, and visual polish.

    986bookmarks39.5kviews

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.