smithery/dylantarre

1

micro-100-200ms Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animation…

smithery/dylantarre

0

2

micro-interactions Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or not…

smithery/dylantarre

0

3

modals-dialogs Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits

smithery/dylantarre

0

4

motion-designer Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on cra…

smithery/dylantarre

0

5

motion-one Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)

smithery/dylantarre

0

6

motion-scale Generates animation duration, easing curves, and delay tokens with prefers-reduced-motion support. Use when creating …

smithery/dylantarre

0

7

orchestrated-sequences Use when building multi-part animation sequences - staggered reveals, choreographed UI, coordinated motion where mult…

smithery/dylantarre

0

8

physics-intuition Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any eleme…

smithery/dylantarre

0

9

power-confidence Use when creating animations that convey strength, authority, or bold confidence in brand and product.

smithery/dylantarre

0

10

presentations Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.

smithery/dylantarre

0

11

radius-scale Generates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, c…

smithery/dylantarre

0

12

react-spring Use when implementing Disney's 12 animation principles with React Spring's physics-based animations

smithery/dylantarre

0

13

responsive-adaptive Use when building context-dependent animations - duration that changes based on device, distance, user preference, or…

smithery/dylantarre

0

14

responsive-typography Implements fluid typography using CSS clamp() that scales with viewport. Use when creating responsive font sizes, vie…

smithery/dylantarre

0

15

rive-animations Use when implementing Disney's 12 animation principles with Rive interactive animations

smithery/dylantarre

0

16

scroll-animations Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scro…

smithery/dylantarre

0

17

secondary-action-mastery Use when enriching primary animations, adding supporting details, creating depth in motion, or making scenes feel ali…

smithery/dylantarre

0

18

shadow-scale Generates layered box-shadow elevation tokens for depth hierarchy. Use when creating elevation systems, card shadows,…

smithery/dylantarre

0

19

slow-800-1200ms Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments wh…

smithery/dylantarre

0

20

slow-in-out-mastery Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making mo…

smithery/dylantarre

0

21

small-200-300ms Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions th…

smithery/dylantarre

0

22

spatial-thinking Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positi…

smithery/dylantarre

0

23

staging-mastery Use when composing scenes, designing layouts, directing user attention, or ensuring a single clear idea is communicat…

smithery/dylantarre

0

24

state-changes Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or …

smithery/dylantarre

0

25

technical-constraints Use when animation is limited by browser support, platform capabilities, or technical requirements

smithery/dylantarre

0

26

timing-calibration Use when animation speed feels wrong—too fast, too slow, or inconsistent

smithery/dylantarre

0

27

timing-mastery Use when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or an…

smithery/dylantarre

0

28

travel-hospitality Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experienc…

smithery/dylantarre

0

29

universal-industry Use when designing animations for any industry or when industry-specific guidelines do not apply

smithery/dylantarre

0

30

universal-mindset Use when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, o…

smithery/dylantarre

0

31

universal-practitioner Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 p…

smithery/dylantarre

0

32

universal-tool Use when implementing Disney's 12 animation principles with any animation tool or framework

smithery/dylantarre

0

33

user-feedback-clarity Use when users don't notice feedback, miss state changes, or can't tell if their action worked

smithery/dylantarre

0

34

ux-friction Use when animation causes user confusion, delays task completion, or creates frustration

smithery/dylantarre

0

35

z-index-scale Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-…

smithery/dylantarre

0