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 tokens for an interface v1.0.0

Use this resource to standardize an interface's motion with design tokens

New

  • 305 downloads
  • 242 likes
  • 199 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install motion-token-system

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 proposes a scale of named durations, an easing vocabulary, choreography rules and reduced-motion handling. You get a documented motion system expressed as CSS properties, ready to sit next to your color and spacing tokens.

Mostly picked by

Updated November 2, 2026

Tables of duration and easing tokens from a motion system.

Details

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

Similar resources

View all

What you get

  • SKILL.md: the method for defining a motion system
  • An example scale of 6 durations and 5 easing curves
  • Choreography rules: stagger, coordination, total duration
  • System-level handling of prefers-reduced-motion

Good fit for

  • You are building a design system and want to add motion
  • Each animation on your site has its own duration
  • You want a shared language between design and engineering

Not for

  • Crafting one specific animation or visual effect
  • Producing a motion-design video
  • Game or film animation

Tags

  • motion
  • design system
  • tokens
  • accessibility
  • css

About

You say

"Define the motion tokens for my site: durations, easing curves and prefers-reduced-motion behavior."

Tables of duration and easing tokens from a motion system.

Skill published by owl-listener under the MIT license.

Show more

Prerequisites

You bring
A description of your product or design system and The motion tone you want (quick, calm, playful)

How to use it

  1. Describe your product and the motion tone you want.
  2. Approve the proposed duration scale, curves and principles.
  3. Collect the CSS properties and the documentation for each token.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md4.5 KB

Origin and licence

Modified by PalateKit

Author
owl-listener
Source
github.com/owl-listener/designer-skills/tree/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system
Licence
MIT

Notice

Version modifiée de « motion-system » (owl-listener, 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

How many tokens should I create?

The skill recommends 4 to 6 durations and never more tokens than distinct use cases.

Does it build the animations themselves?

No, it defines the shared vocabulary. For one specific animation it points to a neighboring skill, animation-principles, which you do not need to use it.