| name | aerocore |
| description | Use this plugin when the user wants a premium dark-to-light aerospace / propulsion marketing site: a scroll-driven gradient hero with parallax wordmark and an engine still, a film-card that grows from a mission thumbnail into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart with category tabs, a horizontal video-story rail, and a starfield footer. Invoke for 'aerospace landing', 'engine / propulsion site', 'EngineTech', 'scroll-cinematic hero', or when the user references the AeroCore template. |
| version | 0.1.0 |
| od | {"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}} |
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/web@2.1.1/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)
<engine-hero> — scroll hero (injected by the custom element)..mission#company — mission statement + button + support copy + 16:9 media slot..showcase#technology — pinned tabbed showcase (600vh) with film-grow..capabilities#solutions — bento capabilities grid..stats#our-edge — dark animated stats chart with 4 category tabs..video-stories#our-team — horizontal scroll-snap video rail..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#contact row (email link + phone + circular ph-arrow-up-right button).
Responsive: ≤1080px → 2 cols (last stack spans full width as 2 cols); ≤760px → single column.
5. Stats (.stats#our-edge, dark gradient)
- Header: light
h2 left, .stats__summary right (fades in via .is-visible).
- 4
.stats__tab buttons (cities / materials / fuels / hydrogen) with an animated gradient underline (scaleX). Default active = cities.
StatsSection (vanilla) re-renders .stats__chart on tab change: a head row, then 4 .stats__bar-rows per dataset. Each row: label + note, a .stats__track containing a faint .stats__range (operating envelope, --range-start/--range-width), a gradient .stats__bar (--bar-value, fills via stats-fill), a .stats__value, and a .stats__trace of glowing spark points. Animations fire when .stats__chart.is-ready is added (staggered by --bar-delay = index*90ms). An 11-tick axis (0…100) sits under the bars.DATASETS holds all 4 categories × 4 bars (value/target/rangeStart/rangeEnd/unit/note/trace). Keep the full dataset shape; only swap labels/numbers for a rebrand.
6. Video stories (.video-stories#our-team, #f7f8f8)
Header (h2 + p), then a horizontal .video-stories__rail (scroll-snap, hidden scrollbar, grid-auto-columns: minmax(520px,34vw)) of 5 .story-cards — each a looping 16:9 <video> (Cloudfront d8j0ntlcm91z4.cloudfront.net/...mp4, large stable CDN, keep remote) + kicker / h3 / meta. Inactive cards are dimmed opacity:0.54 and brighten on hover/focus. A .video-stories__footer progress bar reads 05 / 05.
7. Footer (.site-footer, black)
A .footer-dots band with a footerDotsMove 18s drifting starfield, then .site-footer__top (big light h2 + three nav columns), a giant .site-footer__brand wordmark (font-size: clamp(58px,11.1vw,214px), with the same fin clip-path mark), and a tiny legal row.
Animations / scroll — locked
- Hero gradient color-lerp, parallax (
--scroll-y), and fade are all computed in the <engine-hero> rAF loop. Keep the constants: title/row -120, caption -60, engine -250; fade window 0.9vh → 1.35vh.
- Showcase film growth uses
easeOutCubic over one viewport; UI/tab progress uses easeInOutCubic; TAB_START = 0.08.
- Stats keyframes:
stats-row-in, stats-fill, stats-range-in, stats-point-in; marquees marquee-left/right; stars hero-stars-twinkle; footer footerDotsMove.
Assets — sources
- Hero engine still: Cloudinary PNG (remote, stable CDN).
- Capability + showcase loop videos:
assets.mixkit.co/videos/*-720.mp4 (remote).
- Story-rail videos:
d8j0ntlcm91z4.cloudfront.net/...mp4 (remote).
- No avatars or generated placeholder images are used. If a rebrand needs an avatar, emit an inline
data:image/svg+xml;base64,… URI — never i.pravatar.cc, api.dicebear.com, or any remote avatar host (they 403 in the preview sandbox).
Color rules — hard
Cool aerospace palette only: hero blues #7191d0 / #aab8d5, warm cloud #ece9e6, near-black #0a0a0a/#111414, off-whites #f7f8f8/#ffffff, mission accent tile #d8e8ff, stat gradient #8fb0ef/#d6e3ff. Do not introduce purple/indigo/neon or change the hero blue→warm-white scroll lerp. Keep heading weights ultra-light (200–300).
Responsive breakpoints — locked
1180px, 1080px, 980px, 860px, 760px, 620px, 560px — each already tuned in the seed (grid collapses, nav simplifies, hero/title clamps shrink, stats tabs become a horizontal scroller, rail columns narrow). Do not drop breakpoints when editing.
