motion

Coordinate motion-first UI design with archetype tokens and reduced-motion fallbacks.

Updated May 15, 2026

Search Tags:#ui #accessibility #animation #design-system #tokenization #motion #archetype

Ready to run

npx skills add https://github.com/ECFN15/design-skills-db --skill motion-ecfn15

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/ECFN15/design-skills-db/tree/main/.agents/skills/motion
Command: npx skills add https://github.com/ECFN15/design-skills-db --skill motion-ecfn15

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Motion-heavy design is complex; this skill defines a system to create kinetic, readable motion-centric interfaces.

Core Features & Use Cases

Establish a single motion archetype and a token system to ensure consistency across components.
Provide static frame tests and reduced-motion fallbacks for accessibility.
Support motion-driven narratives: hero proofs, scrubbed galleries, and interactive transitions.

Quick Start

Draft a compact <design_plan> before implementing components, selecting a single motion archetype and token system.

Frequently Asked Questions about motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design motion-first interfaces that maintain readability if animation is disabled?▼

Motion-first interfaces maintain readability by enforcing reduced-motion fallbacks and static frame tests. This ensures that scroll narratives and interactive brand experiences remain fully functional and structurally readable for users with animations disabled.

What is a motion archetype and how does it structure attention in UI design?▼

A motion archetype is a single standardized kinetic language applied across components to structure attention and reveal state through movement. Establishing one archetype ensures consistent motion-driven narratives like hero proofs and scrubbed galleries.

How do I set up a token system for consistent animation across a design system?▼

Set up an animation token system by drafting a compact design plan that coordinates tokens, components, and surfaces. This archetype tokenization enforces a single accent system, ensuring consistent motion behavior across interactive transitions.

Can I use this approach for cinematic launches and scroll narratives without breaking accessibility?▼

Yes, this approach supports cinematic launches and scroll narratives while maintaining accessibility. It enforces reduced-motion fallbacks and static frame tests, ensuring that motion-heavy sites remain accessible and readable when animation capabilities are restricted.

Do I need a design plan before implementing motion-heavy components?▼

Yes, you need to draft a compact design plan before implementing components. This plan selects a single motion archetype and token system, which coordinates tokens, components, and surfaces to ensure your kinetic interfaces remain consistent.

What's the best way to coordinate motion tokens across interactive brand experiences?▼

The best way to coordinate motion tokens is to enforce a single accent system and archetype tokens across all surfaces. This coordinates tokens and components, ensuring interactive brand experiences deliver consistent kinetic movement without visual fragmentation.