interaction-design

# Interaction Design Create intuitive user experiences through thoughtful feedback and interaction patterns. ## Interaction Patterns | Pattern | Duration | Use Case | |---------|----------|----------| | Microinteraction | 100-200ms | Button press, toggle | | Transition | 200-400ms | Page change, modal | | Entrance | 300-500ms | List items appearing | ## Loading States ```css /* Skeleton loader */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } ``` ```jsx function LoadingState({ isLoading, children }) { if (isLoading) { return <div className="skeleton" style={{ height: 200 }} />; } return children; } ``` ## Error States ```jsx function ErrorState({ error, onRetry }) { return ( <div className="error-container" role="alert"> <Icon name="warning" /> <h3>Something went wrong</h3> <p>{error.message}</p> <button onClick={onRetry}>Try Again</button> </div> ); } ``` ## Empty States ```jsx function EmptyState({ title, description, action }) { return ( <div className="empty-state"> <Illustration name="empty-inbox" /> <h3>{title}</h3> <p>{description}</p> {action && <button onClick={action.onClick}>{action.label}</button>} </div> ); } ``` ## Accessibility ```jsx // Announce state changes...