PixelPilot uiux-micro-interactions.instructions.md

UI/UX Micro-Interactions Library

Token-aware micro-interactions that respect prefers-reduced-motion. Enhance UX with subtle, meaningful animations.

---

OVERVIEW

Micro-interactions provide feedback and delight. This skill covers:

1. Ripple effects
2. Skeleton loaders (shimmer, pulse, wave)
3. Toast notifications
4. Pull-to-refresh
5. Drag-to-reorder
6. Button feedback
7. Form interactions

Critical Rule: All animations MUST respect prefers-reduced-motion.

---

REDUCED MOTION FOUNDATION

/* Base transition that respects user preference */
:root {
  --dur-micro: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

---

1. RIPPLE EFFECT

CSS + JavaScript

.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  transform: scale(0);
  pointer-events: none;
}

.ripple.animate {
  animation: ripple-animation var(--dur-slow) var(--ease-out) forwards;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ripple.animate {
    animation: none;
    opacity: 0;
  }
}

export function createRipple(event: MouseEvent, container: HTMLElement) {
  // Check for reduced motion preference
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    return;
  }
  
  const rect = container.getBoundingClientRect();
  const ripple = document.createElement('span');
  
  const diameter = Math.max(rect.width, rect.height);
  const radius = diameter / 2;
  
  ripple.style.width = ripple.style.height = `${diameter}px`;
  ripple.style.left = `${event.clientX - rect.left - radius}px`;
  ripple.style.top = `${event.clientY - rect.top - radius}px`;
  ripple.className = 'ripple';
  
  // Remove existing ripples
  const existingRipple = container.querySelector('.ripple');
  if (existingRipple) {
    existingRipple.remove();
  }
  
  container.appendChild(ripple);
  
  // Trigger animation
  requestAnimationFrame(() => {
    ripple.classList.add('animate');
  });
  
  // Clean up
  ripple.addEventListener('animationend', () => {
    ripple.remove();
  });
}

// Usage
document.querySelectorAll('.btn').forEach(btn => {
  btn.classList.add('ripple-container');
  btn.addEventListener('click', (e) => createRipple(e, btn));
});