Guides / Adapt a template / Airline
How to adapt an animated website template for an airline
To adapt an animated website template for an airline, start from Paperwing Paper Plane That Banks Round a Tiny Planet, Tarnwing Floatplane Flights, Cirrion 3D Jet Over a Sea of Clouds or the closest fit, keep the hero, hide decorative chapters between search and results, add baggage and weight policy, and apply the airline style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit airlines and flight companies best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Paperwing Paper Plane That Banks Round a Tiny Planet
A folded-paper plane looping a tiny planet suits a playful tour operator.
Pick 2 · Pro
Tarnwing Floatplane Flights
Starting the engine yourself and booking seats suits a floatplane or scenic flight business.
Pick 3 · Pro
Cirrion 3D Jet Over a Sea of Clouds
A real 3D jet over aerial footage suits a flight school or training provider.
What to change for an airline
Keep
- The hero
- Routes or tours
- Schedule and booking
- Safety information
Hide
- Decorative chapters between search and results
- Fare language that hides fees
Add
- Baggage and weight policy
- Weather and cancellation policy
- Accessibility information
- Operator certificate details
Copy angles
- Lead with the view or the route.
- Show the full price up front.
- Explain weather cancellations kindly.
Trust elements
- FAA certificate details
- Pilot bios
- Safety practices
- Real guest reviews
Compliance notes to check
- US air carrier advertising generally must show the full price including mandatory taxes and fees.
- Show the operator name and certificate type.
- Publish baggage and refund policies clearly.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Paperwing Paper Plane That Banks Round a Tiny Planet and works for the other two picks if you change the name and slug. The example client is Kodiak Air Tours, scenic floatplane flights from Ketchikan, Alaska.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "paperwing-air-tours", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Paperwing Paper Plane That Banks Round a Tiny Planet" (slug: paperwing-air-tours) into a website for an airline.
Example client: Kodiak Air Tours, scenic floatplane flights from Ketchikan, Alaska. Replace it with my real business details, which I will give you.
Keep:
- The hero
- Routes or tours
- Schedule and booking
- Safety information
Hide:
- Decorative chapters between search and results
- Fare language that hides fees
Add:
- Baggage and weight policy
- Weather and cancellation policy
- Accessibility information
- Operator certificate details
Copy angles:
- Lead with the view or the route.
- Show the full price up front.
- Explain weather cancellations kindly.
Trust elements to include only if I can supply them:
- FAA certificate details
- Pilot bios
- Safety practices
- Real guest reviews
Style: use the CSS variables and fonts from the Airline style pack. Motion intensity: Medium. Booking steps need calm. Motion lives in the hero and route story.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Airline style pack
Open sky, bright and adventurous. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Ember
#c8431f
Accent
Pale Citrine
#f1e3c3
Surface
Pale Citrine
#fff6e2
Background
Deep Cobalt
#1b2230
Text
Type pairing (Google Fonts)
- Display OutfitSpecimen ↗
- Body DM SansSpecimen ↗
Motion intensity: Medium
Booking steps need calm. Motion lives in the hero and route story.
The CSS export includes the Google Fonts import and motion variables.
# Airline style pack, Style Reference > Open sky, bright and adventurous **Theme:** light · **Template:** Airline style pack (https://animatedwebs.com/guides/adapt/airline) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember | `#c8431f` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Pale Citrine | `#f1e3c3` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Pale Citrine | `#fff6e2` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Deep Cobalt | `#1b2230` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Outfit, Outfit 600 - **Body:** DM Sans, DM Sans 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Booking steps need calm. Motion lives in the hero and route story. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Ember (`#c8431f`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Outfit + DM Sans
Questions
Which template is best for an airline?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should an airline site keep, hide and add?+
Keep the hero and routes or tours. Hide decorative chapters between search and results. Add baggage and weight policy and weather and cancellation policy.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.