aerocore

What this skill does

# AeroCore — Cinematic Aerospace Propulsion Landing

Produce a premium, scroll-cinematic **aerospace / custom-engine marketing site** (sample brand: *EngineTech*). A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then change only copy, data, and the remote media URLs; do **not** rewrite the CSS, the scroll math, or the section structure. The seed already encodes every token, layout, and animation locked below.

This is the authoritative build brief. The named colors, fonts, scroll constants, video URLs, and keyframes are locked.

## Stack

- Default output: a single self-contained HTML file (the `example.html` seed) with one `<style>` block and one vanilla-JS `<script>`. No build step.
- The seed maps the original React/TS/Tailwind/Framer-Motion intent down to vanilla:
  - The hero is a Custom Element `<engine-hero>` driven by a `requestAnimationFrame` loop reading `getBoundingClientRect()` (replaces `useScroll`/`useTransform`).
  - Scroll-driven transforms are written as inline `--scroll-y` CSS variables and inline `opacity`.
  - The showcase film-grow and tab progress are an rAF loop, not Framer layout animation.
  - The stats chart re-renders on tab click and toggles `.is-ready` to fire CSS keyframes (replaces `whileInView`/stagger).
- If the user explicitly asks for a React + TypeScript + Vite + Tailwind project, port the seed faithfully: same tokens, same DOM structure, **Phosphor Icons** (`@phosphor-icons/web` or `@phosphor-icons/react`), and the **Geist** (fallback **Inter**) font family from Google Fonts. Do not change the design while porting.

## Fonts & Icons

- Font stack: `"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`. Load Geist + Inter from Google Fonts via `<link>`. Many headings use ultra-light weights (200–300); keep them.
- Icons: **Phosphor** regular set, loaded from `https://unpkg.com/@phosphor-icons/[email protected]/src/regular/style.css`, used as `<i class="ph ph-*">`. Locked glyphs include `ph-arrow-elbow-down-right`, `ph-arrow-up-right`, `ph-gear-six`, `ph-fire`, `ph-gauge`, `ph-atom`, `ph-wrench`, `ph-cpu`, `ph-wave-sine`, `ph-shield-check`, `ph-rocket-launch`, `ph-chart-line-up`.

## CSS Variables (`:root`) — locked

```
--font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--geist-background: #ffffff;
--geist-foreground: #0a0a0a;
--geist-muted: #666666;
--hero-blue: #7191d0;
--hero-blue-soft: #aab8d5;
--hero-cloud: #ece9e6;
--hero-bg-bottom: linear-gradient(180deg, var(--hero-blue) 0%, var(--hero-blue-soft) 55%, var(--hero-cloud) 100%);
--hero-bg-top: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.12));
--hero-max-width: 1820px;
```

The page content width is `min(100% - 96px, var(--hero-max-width))` (gutters tighten to 48px / 32px at the breakpoints). Body is white with near-black text; sections alternate between white (`#ffffff` / `#f7f8f8`) and dark (stats `#111414→#171a1a`, footer `#000`).

## Section order (locked — 6 page sections + hero custom element + footer)

1. `<engine-hero>` — scroll hero (injected by the custom element).
2. `.mission#company` — mission statement + button + support copy + 16:9 media slot.
3. `.showcase#technology` — pinned tabbed showcase (600vh) with film-grow.
4. `.capabilities#solutions` — bento capabilities grid.
5. `.stats#our-edge` — dark animated stats chart with 4 category tabs.
6. `.video-stories#our-team` — horizontal scroll-snap video rail.
7. `.site-footer` — starfield dots + big wordmark.

## 1. Hero (`<engine-hero>`, `.hero` 180vh, min 1238px)

