Interaction Design

by wshobson46891e7e60daNo licenseListed Oct 8, 2026Updated Oct 8, 2026

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

Instructions onlyDesign & Creative Software Development

AI-generated overview

Guides design and implementation of UI microinteractions, motion, transitions, and feedback patterns.

What it does: This skill provides design guidance and code patterns for microinteractions, motion design, transitions, and user feedback in interfaces. It covers timing and easing scales, loading and skeleton states, toggles, page transitions, ripple feedback, gestures, CSS keyframes, and accessibility for reduced motion. It produces reference patterns and example code rather than running scripts.
When to use it: Use it when adding polish to UI interactions, implementing loading states, or designing hover, focus, and gesture feedback. It suits teams wanting consistent motion timing and accessible animation behavior.
Requirements: No scripts; instructions and reference documents only. Examples assume a React/TypeScript frontend with Framer Motion and CSS, but no installation or credentials are specified.

Interaction Design

Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users.

When to Use This Skill

Adding microinteractions to enhance user feedback
Implementing smooth page and component transitions
Designing loading states and skeleton screens
Creating gesture-based interactions
Building notification and toast systems
Implementing drag-and-drop interfaces
Adding scroll-triggered animations
Designing hover and focus states

Core Principles

1. Purposeful Motion

Motion should communicate, not decorate:

Feedback: Confirm user actions occurred
Orientation: Show where elements come from/go to
Focus: Direct attention to important changes
Continuity: Maintain context during transitions

2. Timing Guidelines

3. Easing Functions

css

/* Common easings */--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */--ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot - playful */

/* Common easings */--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */--ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot - playful */

Quick Start: Button Microinteraction

tsx

import { motion } from "framer-motion";
export function InteractiveButton({ children, onClick }) {  return (    <motion.button      onClick={onClick}      whileHover={{ scale: 1.02 }}      whileTap={{ scale: 0.98 }}      transition={{ type: "spring", stiffness: 400, damping: 17 }}      className="px-4 py-2 bg-blue-600 text-white rounded-lg"    >      {children}    </motion.button>  );}

import { motion } from "framer-motion";
export function InteractiveButton({ children, onClick }) {  return (    <motion.button      onClick={onClick}      whileHover={{ scale: 1.02 }}      whileTap={{ scale: 0.98 }}      transition={{ type: "spring", stiffness: 400, damping: 17 }}      className="px-4 py-2 bg-blue-600 text-white rounded-lg"    >      {children}    </motion.button>  );}

Interaction Patterns

1. Loading States

Skeleton Screens: Preserve layout while loading

tsx

function CardSkeleton() {  return (    <div className="animate-pulse">      <div className="h-48 bg-gray-200 rounded-lg" />      <div className="mt-4 h-4 bg-gray-200 rounded w-3/4" />      <div className="mt-2 h-4 bg-gray-200 rounded w-1/2" />    </div>  );}

function CardSkeleton() {  return (    <div className="animate-pulse">      <div className="h-48 bg-gray-200 rounded-lg" />      <div className="mt-4 h-4 bg-gray-200 rounded w-3/4" />      <div className="mt-2 h-4 bg-gray-200 rounded w-1/2" />    </div>  );}

Progress Indicators: Show determinate progress

tsx

function ProgressBar({ progress }: { progress: number }) {  return (    <div className="h-2 bg-gray-200 rounded-full overflow-hidden">      <motion.div        className="h-full bg-blue-600"        initial={{ width: 0 }}        animate={{ width: `${progress}%` }}        transition={{ ease: "easeOut" }}      />    </div>  );}

function ProgressBar({ progress }: { progress: number }) {  return (    <div className="h-2 bg-gray-200 rounded-full overflow-hidden">      <motion.div        className="h-full bg-blue-600"        initial={{ width: 0 }}        animate={{ width: `${progress}%` }}        transition={{ ease: "easeOut" }}      />    </div>  );}

2. State Transitions

Toggle with smooth transition:

tsx

