travel-hospitality — скилл для Claude Code

---
name: travel-hospitality
description: Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
---

# Travel & Hospitality Animation Principles

Apply Disney's 12 principles to create aspirational, exciting experiences that inspire wanderlust and build booking confidence.

## The 12 Principles Applied

### 1. Squash & Stretch
- **Booking Buttons**: Satisfying press with light squash
- **Map Pins**: Bounce when dropped on location
- **Airplane Icons**: Subtle stretch during flight animation

### 2. Anticipation
- **Search Button**: Build-up before results reveal
- **Booking Confirmation**: Dramatic pause before success
- **Destination Reveal**: Moment of suspense

### 3. Staging
- **Destination Imagery**: Full-bleed hero photos
- **Price Display**: Clear but secondary to experience
- **Booking Flow**: Current step clearly focused

### 4. Straight Ahead & Pose to Pose
- **Map Exploration**: Smooth pan and zoom (straight ahead)
- **Booking Process**: Clear step-by-step (pose to pose)
- **Itinerary Builder**: Sequential activity planning

### 5. Follow Through & Overlapping Action
- **Search Results**: Cards cascade in with stagger
- **Image Galleries**: Photos settle with follow-through
- **Map Markers**: Icon lands, then info popup appears

### 6. Slow In & Slow Out
- **Dreamy Transitions**: Smooth, relaxed pacing
- **Image Carousels**: Elegant slide transitions
- **Modal Opens**: Comfortable 350-400ms

### 7. Arc
- **Flight Paths**: Curved lines on maps
- **Photo Swipes**: Natural arc gestures
- **Destination Transitions**: Arc between locations

### 8. Secondary Action
- **Booking Success**: Plane takes off, confetti falls
- **Price Updates**: Sparkle when deals appear
- **Loading States**: Location-themed animations

### 9. Timing
- **Aspirational Moments**: Slower 400-500ms for dreamy feel
- **Booking Actions**: Confident 250-350ms
- **Search Feedback**: Quick 150ms

### 10. Exaggeration
- **Celebration Moments**: Booking confirmed deserves fanfare
- **Dream Destinations**: Amplify the aspiration
- **Deals**: Highlight savings dramatically

### 11. Solid Drawing
- **Photography First**: Stunning destination imagery
- **Map Accuracy**: Correct geographical representation
- **Icon Consistency**: Unified travel iconography

### 12. Appeal
- **Inspirational**: Motion should spark wanderlust
- **Premium Service Feel**: Luxury brand associations
- **Cultural Sensitivity**: Respectful representation

## Industry Timing Standards

| Action | Duration | Easing |
|--------|----------|--------|
| Image Transition | 400ms | ease-in-out |
| Map Animation | 500ms | ease-out |
| Booking Step | 300ms | ease-in-out |
| Search Results | 250ms | ease-out |
| Confirmation | 600ms | custom-bounce |

## Key Principle
Travel is about dreams and experiences. Animation should transport users mentally before they travel physically. Create moments of aspiration while maintaining booking confidence.