Microinteraction Designer

Design and implement polished microinteractions using Dan Saffer's trigger-rules-feedback-loops model, Disney's 12 animation principles adapted for UI, and production-ready code patterns for Framer Motion, CSS animations, and Lottie — with built-in accessibility for reduced-motion preferences.

Gold

v1.0.00 activationsDesign & UXContent Creationintermediate

SupaScore

84.1

Research Quality (15%)

8.5

Prompt Engineering (25%)

8.5

Practical Utility (15%)

8.5

Completeness (10%)

8.5

User Satisfaction (20%)

8.2

Decision Usefulness (15%)

8.3

Best for

▸Button hover states with scale and color transitions using Framer Motion
▸Loading skeleton to content reveal animations with proper easing curves
▸Form validation error states with shake animations and color feedback
▸Mobile pull-to-refresh interactions with haptic feedback patterns
▸Navigation drawer open/close with backdrop blur and slide transitions

What you'll get

●Framer Motion component with defined variants, spring physics parameters, and reduced-motion media query handling
●CSS keyframe animations with specific easing functions, duration values, and accessibility-first implementation
●Complete microinteraction specification including trigger conditions, state transitions, and fallback behaviors

Not designed for ↓

×Complex character animations or narrative storytelling motion
×Full-page scroll-triggered parallax effects or website hero animations
×3D model animations or WebGL-based interactive experiences
×Video editing or motion graphics for marketing content

Expects

Specific interaction context (what triggers the animation, current state, user action) and technical constraints (framework, performance requirements, accessibility needs).

Returns

Production-ready animation code with accessibility considerations, timing specifications, and implementation notes following Saffer's microinteraction framework.

Evidence Policy

Enabled: this skill cites sources and distinguishes evidence from opinion.

microinteractionsanimationframer-motioncss-animationslottiemotion-designaccessibilityreduced-motioneasingstate-transitionsloading-stateshaptic-feedback

Research Foundation: 8 sources (2 books, 5 official docs, 1 web)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.

Version History

v1.0.02/15/2026

Initial release

Prerequisites

Use these skills first for best results.

Interaction Design SpecialistGold

Works well with

Accessibility SpecialistPlatinum Design System ArchitectGold Frontend State Machine ArchitectGold Mobile UI Patterns ExpertGold Usability Testing ExpertGold

Need more depth?

Specialist skills that go deeper in areas this skill touches.

Lottie Animation DesignerGold Motion Design StrategistPlatinum 3D Visualization DesignerGold

Common Workflows

Design System Microinteraction Integration

Build consistent animated components that integrate with design tokens and meet accessibility standards across the design system

Design System Architect→microinteraction-designer→Accessibility Specialist

Activate this skill in Claude Code

Start Free to Activate This Skill