motion-choreography-patterns

Define structured UI motion choreography with precise timing sequences and fallback strategies for complex animations.

5|Updated Jan 14, 2025
One-click install
npx skills add https://github.com/timmo001/dotfiles --skill motion-choreography-patterns-timmo001
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion-choreography-patterns
Source: https://github.com/timmo001/dotfiles/tree/main/agents/.config/opencode/skills/motion-choreography-patterns
Command: npx skills add https://github.com/timmo001/dotfiles --skill motion-choreography-patterns-timmo001

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Precisely orchestrates the movement of multiple UI elements to enhance clarity and user experience during complex interactions.

Core Features & Use Cases

  • Designing multi-element UI animations such as staggered reveals, list reordering, and modal stacks.
  • Implementing choreographed motion sequences that communicate interaction flow and hierarchy.
  • Use Case: Building a modal with staggered content or a list reordering animation that maintains user context and reduces disorientation.

Quick Start

Describe the sequences and timing for UI transitions involving multiple animated elements.

Frequently Asked Questions about motion-choreography-patterns

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

FAQPage Schema
How do I choreograph UI motions for complex multi-element animations?

To choreograph UI motions, you define structured sequences focusing on timing, sequencing, and hierarchy. This coordinates multiple animated elements during complex interactions to enhance clarity and maintain user context.

What is the best way to animate staggered list reordering without disorienting users?

The best way to animate staggered list reordering is using choreographed motion sequences that communicate interaction flow and hierarchy. This maintains user context and reduces disorientation during complex UI transitions.

How do I structure timing and sequencing for modal stack transitions?

Structuring timing and sequencing for modal stack transitions involves defining precise timelines and fallback strategies. This ensures production-ready motion patterns that communicate clear interaction flow and visual hierarchy.

When do I need structured motion choreography for user interfaces?

You need structured motion choreography when building complex UI animations like modal stacks with staggered content or list reordering. It orchestrates multiple moving elements to improve user experience and reduce visual disorientation.

Can I use this motion choreography approach for route and feedback transitions?

Yes, you can apply this motion choreography approach to route and feedback transitions. It defines production-ready motion patterns with precise timelines and fallback strategies, adhering to design principles for clarity and consistency.