Bellog Animation Patterns

This skill provides the animation patterns and best practices used throughout the Bellog blog project.

Core Animation Principles

1. Organic movement - Use easing curves, never linear
2. Stagger for rhythm - Create visual flow with staggered animations
3. Living elements - Ambient animations that breathe life
4. Consistent timing - Follow project timing standards

Animation Timing Standards

// Interaction timings
const INTERACTION_FAST = 0.2;    // Button press, hover start
const INTERACTION_NORMAL = 0.3;  // Standard hover effects
const INTERACTION_SLOW = 0.5;    // Modal open, drawer slide