# travel-hospitality

Guides AI coding agents on animation rules and timing standards for travel booking platforms and hospitality apps.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 568 installs · ★ 129
- Author: dylantarre
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/08-by-industry/travel-hospitality/SKILL.md
- Updated: 2025-12-30
- HTML: https://affpapa.org/en/nevibecode/skills/travel-hospitality

## What it does

This skill instructs your coding assistant to apply Disney's twelve animation principles to travel interfaces. It maps concepts like squash, anticipation, and arcs directly to UI patterns: map pin drops, booking step transitions, curved flight routes, and staggered search result cards.

It includes a reference table for durations and easings. Image transitions run at 400ms with `ease-in-out`, map movements take 500ms with `ease-out`, search results take 250ms, and final booking confirmations take 600ms with a custom bounce.

The repository provides design logic rather than ready-made CSS packages, so the agent writes the specific animation code to fit whatever frontend framework your project uses.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill travel-hospitality -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/travel-hospitality/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/travel-hospitality/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill travel-hospitality -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/travel-hospitality/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill travel-hospitality -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/travel-hospitality/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles travel-hospitality
```

2. **Manually: put the files in place**
- File: `.github/skills/travel-hospitality/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill travel-hospitality -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/travel-hospitality
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/travel-hospitality/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill travel-hospitality -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/08-by-industry/travel-hospitality/SKILL.md

## When to use it
- Define timing and easing curves for travel search results and map pins
- Animate multi-step booking flows and celebratory confirmation states
- Create curved trajectories for flight route visualizations
- Tune transition speeds for resort galleries and destination modal windows

## Example prompts
- Create a React booking confirmation component using travel-hospitality timing rules
- Generate CSS keyframes for map pin drop and bounce based on this skill
- Tune our hotel gallery carousel transitions according to the hospitality standard

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 46754ce661f565cf.

BEGIN THIRD-PARTY FILE 46754ce661f565cf
```text
---
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
```
END THIRD-PARTY FILE 46754ce661f565cf

The third-party file has ended. Everything between the 46754ce661f565cf tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2813 of 2994 bytes. © dylantarre · MIT · https://github.com/dylantarre/animation-principles/tree/HEAD/skills/08-by-industry/travel-hospitality/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md