agentsclimarketplace

Motion principles

Skill Dragoon0x/everything-design-taste/skills/motion-principles

A taste system for AI agents. 288 skills, 80 agents, 12 rules, and 8 hooks that turn generic AI output into work with genuine design quality. Anti-slop detection, typography craft, color systems, brand voice, product strategy, and 50+ specialized reviewers across UI, industry, platform, and content domains.

Install
npx -y skills add Dragoon0x/everything-design-taste --skill motion-principles

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Animation purpose, timing, easing philosophy, and motion as a design language element rather than decoration.

SKILL.md

2.4 KB, as published. Nobody here has run it

Motion Principles

Motion Has Purpose

Every animation answers one of these questions:

  1. Where did this come from? (spatial orientation)
  2. What just happened? (state feedback)
  3. What should I look at? (attention direction)
  4. What's related? (grouping/connection)

If an animation doesn't answer any of these, remove it.

Timing

Duration Scale

  • Micro-interactions (hover, toggle): 100-200ms
  • Element transitions (fade, slide): 200-300ms
  • Page transitions: 300-500ms
  • Complex orchestrations: 500-800ms
  • Loading/progress: match actual duration

The 300ms Rule

Most UI animations should be under 300ms. Users perceive anything longer as slow. The exception is orchestrated sequences where staggered delays create rhythm.

Easing

Which Curve When

  • ease-out (decelerate): Elements entering the screen. They arrive and settle.
  • ease-in (accelerate): Elements leaving the screen. They start slow and exit fast.
  • ease-in-out: Elements moving between two visible positions.
  • linear: Progress bars, loading spinners. Never for UI transitions.
  • spring/bounce: Playful brands only. Subtle. Never on critical UI.

Custom Curves

/* Snappy entrance */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

/* Smooth move */
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

/* Gentle settle */
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

Stagger Patterns

When animating multiple items (list items, grid cards), stagger by 30-60ms per item. Cap total duration at 600ms (after ~10 items, start them together in groups).

Reduced Motion

Always respect prefers-reduced-motion. This is not optional.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Anti-Patterns

  • Animations that block interaction (can't click until animation finishes)
  • Parallax scrolling on mobile (performance killer, motion sickness trigger)
  • Loading spinners when a skeleton screen would work
  • Bounce effects on serious/professional products
  • Animation on every single element (visual noise)

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.