function Toggle({ checked, onChange }) {  return (    <button      role="switch"      aria-checked={checked}      onClick={() => onChange(!checked)}      className={`        relative w-12 h-6 rounded-full transition-colors duration-200        ${checked ? "bg-blue-600" : "bg-gray-300"}      `}    >      <motion.span        className="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow"        animate={{ x: checked ? 24 : 0 }}        transition={{ type: "spring", stiffness: 500, damping: 30 }}      />    </button>  );}

function Toggle({ checked, onChange }) {  return (    <button      role="switch"      aria-checked={checked}      onClick={() => onChange(!checked)}      className={`        relative w-12 h-6 rounded-full transition-colors duration-200        ${checked ? "bg-blue-600" : "bg-gray-300"}      `}    >      <motion.span        className="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow"        animate={{ x: checked ? 24 : 0 }}        transition={{ type: "spring", stiffness: 500, damping: 30 }}      />    </button>  );}

3. Page Transitions

Framer Motion layout animations:

tsx

import { AnimatePresence, motion } from "framer-motion";
function PageTransition({ children, key }) {  return (    <AnimatePresence mode="wait">      <motion.div        key={key}        initial={{ opacity: 0, y: 20 }}        animate={{ opacity: 1, y: 0 }}        exit={{ opacity: 0, y: -20 }}        transition={{ duration: 0.3 }}      >        {children}      </motion.div>    </AnimatePresence>  );}

import { AnimatePresence, motion } from "framer-motion";
function PageTransition({ children, key }) {  return (    <AnimatePresence mode="wait">      <motion.div        key={key}        initial={{ opacity: 0, y: 20 }}        animate={{ opacity: 1, y: 0 }}        exit={{ opacity: 0, y: -20 }}        transition={{ duration: 0.3 }}      >        {children}      </motion.div>    </AnimatePresence>  );}

4. Feedback Patterns

Ripple effect on click:

tsx

function RippleButton({ children, onClick }) {  const [ripples, setRipples] = useState([]);
  const handleClick = (e) => {    const rect = e.currentTarget.getBoundingClientRect();    const ripple = {      x: e.clientX - rect.left,      y: e.clientY - rect.top,      id: Date.now(),    };    setRipples((prev) => [...prev, ripple]);    setTimeout(() => {      setRipples((prev) => prev.filter((r) => r.id !== ripple.id));    }, 600);    onClick?.(e);  };
  return (    <button onClick={handleClick} className="relative overflow-hidden">      {children}      {ripples.map((ripple) => (        <span          key={ripple.id}          className="absolute bg-white/30 rounded-full animate-ripple"          style={{ left: ripple.x, top: ripple.y }}        />      ))}    </button>  );}

function RippleButton({ children, onClick }) {  const [ripples, setRipples] = useState([]);
  const handleClick = (e) => {    const rect = e.currentTarget.getBoundingClientRect();    const ripple = {      x: e.clientX - rect.left,      y: e.clientY - rect.top,      id: Date.now(),    };    setRipples((prev) => [...prev, ripple]);    setTimeout(() => {      setRipples((prev) => prev.filter((r) => r.id !== ripple.id));    }, 600);    onClick?.(e);  };
  return (    <button onClick={handleClick} className="relative overflow-hidden">      {children}      {ripples.map((ripple) => (        <span          key={ripple.id}          className="absolute bg-white/30 rounded-full animate-ripple"          style={{ left: ripple.x, top: ripple.y }}        />      ))}    </button>  );}

5. Gesture Interactions

Swipe to dismiss:

tsx

function SwipeCard({ children, onDismiss }) {  return (    <motion.div      drag="x"      dragConstraints={{ left: 0, right: 0 }}      onDragEnd={(_, info) => {        if (Math.abs(info.offset.x) > 100) {          onDismiss();        }      }}      className="cursor-grab active:cursor-grabbing"    >      {children}    </motion.div>  );}

function SwipeCard({ children, onDismiss }) {  return (    <motion.div      drag="x"      dragConstraints={{ left: 0, right: 0 }}      onDragEnd={(_, info) => {        if (Math.abs(info.offset.x) > 100) {          onDismiss();        }      }}      className="cursor-grab active:cursor-grabbing"    >      {children}    </motion.div>  );}

