travel-hospitality
Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
Install
npx skills add https://github.com/dylantarre/animation-principles --skill travel-hospitalitySKILL.md
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.
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.