Guides / Adapt a template / Aerospace

How to adapt an animated website template for an aerospace company

To adapt an animated website template for an aerospace company, start from Aurum Air Private Aviation, Ionforge Glowing Ion Drive, Opened and Flown, Valkyrie Orbital Hypersonic Flights or the closest fit, keep the cinematic hero, hide chapters that show unreleased hardware you cannot discuss, add a fleet or program page, and apply the aerospace style pack below. Check the compliance notes for your state before you publish.

The 3 templates that fit aerospace and aviation companies best

Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.

  1. Aurum Air Private Aviation, animated aerospace company website template live preview

    Pick 1 · Pro

    Aurum Air Private Aviation

    A sunset-from-the-window film and large serif type suit a charter or private aviation brand.

  2. Ionforge Glowing Ion Drive, Opened and Flown, animated aerospace company website template live preview

    Pick 2 · Pro

    Ionforge Glowing Ion Drive, Opened and Flown

    An engine that assembles and burns as you scroll explains a hardware product without a spec sheet.

  3. Valkyrie Orbital Hypersonic Flights, animated aerospace company website template live preview

    Pick 3 · Pro

    Valkyrie Orbital Hypersonic Flights

    A flight-to-orbit story works for a launch, aircraft or space program page.

What to change for an aerospace company

Keep

  • The cinematic hero
  • The mission or product chapters
  • The specifications block
  • The contact or inquiry form

Hide

  • Chapters that show unreleased hardware you cannot discuss
  • Telemetry that looks live but is not

Add

  • A fleet or program page
  • A careers link
  • A press kit
  • A safety and compliance page

Copy angles

  • Lead with the mission the customer cares about, such as a same-day flight from Teterboro to Palm Beach.
  • Let one number carry the page, and source it.
  • Describe the experience, then the hardware.

Trust elements

  • Certificates and operator details
  • Named leadership with real bios
  • Safety record summaries you can document
  • A direct contact line

Compliance notes to check

  • Technical data on a public page can be subject to US export control rules. Review it before publishing.
  • Charter and air tour businesses typically must show the operating carrier and certificate details.
  • Do not publish performance numbers you cannot support.

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 Aurum Air Private Aviation and works for the other two picks if you change the name and slug. The example client is Skyline Air Charter, a charter broker flying out of Teterboro, New Jersey.

1. Fetch the template with the MCP

terminal
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.com
then ask your agent
Use the animatedwebs MCP. Call get_template_prompt for "aurum-private-aviation", 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

adaptation prompt
Adapt the AnimatedWebs template "Aurum Air Private Aviation" (slug: aurum-private-aviation) into a website for an aerospace company.
Example client: Skyline Air Charter, a charter broker flying out of Teterboro, New Jersey. Replace it with my real business details, which I will give you.

Keep:
- The cinematic hero
- The mission or product chapters
- The specifications block
- The contact or inquiry form

Hide:
- Chapters that show unreleased hardware you cannot discuss
- Telemetry that looks live but is not

Add:
- A fleet or program page
- A careers link
- A press kit
- A safety and compliance page

Copy angles:
- Lead with the mission the customer cares about, such as a same-day flight from Teterboro to Palm Beach.
- Let one number carry the page, and source it.
- Describe the experience, then the hardware.

Trust elements to include only if I can supply them:
- Certificates and operator details
- Named leadership with real bios
- Safety record summaries you can document
- A direct contact line

Style: use the CSS variables and fonts from the Aerospace style pack. Motion intensity: High. Full-bleed film works here. Keep inquiry forms and fleet tables on a still background.

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.

Aerospace style pack

Cinematic, high-altitude and quiet. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.

Palette

Cobalt

#7cc4f2

Accent

Deep Cobalt

#171b26

Surface

Void

#0a0b10

Background

Bone White

#eef3f9

Text

Type pairing (Google Fonts)

Motion intensity: High

Full-bleed film works here. Keep inquiry forms and fleet tables on a still background.

The CSS export includes the Google Fonts import and motion variables.

# Aerospace style pack, Style Reference
> Cinematic, high-altitude and quiet

**Theme:** dark  ·  **Template:** Aerospace style pack (https://animatedwebs.com/guides/adapt/aerospace)

## Tokens, Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#7cc4f2` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly |
| Deep Cobalt | `#171b26` | `--color-secondary` | Raised surfaces, cards and secondary accents |
| Void | `#0a0b10` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on |
| Bone White | `#eef3f9` | `--color-ink` | Headlines and body copy: the primary typographic colour |

## Typography

- **Display:** Cormorant Garamond, Cormorant Garamond 600
- **Body:** Inter, Inter 400

## Motion

- Intensity: High. Full scroll-driven scenes, always with a reduced-motion fallback.
- Full-bleed film works here. Keep inquiry forms and fleet tables on a still background.
- Respect prefers-reduced-motion: show final states.

## Rules

### Do
- Keep Cobalt (`#7cc4f2`) 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 Cormorant Garamond + Inter

Questions

Which template is best for an aerospace company?+

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 aerospace company site keep, hide and add?+

Keep the cinematic hero and the mission or product chapters. Hide chapters that show unreleased hardware you cannot discuss. Add a fleet or program page and a careers link.

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.

We use essential cookies to keep you signed in, a referral cookie only if you arrive through a partner link, and cookie-free analytics. No ads, no tracking. Cookie Policy