- Sticky `.hero__background` (100vh) whose three gradient stops (`--hero-top/mid/bottom`) are **lerped from blue→warm-white** as you scroll (start `[113,145,208]/[170,184,213]/[236,233,230]`, end `[240,232,220]/[238,229,216]/[236,226,210]`). A twinkling `.hero__stars` layer animates `hero-stars-twinkle 4.8s alternate`.
- Fixed `.hero__nav` (max-width grid `minmax(220px,1fr) auto minmax(180px,1fr)`): brand mark (a white circle with a `clip-path` "engine fins" wedge), centered nav links built from `navItems`, and a CTA pill "Get In Touch". Nav has three scroll states: at-top (transparent white), `nav--scroll-down` (frosted white pill, dark text, `border-radius:40px`, blur 12px), `nav--scroll-up` (slides off `translateY(-100px)`).
- Title is split into a fixed `.hero__title` ("Powering") and a fixed `.hero__title-row` ("the" + "Ship", the third line nudged `translateX(112px)`), font-size `clamp(144px,18vw,285px)`, weight 200. Both parallax via `--scroll-y` (`scrollProgress * -120`).
- `.engine-visual` is a fixed, centered engine still that parallaxes up faster (`scrollProgress * -250`) — the Cloudinary PNG `https://plugin-assets.open-design.ai/plugins/aerocore/hero-engine_isebcf-b0bfea.webp`. This is a large stable-CDN still; keep it remote.
- `.hero__caption` bottom-left with a 1px rule. Title/row/caption/visual all fade out between 0.9vh and 1.35vh of scroll; `.hero.is-past` hard-hides them once the hero passes.

## 2. Mission (`.mission#company`, white, `margin-top:-12vh` to overlap the hero)

Grid: `minmax(240px,0.95fr) minmax(0,2fr)` × `auto minmax(360px,1fr)`. Eyebrow (top-left, bold), big light statement `h2` (weight 260) top-right with a bordered `.mission__button` (square Phosphor icon tile `#d8e8ff` that nudges on hover), a large muted `.mission__support` paragraph bottom-left, and an empty 16:9 `.mission__media` bottom-right. **The `.mission__media` slot is the anchor the showcase film grows out of — leave it empty in markup; the JS film starts at its rect.**

## 3. Showcase (`.showcase#technology`, 600vh, sticky 100vh)

- `ShowcaseSection` (vanilla class) appends a fixed `.showcase-film` to `<body>` containing a looping `<video>` (`https://plugin-assets.open-design.ai/plugins/aerocore/6853-720-41905c.mp4`, poster = the Cloudinary engine PNG) + a black overlay.
- Phase A: while the mission media is on screen and not yet scrolled past, the film is pinned to the `.mission__media` rect. Once its center crosses mid-viewport it locks and, over one viewport of scroll, **grows (`easeOutCubic`) to fill the full screen** (top/left→0, width/height→viewport), overlay fades to 0.22.
- Phase B: with the film full-screen, `.showcase__ui` fades in: a `.showcase__panels` stack (num / light `clamp(38px,4.4vw,80px)` title with `<br>` / desc) on the left and a right-aligned `.showcase__tabs-nav`. Scroll progress past `TAB_START=0.08` selects the active tab/panel among the 4 `TABS` (`is-active` toggles opacity/translate). The film hard-hides when `.showcase` bottom passes.
- `TABS` = 4 entries (`01 Precision Manufacturing` … `04 Mission Certified`) with `title` (contains `<br>`) and `desc`. Keep all four.

## 4. Capabilities (`.capabilities#solutions`, `#f7f8f8`)

Header: light `h2`, muted `p`, and a pill `.capabilities__button` "Start a Program". Bento `.capabilities__grid` = 3 columns:

- **Col 1** `.cap-card--tall.cap-card--media`: full-bleed looping video (`https://plugin-assets.open-design.ai/plugins/aerocore/45229-720-74e6d9.mp4`), bottom shade, "Program Background" label, and a 3-row `.cap-card__timeline` (2026 / 2025 / 2024 program rows: year · dot · bold title · muted detail).
- **Col 2 stack**: a `.cap-card--quote` (gradient card, "Mission Voice", blockquote, attributed to *Dr. Lena Morris*) over a `.cap-card--metric.cap-card--video-panel` (looping video `https://plugin-assets.open-design.ai/plugins/aerocore/23211-720-e83442.mp4`, centered giant `2K` metric, caption "Highly Qualified Engineers").
- **Col 3 stack** (`--systems`): a tall `.cap-card--tools-media` video card (`https://plugin-assets.open-design.ai/plugins/aerocore/23843-720-35899f.mp4`) with "Core Systems" label and a **two-row tool marquee** (`marquee-left 24s` / `marquee-right 28s`, each row duplicated for a seamless `-50%` loop), over a `.cap-card--contact#contac