CSS Animation Patterns

Keyframe Animations

css

@keyframes fadeIn {  from {    opacity: 0;    transform: translateY(10px);  }  to {    opacity: 1;    transform: translateY(0);  }}
@keyframes pulse {  0%,  100% {    opacity: 1;  }  50% {    opacity: 0.5;  }}
@keyframes spin {  to {    transform: rotate(360deg);  }}
.animate-fadeIn {  animation: fadeIn 0.3s ease-out;}.animate-pulse {  animation: pulse 2s ease-in-out infinite;}.animate-spin {  animation: spin 1s linear infinite;}

@keyframes fadeIn {  from {    opacity: 0;    transform: translateY(10px);  }  to {    opacity: 1;    transform: translateY(0);  }}
@keyframes pulse {  0%,  100% {    opacity: 1;  }  50% {    opacity: 0.5;  }}
@keyframes spin {  to {    transform: rotate(360deg);  }}
.animate-fadeIn {  animation: fadeIn 0.3s ease-out;}.animate-pulse {  animation: pulse 2s ease-in-out infinite;}.animate-spin {  animation: spin 1s linear infinite;}

CSS Transitions

css

.card {  transition:    transform 0.2s ease-out,    box-shadow 0.2s ease-out;}
.card:hover {  transform: translateY(-4px);  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);}

.card {  transition:    transform 0.2s ease-out,    box-shadow 0.2s ease-out;}
.card:hover {  transform: translateY(-4px);  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);}

Accessibility Considerations

css

/* Respect user motion preferences */@media (prefers-reduced-motion: reduce) {  *,  *::before,  *::after {    animation-duration: 0.01ms !important;    animation-iteration-count: 1 !important;    transition-duration: 0.01ms !important;  }}

/* Respect user motion preferences */@media (prefers-reduced-motion: reduce) {  *,  *::before,  *::after {    animation-duration: 0.01ms !important;    animation-iteration-count: 1 !important;    transition-duration: 0.01ms !important;  }}

tsx

function AnimatedComponent() {  const prefersReducedMotion = window.matchMedia(    "(prefers-reduced-motion: reduce)",  ).matches;
  return (    <motion.div      animate={{ opacity: 1 }}      transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}    />  );}

function AnimatedComponent() {  const prefersReducedMotion = window.matchMedia(    "(prefers-reduced-motion: reduce)",  ).matches;
  return (    <motion.div      animate={{ opacity: 1 }}      transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}    />  );}

Best Practices

Performance First: Use transform and opacity for smooth 60fps
Reduce Motion Support: Always respect prefers-reduced-motion
Consistent Timing: Use a timing scale across the app
Natural Physics: Prefer spring animations over linear
Interruptible: Allow users to cancel long animations
Progressive Enhancement: Work without JS animations
Test on Devices: Performance varies significantly

Common Issues

Janky Animations: Avoid animating width, height, top, left
Over-animation: Too much motion causes fatigue
Blocking Interactions: Never prevent user input during animations
Memory Leaks: Clean up animation listeners on unmount
Flash of Content: Use will-change sparingly for optimization

Source and attribution

Source:wshobson/agentsinplugins/ui-design/skills/interaction-designat commit46891e7

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Duration	Use Case
100-150ms	Micro-feedback (hovers, clicks)
200-300ms	Small transitions (toggles, dropdowns)
300-500ms	Medium transitions (modals, page changes)
500ms+	Complex choreographed animations

Interaction Design

Interaction Design

When to Use This Skill

Core Principles

1. Purposeful Motion

2. Timing Guidelines

3. Easing Functions

Quick Start: Button Microinteraction

Interaction Patterns

1. Loading States

2. State Transitions

3. Page Transitions

4. Feedback Patterns

5. Gesture Interactions

CSS Animation Patterns

Keyframe Animations

CSS Transitions

Accessibility Considerations

Best Practices

Common Issues

Source and attribution

More from wshobson/agents

Uv Package Manager

Web Component Design

Python Type Safety

Visual Design Foundations

Responsive Design

Python Resource Management

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design