motion-and-storytelling

Design UI motion for state changes, hierarchy, and interaction feedback.

33|6|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill motion-and-storytelling-dembrandt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-and-storytelling
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/motion-and-storytelling
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill motion-and-storytelling-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps transform motion from decoration into purposeful communication, making interfaces feel responsive, coherent, and emotionally resonant without overwhelming users.

Core Features & Use Cases

  • Animation Principles: Apply Disney's 12 principles, cinematic techniques, and comic book conventions to UI motion.
  • Motion Design Guidance: Design transitions, micro-interactions, scroll reveals, onboarding sequences, and state changes with appropriate timing, easing, staging, and direction.
  • Accessibility and Quality Review: Respect reduced-motion preferences, avoid layout animation, limit competing motion, and align animation with brand personality.
  • Use Case: Improve a modal entrance, make a button press feel more responsive, or create a subtle scroll-driven reveal that guides attention without causing visual noise.

Quick Start

Use the motion-and-storytelling skill to design a subtle, accessible transition for this component that matches the product's brand tone.

Frequently Asked Questions about motion-and-storytelling

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

FAQPage Schema
How do I design UI motion that communicates state changes without overwhelming users?▼

Design purposeful UI motion by applying meaningful easing, controlled timing, and transform or opacity-based animations to communicate state changes, hierarchy, and interaction feedback without causing visual noise.

What's the best way to add micro-interactions to a modal entrance?▼

The best way to add modal entrance micro-interactions is to apply brand-appropriate timing and staging, ensuring the transition feels responsive and emotionally resonant while aligning with the product's brand tone.

How does prefers-reduced-motion affect scroll animations and transitions?▼

Prefers-reduced-motion requires scroll animations and transitions to respect user accessibility preferences by limiting competing motion and providing a non-animated fallback for interface storytelling scenarios.

Can I use animation principles to improve button press and interaction feedback?▼

Yes, you can apply Disney's 12 principles, cinematic techniques, and comic book conventions to button presses to make interaction feedback feel more responsive, coherent, and intentional.

Why should I avoid layout animation when designing scroll reveals?▼

Avoid layout animation during scroll reveals because it disrupts interface coherence; instead, use transform and opacity-based animation to guide attention and maintain smooth state changes without visual noise.

When do I need purposeful motion design for onboarding flows?▼

You need purposeful motion design for onboarding flows when you want to create subtle, accessible transitions that guide attention and make the interface storytelling feel alive and intentional.