Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Motion timing and easing rules v1.0.0

Use this resource to choose durations and easing for a UI's animations

New

  • 499 downloads
  • 140 likes
  • 250 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install motion-timing-easing-rules

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent applies concrete benchmarks: duration by interaction type, easing for entries versus exits, mandatory reduced motion and universal do-nots. It draws on three reference guides for easing, enter and exit recipes and style choice. You get consistent, fast and accessible animations.

Mostly picked by

Updated November 2, 2026

Table of durations and easing curves for UI micro-interactions and transitions.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: durations, easing, accessibility and "do not" rules
  • references/easing-guide.md: deeper look at curves and springs
  • references/enter-exit-recipes.md and references/designers.md: enter and exit patterns, style choice

Good fit for

  • Setting a shared duration scale for a site
  • Fixing animations that feel slow or janky
  • Making a site respect reduced motion

Not for

  • Building one specific animation with full code
  • A motion design video
  • A project with no animated interface

Tags

  • motion
  • easing
  • timing
  • accessibility
  • css

About

You say

"Review the durations and easing of my transitions and make them consistent, including reduced motion."

Table of durations and easing curves for UI micro-interactions and transitions.

Skill published by athevon under the MIT license.

Show more

Prerequisites

You bring
The site or components to review

How to use it

  1. Place the skill folder in your agent's skills folder.
  2. Point to the pages or components concerned.
  3. Apply the suggested fixes and test with reduced motion turned on.

Content preview

Files

  • LICENSE1.6 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/designers.md5.6 KB
  • references/easing-guide.md7.8 KB
  • references/enter-exit-recipes.md11.1 KB
  • SKILL.md9.2 KB

Origin and licence

Modified by PalateKit

Author
athevon
Source
github.com/athevon/genjutsu/tree/1f518a71378b15d423389e546e767cffc86e14c3/skills/_jutsu/motion-principles
Licence
MIT

Notice

Version modifiée de « motion-principles » (athevon, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

The skill points to sibling skills (gsap, framer-motion, etc.). Are they required?

No. They are optional pointers. The core rules and the three guides in this folder are enough.

Do the SwiftUI and Compose examples apply to me?

Only if you build a native mobile app. For a website, use the CSS and JavaScript examples.