agent-devkit 0.0.1

package/runtime/vendor/plugins/open-design/_official/examples/mythic-naturecore/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: mythic-naturecore
+description: "Use this plugin when the user wants a cinematic mythic-naturecore landing page — the 'Reverie' template: a scroll-linked zoom-through-a-portal hero with mirrored opening curtains, a layered world background, mouse-parallax 3D depth, and an elegant Viaoda-Libre/Imprima serif+sans pairing. Invoke for 'naturecore landing', 'portal scroll page', 'Reverie', 'cinematic parallax hero', or when the user references the Mythic Naturecore template."
+version: 0.1.0
+od:
+  mode: prototype
+  surface: web
+  scenario: design
+  preview:
+    type: html
+    entry: example.html
+  design_system:
+    requires: false
+---
+
+# Mythic Naturecore — "Reverie" Cinematic Parallax Landing
+
+Produce a high-fidelity, premium interactive landing page named **"Reverie"**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and imagery only; do **not** rewrite the scroll/parallax math or invent a new visual language. The seed already encodes the exact fonts, asset map, scroll timeline, parallax magnitudes, and entrance sequence below.
+
+The native spec asks for **React + TypeScript + Tailwind + inline styles**; the bundled seed is **vanilla HTML/CSS/JS** with the framework features mapped down (no `useScroll`/`useTransform`/Framer — a passive `scroll` listener writes `scrollProgress`, a `requestAnimationFrame` loop writes inline `transform`, a `mousemove` handler drives the magnetic parallax). When the user explicitly asks for a React/Vite project, port the seed faithfully: same tokens, same layer structure, same math.
+
+This is the authoritative build brief. The named curve constants, magnitudes, scroll heights, and asset URLs are **locked**.
+
+## Stack & fonts
+
+- Default output: the single self-contained `example.html` seed.
+- Fonts via Google Fonts `<link>`:
+  - Headings: `'Viaoda Libre', serif`.
+  - Body, nav links, captions: `'Imprima', sans-serif` (also the body default).
+
+## Global reset
+
+```css
+html, body { margin: 0; padding: 0; background: #0a0608; scroll-behavior: auto; }
+html { scrollbar-gutter: stable; }       /* prevent layout shift */
+body { font-family: 'Imprima', sans-serif; }
+@keyframes bobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+```
+
+## Asset map — LOCKED (large stable CDN stills, kept REMOTE)
+
+Define these exact constants at the top of the script. These are big background stills on a stable CDN (`res.cloudinary.com`); per the inline-vs-remote rule they **stay remote** — do NOT re-host, swap the host, or inline them.
+
+```
+PORTAL_BG    = https://plugin-assets.open-design.ai/plugins/mythic-naturecore/portal_bg_mu60k9-78f20d.webp
+CURTAIN_LEFT = https://plugin-assets.open-design.ai/plugins/mythic-naturecore/curtain_left_cdht6q-c85f2f.webp
+CURTAIN_RIGHT= https://plugin-assets.open-design.ai/plugins/mythic-naturecore/curtain_right_a9bn3i-1ca8f6.webp
+WORLD_BG     = https://plugin-assets.open-design.ai/plugins/mythic-naturecore/world_bg_jzzcn1-dfd909.webp
+// Cards MUST remain in this exact order (Card 3, Card 1, Card 2):
+CARD_IMAGES = [
+  https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_3_nbwm25-de0132.webp,  // Card 3
+  https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_2_wr6al6-b3a8c5.webp,  // Card 1
+  https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_1_jz8otj-096be2.webp   // Card 2
+]
+```
+
+## Math helpers — LOCKED
+
+```
+easeInOut(t) = t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t
+lerp(a,b,t)  = a + (b - a) * t
+clamp(v,min,max) = Math.max(min, Math.min(max, v))
+MAG = { world: 6, portal: 7, curtainL: 14, curtainR: 14 }
+```
+
+## Scroll + mouse system
+
+- **Page height is exactly `480vh`** (`#scroll-root`); inside it a single **sticky `#stage` spans `100vh`** (`position: sticky; top: 0; overflow: hidden`).
+- `scrollProgress` ∈ `[0,1]` = `clamp(scrollY / (scrollRootHeight - innerHeight), 0, 1)`, written by a **passive** `scroll` listener.
+- `useIsMobile()` ⇒ a `matchMedia('(max-width: 767px)')` flag.
+- Mouse parallax: normalize `rx`, `ry` ∈ `[-1,1]` from cursor vs viewport center. A `requestAnimationFrame` `tick()` lerps current→target with **step `0.07`** every frame (kills frame-rate stutter), then writes inline transforms.
+
+## Animation timeline (applied every frame)
+
+- **World** (`WORLD_BG`): `scale` lerp `1 → 1.18`; `transform = scale(s) translate3d(rx*6px, ry*6px, 0)`.
+- **Portal** (`PORTAL_BG`, `transform-origin: 52% 38%`, above world): `scale` lerp `1 → 7.5` (immersive zoom-through); `opacity = clamp(1 - (p - 0.65)/0.2, 0, 1)`; `transform = scale(s) translate3d(rx*7px, ry*7px, 0)`.
+- **Curtain Left** (`CURTAIN_LEFT`): opening offset 62% left, scrolls further to 150% via `eased`: `totalShift = 62 + easeInOut(p)*88`. Scroll scale lerp `1 → 1.3`. `transform = translateX(calc(-totalShift% + rx*14px)) translateY(ry*14*0.3px) scale(scrollScale) translateZ(0)`.
+- **Curtain Right** (`CURTAIN_RIGHT`): symmetric mirror — same but `translateX(calc(+totalShift% + rx*14px))`.
+
+## Entrance sequence
+
+Curtains start fully closed (`translateX(0)`); after **100ms** they open to the 62% resting offset; UI fades in after **600ms** (opacity + 20px slide-up, `0.9s ease`, hero delayed ~300ms). After **2200ms** disable the entry CSS transitions so mouse parallax has zero lag.
+
+## Layout & components
+
+### Navigation (`position: absolute; top:0; z-index:50`)
+- Padding `18px 20px` mobile / `22px 48px` desktop.
+- Desktop (≥768px): split nav — left links `Worlds · Atelier · Immersions`, center **SVG star logo** (`M14 2l2.09 6.42H23l-5.45 …` in a 28×28 viewport), right links `Craft · Codex · Connect`.
+- Mobile (<768px): centered star logo, `Explore` on the left, `Connect` on the right.
+- Links: uppercase, `12px`, letter-spacing `0.12em`, white, opacity `0.9`, no underline.
+
+### Scene 1 — Hero (`z-index: 46`)
+- Opacity fades out: `clamp(1 - scrollProgress/0.22, 0, 1)`. Entrance: slide up 20px on mount, `0.9s ease` opacity, ~300ms delay.
+- **Mobile (<768px):** centered column, dark-brown text `#3b1a0a`. Heading `FALL › INTO REVERIE` (Viaoda Libre). Subheading max-width `280px`. One card with `CARD_IMAGES[0]` + white play button + "View Reel".
+- **Tablet (768–1099px):** centered column, dark-brown text. All 3 cards in a row — Card 3 (`CARD_IMAGES[0]`, Play+"View Reel"), Card 1 (`CARD_IMAGES[1]`, "32 World Patrons" large serif), Card 2 (`CARD_IMAGES[2]`, Play+"View Reel").
+- **Desktop (≥1100px):** split-screen, white text.
+  - Left (`top:46%; left:60px`): title `FALL › INTO REVERIE`, subheading, max-width `440px`.
+  - Right (`top:50%; right:40px`): row of 3 cards `158×158`, radius `28px`, bottom gradient label with `backdropFilter: blur(6px)` and gradient `rgba(0,0,0,0.72) 0% → rgba(0,0,0,0.18) 60% → transparent 100%`, play icon or patron metric overlay.
+
+### Slider dots (bottom-left, `60px`; centered on mobile)
+4 pill indicators: first wide (`28px`, opacity 1), other three thin (`14px`, lower opacity), white.
+
+### Scroll cue (`bottom: 36px`, centered; hidden on mobile)
+Uppercase "Descend" `10px`, letter-spacing `0.22em`, `rgba(255,255,255,0.6)`; chevron SVG inside a `34×34` round border animated `bobUp 1.8s ease-in-out infinite`.
+
+### Scene 2 — CTA "Forge Beyond" (`z-index: 46`)
+- Opacity fades in: `clamp((scrollProgress - 0.68)/0.16, 0, 1)`; centered vertical flex, interactive only when visible.
+- Heading `FORGE BEYOND THE REAL` (Viaoda Libre, clamp `38px → 78px`, `#fff`, letter-spacing `0.03em`, line-height `1.05`, shadow `0 2px 20px rgba(0,0,0,0.4)`).
+- Paragraph (Imprima): "Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known." — `20px` desktop / `14px` mobile, max-width `480px` desktop / `260px` mobile, line-height `1.6`, `rgba(255,255,255,0.82)`.
+
+## Color rules — hard
+
+Cinematic naturecore palette: near-black base `#0a0608`, warm dark-brown mobile text `#3b1a0a`, white desktop text, translucent white captions. Keep the serif/sans pairing (Viaoda Libre + Imprima). Do not introduce neon, purple, or flat material accents — the mood is dim, organic, painterly.
+
+## Responsive
+
+- `≥1100px` desktop split-screen white-text hero; `768–1099px` tablet centered 3-card row; `<768px` mobile centered single-card dark-brown hero, mobile nav, dots centered, scroll cue hidden.

package/runtime/vendor/plugins/open-design/_official/examples/mythic-naturecore/example.html

@@ -0,0 +1,387 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Reverie — Mythic Naturecore</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Viaoda+Libre&family=Imprima&display=swap" rel="stylesheet">
+  <style>
+    :root { scrollbar-gutter: stable; }
+    html, body { margin: 0; padding: 0; background: #0a0608; scroll-behavior: auto; }
+    body { font-family: 'Imprima', sans-serif; color: #fff; }
+    * { box-sizing: border-box; }
+
+    @keyframes bobUp {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-6px); }
+    }
+
+    /* ── Scroll spacer + sticky stage ── */
+    #scroll-root { height: 480vh; position: relative; }
+    #stage {
+      position: sticky; top: 0; left: 0; width: 100%; height: 100vh;
+      overflow: hidden; background: #0a0608;
+    }
+
+    /* ── Parallax layers ── */
+    .layer {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+      will-change: transform, opacity; pointer-events: none;
+    }
+    #world {
+      background-size: cover; background-position: center;
+      transform-origin: 50% 50%;
+    }
+    #portal {
+      background-size: cover; background-position: center;
+      transform-origin: 52% 38%; z-index: 5;
+    }
+    .curtain {
+      top: 0; height: 100%; width: 62%;
+      background-size: cover; background-position: center; z-index: 8;
+    }
+    #curtain-left { left: 0; transform-origin: left center; }
+    #curtain-right { right: 0; transform-origin: right center; }
+
+    /* ── Nav ── */
+    nav {
+      position: absolute; top: 0; left: 0; right: 0; z-index: 50;
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 22px 48px; pointer-events: auto;
+    }
+    .nav-group { display: flex; align-items: center; gap: 30px; flex: 1; }
+    .nav-group.right { justify-content: flex-end; }
+    .nav-link {
+      text-transform: uppercase; font-size: 12px; letter-spacing: 0.12em;
+      color: #fff; opacity: 0.9; text-decoration: none;
+    }
+    .nav-logo { width: 28px; height: 28px; display: grid; place-items: center; }
+    .nav-mobile { display: none; }
+
+    /* ── Scene 1 hero ── */
+    #scene1 {
+      position: absolute; inset: 0; z-index: 46; pointer-events: none;
+    }
+    .hero-left {
+      position: absolute; top: 46%; left: 60px; transform: translateY(-50%);
+      max-width: 440px;
+    }
+    .hero-title {
+      font-family: 'Viaoda Libre', serif; color: #fff;
+      font-size: clamp(46px, 7vw, 92px); line-height: 1.0; letter-spacing: 0.01em;
+      margin: 0 0 22px; text-shadow: 0 2px 24px rgba(0,0,0,0.45);
+    }
+    .hero-sub {
+      font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 440px;
+    }
+    .hero-right {
+      position: absolute; top: 50%; right: 40px; transform: translateY(-50%);
+      display: flex; gap: 18px;
+    }
+    .hero-card {
+      width: 158px; height: 158px; border-radius: 28px; overflow: hidden;
+      position: relative; background-size: cover; background-position: center;
+      box-shadow: 0 18px 50px rgba(0,0,0,0.45);
+    }
+    .card-label {
+      position: absolute; left: 0; right: 0; bottom: 0;
+      display: flex; align-items: center; gap: 10px;
+      padding: 14px 16px; backdrop-filter: blur(6px);
+      background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, transparent 100%);
+      font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
+    }
+    .play-icon {
+      width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.92);
+      display: grid; place-items: center; color: #2a1808; flex: none;
+    }
+    .patron-metric {
+      position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
+      font-family: 'Viaoda Libre', serif; font-size: 22px; line-height: 1.1;
+      background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 70%);
+    }
+
+    /* slider dots */
+    .dots {
+      position: absolute; bottom: 36px; left: 60px; display: flex; gap: 8px; z-index: 47;
+    }
+    .dots i { height: 4px; border-radius: 4px; background: #fff; display: block; }
+    .dots i.wide { width: 28px; opacity: 1; }
+    .dots i.thin { width: 14px; opacity: 0.45; }
+
+    /* scroll cue */
+    .scroll-cue {
+      position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
+      display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 47;
+    }
+    .scroll-cue span {
+      text-transform: uppercase; font-size: 10px; letter-spacing: 0.22em; color: rgba(255,255,255,0.6);
+    }
+    .scroll-cue .chev {
+      width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
+      display: grid; place-items: center; animation: bobUp 1.8s ease-in-out infinite;
+    }
+
+    /* ── Scene 2 CTA ── */
+    #scene2 {
+      position: absolute; inset: 0; z-index: 46;
+      display: flex; align-items: center; justify-content: center;
+      opacity: 0; pointer-events: none; padding: 0 20px;
+    }
+    .cta-wrap { text-align: center; max-width: 520px; }
+    .cta-title {
+      font-family: 'Viaoda Libre', serif; color: #fff;
+      font-size: clamp(38px, 6vw, 78px); letter-spacing: 0.03em; line-height: 1.05;
+      margin: 0 0 24px; text-shadow: 0 2px 20px rgba(0,0,0,0.4);
+    }
+    .cta-text {
+      font-family: 'Imprima', sans-serif; font-size: 20px; line-height: 1.6;
+      color: rgba(255,255,255,0.82); max-width: 480px; margin: 0 auto;
+    }
+
+    /* entrance fade target */
+    .fade-ui { opacity: 0; transition: opacity 0.9s ease, transform 0.9s ease; }
+    .fade-ui.in { opacity: 1; }
+    .hero-left.fade-ui { transform: translateY(calc(-50% + 20px)); }
+    .hero-left.fade-ui.in { transform: translateY(-50%); }
+
+    @media (max-width: 767px) {
+      nav { padding: 18px 20px; }
+      .nav-group { display: none; }
+      .nav-mobile { display: flex; align-items: center; justify-content: space-between; width: 100%; }
+      .hero-left { left: 50%; right: auto; transform: translate(-50%, -50%); top: 42%;
+        text-align: center; max-width: 280px; }
+      .hero-left.fade-ui { transform: translate(-50%, calc(-50% + 20px)); }
+      .hero-left.fade-ui.in { transform: translate(-50%, -50%); }
+      .hero-title { color: #3b1a0a; }
+      .hero-sub { color: #3b1a0a; max-width: 280px; margin: 0 auto; }
+      .hero-right { position: absolute; top: 64%; right: auto; left: 50%; transform: translateX(-50%); }
+      .hero-right .hero-card:nth-child(2),
+      .hero-right .hero-card:nth-child(3) { display: none; }
+      .dots { left: 50%; transform: translateX(-50%); }
+      .scroll-cue { display: none; }
+      .cta-title { font-size: 38px; }
+      .cta-text { font-size: 14px; max-width: 260px; }
+    }
+  </style>
+</head>
+<body>
+  <div id="scroll-root">
+    <div id="stage">
+      <!-- Parallax layers -->
+      <div id="world" class="layer"></div>
+      <div id="portal" class="layer"></div>
+      <div id="curtain-left" class="curtain layer"></div>
+      <div id="curtain-right" class="curtain layer"></div>
+
+      <!-- Navigation -->
+      <nav>
+        <div class="nav-group left">
+          <a class="nav-link" href="#">Worlds</a>
+          <a class="nav-link" href="#">Atelier</a>
+          <a class="nav-link" href="#">Immersions</a>
+        </div>
+        <div class="nav-logo" aria-label="Reverie">
+          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 2l2.09 6.42H23l-5.45 3.96L19.64 19 14 15.04 8.36 19l2.09-6.62L5 8.42h6.91L14 2z" fill="#fff"/>
+          </svg>
+        </div>
+        <div class="nav-group right">
+          <a class="nav-link" href="#">Craft</a>
+          <a class="nav-link" href="#">Codex</a>
+          <a class="nav-link" href="#">Connect</a>
+        </div>
+        <div class="nav-mobile">
+          <a class="nav-link" href="#">Explore</a>
+          <div class="nav-logo">
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14 2l2.09 6.42H23l-5.45 3.96L19.64 19 14 15.04 8.36 19l2.09-6.62L5 8.42h6.91L14 2z" fill="#fff"/>
+            </svg>
+          </div>
+          <a class="nav-link" href="#">Connect</a>
+        </div>
+      </nav>
+
+      <!-- Scene 1: Hero -->
+      <div id="scene1">
+        <div class="hero-left fade-ui">
+          <h1 class="hero-title">FALL ›<br>INTO REVERIE</h1>
+          <p class="hero-sub">Singular voyages to astonishing destinations, woven from light and longing for those who seek beauty beyond the known.</p>
+        </div>
+        <div class="hero-right fade-ui">
+          <!-- Card 3 -->
+          <div class="hero-card" id="hc0">
+            <div class="card-label">
+              <span class="play-icon">
+                <svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M3 2l7 4-7 4V2z"/></svg>
+              </span>
+              View Reel
+            </div>
+          </div>
+          <!-- Card 1 -->
+          <div class="hero-card" id="hc1">
+            <div class="patron-metric">32 World<br>Patrons</div>
+          </div>
+          <!-- Card 2 -->
+          <div class="hero-card" id="hc2">
+            <div class="card-label">
+              <span class="play-icon">
+                <svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M3 2l7 4-7 4V2z"/></svg>
+              </span>
+              View Reel
+            </div>
+          </div>
+        </div>
+
+        <div class="dots fade-ui">
+          <i class="wide"></i><i class="thin"></i><i class="thin"></i><i class="thin"></i>
+        </div>
+
+        <div class="scroll-cue fade-ui">
+          <span>Descend</span>
+          <div class="chev">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene 2: CTA -->
+      <div id="scene2">
+        <div class="cta-wrap">
+          <h2 class="cta-title">FORGE BEYOND THE REAL</h2>
+          <p class="cta-text">Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // ── Asset map (large stable CDN stills — kept remote) ──
+    var PORTAL_BG = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/portal_bg_mu60k9-78f20d.webp';
+    var CURTAIN_LEFT = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/curtain_left_cdht6q-c85f2f.webp';
+    var CURTAIN_RIGHT = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/curtain_right_a9bn3i-1ca8f6.webp';
+    var WORLD_BG = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/world_bg_jzzcn1-dfd909.webp';
+    // Cards MUST stay in this exact order (Card 3, Card 1, Card 2)
+    var CARD_IMAGES = [
+      'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_3_nbwm25-de0132.webp',
+      'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_2_wr6al6-b3a8c5.webp',
+      'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_1_jz8otj-096be2.webp'
+    ];
+
+    // ── Math helpers ──
+    function easeInOut(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; }
+    function lerp(a, b, t) { return a + (b - a) * t; }
+    function clamp(val, min, max) { return Math.max(min, Math.min(max, val)); }
+
+    // ── Parallax magnitudes ──
+    var MAG = { world: 6, portal: 7, curtainL: 14, curtainR: 14 };
+
+    // ── Wire backgrounds ──
+    var worldEl = document.getElementById('world');
+    var portalEl = document.getElementById('portal');
+    var curtLEl = document.getElementById('curtain-left');
+    var curtREl = document.getElementById('curtain-right');
+    worldEl.style.backgroundImage = "url('" + WORLD_BG + "')";
+    portalEl.style.backgroundImage = "url('" + PORTAL_BG + "')";
+    curtLEl.style.backgroundImage = "url('" + CURTAIN_LEFT + "')";
+    curtREl.style.backgroundImage = "url('" + CURTAIN_RIGHT + "')";
+    document.getElementById('hc0').style.backgroundImage = "url('" + CARD_IMAGES[0] + "')";
+    document.getElementById('hc1').style.backgroundImage = "url('" + CARD_IMAGES[1] + "')";
+    document.getElementById('hc2').style.backgroundImage = "url('" + CARD_IMAGES[2] + "')";
+
+    var scene1 = document.getElementById('scene1');
+    var scene2 = document.getElementById('scene2');
+    var heroLeft = document.querySelector('.hero-left');
+
+    // ── Responsive flag ──
+    var isMobile = false;
+    var mq = window.matchMedia('(max-width: 767px)');
+    function onMq(e) { isMobile = e.matches; }
+    onMq(mq);
+    if (mq.addEventListener) mq.addEventListener('change', onMq); else mq.addListener(onMq);
+
+    // ── Scroll progress (passive listener) ──
+    var scrollProgress = 0;
+    function readScroll() {
+      var root = document.getElementById('scroll-root');
+      var scrollable = root.offsetHeight - window.innerHeight;
+      scrollProgress = scrollable > 0 ? clamp(window.scrollY / scrollable, 0, 1) : 0;
+    }
+    window.addEventListener('scroll', readScroll, { passive: true });
+    window.addEventListener('resize', readScroll);
+    readScroll();
+
+    // ── Smooth mouse tracking ──
+    var targetRX = 0, targetRY = 0, curRX = 0, curRY = 0;
+    window.addEventListener('mousemove', function (e) {
+      targetRX = (e.clientX / window.innerWidth) * 2 - 1;
+      targetRY = (e.clientY / window.innerHeight) * 2 - 1;
+    });
+
+    // ── Render loop ──
+    function tick() {
+      curRX = lerp(curRX, targetRX, 0.07);
+      curRY = lerp(curRY, targetRY, 0.07);
+      var rx = curRX, ry = curRY;
+      var p = scrollProgress;
+      var eased = easeInOut(p);
+
+      // World layer
+      var worldScale = lerp(1, 1.18, p);
+      worldEl.style.transform = 'scale(' + worldScale + ') translate3d(' + (rx * MAG.world) + 'px,' + (ry * MAG.world) + 'px,0)';
+
+      // Portal frame
+      var portalScale = lerp(1, 7.5, p);
+      var portalOpacity = clamp(1 - (p - 0.65) / 0.2, 0, 1);
+      portalEl.style.opacity = portalOpacity;
+      portalEl.style.transform = 'scale(' + portalScale + ') translate3d(' + (rx * MAG.portal) + 'px,' + (ry * MAG.portal) + 'px,0)';
+
+      // Curtains
+      var curtainScrollScale = lerp(1, 1.3, p);
+      var totalShift = 62 + eased * 88; // 62% open -> up to 150%
+      curtLEl.style.transform = 'translateX(calc(-' + totalShift + '% + ' + (rx * MAG.curtainL) + 'px)) translateY(' + (ry * MAG.curtainL * 0.3) + 'px) scale(' + curtainScrollScale + ') translateZ(0)';
+      curtREl.style.transform = 'translateX(calc(' + totalShift + '% + ' + (rx * MAG.curtainR) + 'px)) translateY(' + (ry * MAG.curtainR * 0.3) + 'px) scale(' + curtainScrollScale + ') translateZ(0)';
+
+      // Scene 1 opacity
+      var s1 = clamp(1 - p / 0.22, 0, 1);
+      scene1.style.opacity = s1;
+      scene1.style.pointerEvents = s1 > 0.05 ? 'auto' : 'none';
+
+      // Scene 2 opacity
+      var s2 = clamp((p - 0.68) / 0.16, 0, 1);
+      scene2.style.opacity = s2;
+      scene2.style.pointerEvents = s2 > 0.05 ? 'auto' : 'none';
+
+      requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+
+    // ── Entrance animation ──
+    // Curtains start fully closed, open after 100ms; UI fades in after 600ms.
+    curtLEl.style.transition = 'transform 1.4s cubic-bezier(0.22,1,0.36,1)';
+    curtREl.style.transition = 'transform 1.4s cubic-bezier(0.22,1,0.36,1)';
+    // start closed
+    curtLEl.style.transform = 'translateX(0%)';
+    curtREl.style.transform = 'translateX(0%)';
+
+    setTimeout(function () {
+      // release into the render-loop-driven 62% open
+      curtLEl.style.transform = 'translateX(-62%)';
+      curtREl.style.transform = 'translateX(62%)';
+    }, 100);
+
+    var fadeEls = document.querySelectorAll('.fade-ui');
+    setTimeout(function () {
+      for (var i = 0; i < fadeEls.length; i++) fadeEls[i].classList.add('in');
+    }, 600);
+
+    // Disable entry CSS transitions after 2200ms so mouse parallax has no lag.
+    setTimeout(function () {
+      curtLEl.style.transition = 'none';
+      curtREl.style.transition = 'none';
+      for (var i = 0; i < fadeEls.length; i++) fadeEls[i].style.transition = 'none';
+    }, 2200);
+  </script>
+</body>
+</html>

package/runtime/vendor/plugins/open-design/_official/examples/mythic-naturecore/open-design.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-mythic-naturecore",
+  "title": "Mythic Naturecore — Reverie",
+  "title_i18n": {
+    "zh-CN": "神话自然核 — Reverie 沉浸式视差落地页",
+    "zh-TW": "神話自然核 — Reverie 沉浸式視差著陸頁",
+    "ja": "Mythic Naturecore — Reverie",
+    "ko": "Mythic Naturecore — Reverie",
+    "de": "Mythic Naturecore — Reverie",
+    "fr": "Mythic Naturecore — Reverie",
+    "ru": "Mythic Naturecore — Reverie",
+    "es": "Mythic Naturecore — Reverie",
+    "pt-BR": "Mythic Naturecore — Reverie",
+    "it": "Mythic Naturecore — Reverie",
+    "vi": "Mythic Naturecore — Reverie",
+    "pl": "Mythic Naturecore — Reverie",
+    "id": "Mythic Naturecore — Reverie",
+    "nl": "Mythic Naturecore — Reverie",
+    "ar": "Mythic Naturecore — Reverie",
+    "tr": "Mythic Naturecore — Reverie",
+    "uk": "Mythic Naturecore — Reverie",
+    "en": "Mythic Naturecore — Reverie"
+  },
+  "version": "0.1.0",
+  "description": "A cinematic mythic-naturecore landing page: a 480vh scroll zooms through a portal while mirrored curtains part over a layered world background, with mouse-parallax 3D depth and a Viaoda-Libre / Imprima serif-sans pairing.",
+  "description_i18n": {
+    "zh-CN": "电影感神话自然核落地页：480vh 滚动穿过传送门，镜像帷幕在分层世界背景上拉开，配合鼠标视差 3D 景深与 Viaoda Libre / Imprima 衬线无衬线字体组合。",
+    "zh-TW": "電影感神話自然核著陸頁：480vh 捲動穿過傳送門，鏡像帷幕在分層世界背景上拉開，搭配滑鼠視差 3D 景深與 Viaoda Libre／Imprima 襯線無襯線字體組合。",
+    "ja": "シネマティックな mythic-naturecore のランディングページ：480vh のスクロールでポータルをズームスルーし、層状のワールド背景の上でミラーリングされたカーテンが開く。マウスパララックスによる 3D の奥行きと、Viaoda-Libre／Imprima のセリフ＆サンセリフのペアリングを備える。",
+    "ko": "시네마틱한 미식 네이처코어 랜딩 페이지: 480vh 스크롤로 포털을 줌인하며 통과하고, 레이어드 월드 배경 위로 미러링된 커튼이 갈라집니다. 마우스 패럴랙스 3D 뎁스와 Viaoda-Libre / Imprima 세리프-산세리프 조합을 갖췄습니다.",
+    "de": "Eine cinematische Mythic-Naturecore-Landingpage: Ein 480vh-Scroll zoomt durch ein Portal, während sich gespiegelte Vorhänge über einem mehrschichtigen Welthintergrund öffnen – mit 3D-Tiefe durch Maus-Parallaxe und einer Serif-Sans-Kombination aus Viaoda-Libre / Imprima.",
+    "fr": "Une page d'atterrissage mythic-naturecore cinématique : un scroll de 480vh zoome à travers un portail tandis que des rideaux en miroir s'écartent sur un arrière-plan de monde en couches, avec une profondeur 3D en parallaxe à la souris et un duo serif-sans Viaoda-Libre / Imprima.",
+    "ru": "Кинематографичный лендинг в стиле mythic-naturecore: прокрутка на 480vh проносит сквозь портал, пока зеркальные занавесы расходятся над многослойным фоном мира, с 3D-глубиной мышиного параллакса и сочетанием шрифтов serif-sans Viaoda-Libre / Imprima.",
+    "es": "Una página de aterrizaje mythic-naturecore cinematográfica: un scroll de 480vh hace zoom a través de un portal mientras unas cortinas en espejo se abren sobre un fondo de mundo por capas, con profundidad 3D por paralaje de ratón y una combinación serif-sans Viaoda-Libre / Imprima.",
+    "pt-BR": "Uma landing page mythic-naturecore cinematográfica: um scroll de 480vh dá zoom através de um portal enquanto cortinas espelhadas se abrem sobre um fundo de mundo em camadas, com profundidade 3D por paralaxe do mouse e uma combinação serif-sans Viaoda-Libre / Imprima.",
+    "it": "Una landing page mythic-naturecore cinematografica: uno scroll di 480vh zooma attraverso un portale mentre tende speculari si aprono su uno sfondo di mondo a strati, con profondità 3D in parallasse del mouse e un abbinamento serif-sans Viaoda-Libre / Imprima.",
+    "vi": "Một trang đích mythic-naturecore đậm chất điện ảnh: cuộn 480vh phóng xuyên qua một cổng dịch chuyển trong khi những tấm rèm phản chiếu tách ra trên nền thế giới nhiều lớp, với chiều sâu 3D parallax theo chuột và cặp font serif-sans Viaoda-Libre / Imprima.",
+    "pl": "Filmowa strona docelowa w stylu mythic-naturecore: przewijanie o 480vh przybliża widok przez portal, podczas gdy lustrzane zasłony rozsuwają się nad warstwowym tłem świata, z trójwymiarową głębią dzięki paralaksie myszy i parą krojów serif-sans Viaoda-Libre / Imprima.",
+    "id": "Halaman landing mythic-naturecore sinematik: scroll 480vh melakukan zoom menembus portal sementara tirai bercermin terbuka di atas latar dunia berlapis, dengan kedalaman 3D parallax mouse dan pasangan serif-sans Viaoda-Libre / Imprima.",
+    "nl": "Een cinematische mythic-naturecore-landingspagina: een scroll van 480vh zoomt door een portaal terwijl gespiegelde gordijnen openen boven een gelaagde wereldachtergrond, met 3D-diepte via muisparallax en een serif-sans-combinatie van Viaoda-Libre / Imprima.",
+    "ar": "صفحة هبوط سينمائية بأسلوب mythic-naturecore: تمرير بطول 480vh يقرّب المشهد عبر بوابة بينما تنفرج ستائر معكوسة فوق خلفية عالم متعدد الطبقات، مع عمق ثلاثي الأبعاد بتأثير اختلاف منظر الفأرة وتزاوج خطّي Viaoda-Libre / Imprima بين السيريف والسانس.",
+    "tr": "Sinematik bir mythic-naturecore açılış sayfası: 480vh'lik bir kaydırma bir portalın içinden yakınlaştırırken katmanlı bir dünya arka planı üzerinde aynalanmış perdeler açılır; fare paralaksıyla 3D derinlik ve Viaoda-Libre / Imprima serif-sans eşleşmesi ile.",
+    "uk": "Кінематографічний лендинг у стилі mythic-naturecore: прокручування на 480vh наближає крізь портал, поки дзеркальні завіси розходяться над багатошаровим фоном світу, з 3D-глибиною мишачого паралаксу та поєднанням шрифтів serif-sans Viaoda-Libre / Imprima.",
+    "en": "A cinematic mythic-naturecore landing page: a 480vh scroll zooms through a portal while mirrored curtains part over a layered world background, with mouse-parallax 3D depth and a Viaoda-Libre / Imprima serif-sans pairing."
+  },
+  "license": "CC-BY-4.0",
+  "author": {
+    "name": "Eli"
+  },
+  "homepage": "https://motionsites.ai/sections",
+  "tags": [
+    "example",
+    "first-party",
+    "prototype",
+    "design",
+    "web",
+    "desktop",
+    "naturecore",
+    "parallax",
+    "cinematic",
+    "landing"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "prototype",
+    "platform": "desktop",
+    "scenario": "design",
+    "surface": "web",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "Recreate a high-fidelity, premium interactive landing page named \"Reverie\" using React, TypeScript, and a combination of Tailwind CSS and inline styles. The project must have a smooth, hardware-accelerated scroll-linked animation system, 3D/parallax mouse-tracking effects, responsive layouts, and elegant micro-animations.\n\n---\n\n- Typography & Global Styles\n\n- Fonts:\n- Load the following Google Fonts:\n- Headers: `'Viaoda Libre', serif` (elegant serif font).\n- Body, nav links, and captions: `'Imprima', sans-serif` (clean, sleek sans-serif font).\n- Global Reset & Base CSS:\n- `html, body { margin: 0; padding: 0; background: #0a0608; scroll-behavior: auto; }`\n- Body font should default to `'Imprima', sans-serif`.\n- Add `scrollbar-gutter: stable;` to the `html` tag to prevent layout shifts.\n- Include an animation utility:`@keyframes bobUp {  0%, 100% { transform: translateY(0); }  50% { transform: translateY(-6px); }}`\n\n---\n\n- Assets Asset Mapping\n\nDefine these exact asset constants at the top of the file:`const PORTAL_BG = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/portal_bg_mu60k9-78f20d.webp';const CURTAIN_LEFT = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/curtain_left_cdht6q-c85f2f.webp';const CURTAIN_RIGHT = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/curtain_right_a9bn3i-1ca8f6.webp';const WORLD_BG = 'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/world_bg_jzzcn1-dfd909.webp';// The cards MUST remain in this exact order (Card 3, Card 1, Card 2)const CARD_IMAGES = [  'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_3_nbwm25-de0132.webp',  'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_2_wr6al6-b3a8c5.webp', // Representing Card 1  'https://plugin-assets.open-design.ai/plugins/mythic-naturecore/card_1_jz8otj-096be2.webp', // Representing Card 2];`\n\n---\n\n- State Management & Mathematical Helpers\n\n- Math Utilities:\n- Easing curve: `easeInOut(t) = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t`\n- Linear Interpolation: `lerp(a, b, t) = a + (b - a) * t`\n- Constraint: `clamp(val, min, max) = Math.max(min, Math.min(max, val))`\n- Parallax Magnitudes:\n- `MAG.world = 6`, `MAG.portal = 7`, `MAG.curtainL = 14`, `MAG.curtainR = 14`\n- Hook for Responsiveness:\n- Implement a `useIsMobile()` hook responding to media query max-width of `767px` to dynamically update layouts.\n- Scroll Tracking:\n- The page height must be exactly `480vh`. Inside, a single sticky container spans `100vh`.\n- Calculate normalized `scrollProgress` from `0` to `1` by reading window scroll position relative to the scrollable height.\n- Smooth Mouse Tracking (Parallax):\n- Normalize coordinates `rx`, `ry` between `-1` and `1` relative to the center of the viewport.\n- Implement a `requestAnimationFrame` render loop (`tick`) to smoothly interpolate current position towards target cursor position (lerp step speed: `0.07`) to eliminate frame-rate stutters.\n- Entrance Animation Delays:\n- On mount, transition curtains open after `100ms`, fade UI in after `600ms`. Disable entry CSS transitions after `2200ms` so mouse movement doesn't experience lag or delay.\n\n---\n\n- Animation Timelines (Scroll & Mouse Parallax)\n\nApply these precise styling updates in the render loop on every frame:\n- World Layer (`WORLD_BG`):\n- Scale: Lerps from `1` (at start) to `1.18` (at maximum scroll).\n- Parallax: `transform = scale(${scale}) translate3d(${rx * 6}px, ${ry * 6}px, 0)`\n- Portal Frame (`PORTAL_BG`):\n- Scale: Lerps from `1` to `7.5` (creating an immersive zoom-through effect).\n- Origin: `52% 38%`\n- Opacity: Starts at `1`, fades out after `65%` scroll: `clamp(1 - (scrollProgress - 0.65) / 0.2, 0, 1)`\n- Parallax: `transform = scale(${scale}) translate3d(${rx * 7}px, ${ry * 7}px, 0)`\n- Curtain Left (`CURTAIN_LEFT`):\n- Initial Opening Offset: `62%` shift left.\n- Scroll Offset: Moves further leftward up to `150%` as eased progress goes `0` to `1`.\n- Curtain Scroll Scale: Lerps from `1` to `1.3`.\n- Parallax & GPU Layer: `transform = translateX(calc(-${totalShift}% + ${rx * 14}px)) translateY(${ry * 14 * 0.3}px) scale(${curtainScrollScale}) translateZ(0)`\n- Curtain Right (`CURTAIN_RIGHT`):\n- Symmetrically mirrors Curtain Left.\n- Parallax & GPU Layer: `transform = translateX(calc(${totalShift}% + ${rx * 14}px)) translateY(${ry * 14 * 0.3}px) scale(${curtainScrollScale}) translateZ(0)`\n\n---\n\n- Layout & Components\n\nNavigation Bar\n- Position: Absolute at the top, `zIndex: 50`. Responsive padding: `18px 20px` (mobile), `22px 48px` (desktop).\n- Desktop (>=768px): Split navigation.\n- Left side: Links `Worlds`, `Atelier`, `Immersions`.\n- Center: SVG Star Logo (clean star shape in path `M14 2l2.09 6.42H23l-5.45 ...` inside a `28x28` viewport).\n- Right side: Links `Craft`, `Codex`, `Connect`.\n- Mobile (<768px): Centered star logo with an `Explore` link on the left and a `Connect` link on the right.\n- Link Styling: uppercase, `12px`, letter spacing `0.12em`, white color with `0.9` opacity, no text decoration.\n\nScene 1: Hero Section (Entrance)\n- Opacity: Fades out smoothly on scroll: `clamp(1 - scrollProgress / 0.22, 0, 1)`.\n- Entrance Transition: Slide upward by `20px` on mount with opacity transition `0.9s ease` delayed by `300ms`.\n- Responsive Layout:\n- Mobile (<768px): Center-aligned vertical column. Text is dark brown (`#3b1a0a`). Heading: `FALL › INTO REVERIE` (Viaoda Libre). Subheading paragraph (max-width `280px`). Below it, displays a single card with image `CARD_IMAGES[0]`, showing a rounded white play button icon and \"View Reel\".\n- Tablet (768px - 1099px): Center-aligned column. Text is dark brown (`#3b1a0a`). Headline and paragraph (max-width `400px`). Shows all 3 cards in a horizontal row:\n- Card 3: Image `CARD_IMAGES[0]`, Play button + \"View Reel\"\n- Card 1: Image `CARD_IMAGES[1]`, \"32 World Patrons\" in large elegant text\n- Card 2: Image `CARD_IMAGES[2]`, Play button + \"View Reel\"\n- Desktop (>=1100px): Split-screen horizontal layout. Text is white.\n- Left Container: Aligned to the left (top `46%`, left `60px`). Title: `FALL › INTO REVERIE` (Viaoda Libre). Subheading paragraph. Max-width `440px`.\n- Right Container: Aligned to the right (top `50%`, right `40px`). Row of 3 card containers (`158px x 158px`) with rounded corners (`28px`), bottom linear gradient, glassmorphic bottom blur (`backdropFilter: 'blur(6px)'`), play icon buttons or patron metrics overlay.\n- Card Interactive Styling:\n- Backdrop blur filter on bottom labels: `backdropFilter: 'blur(6px)'`, linear gradient to top `rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, transparent 100%`.\n- Slider Dots (Bottom Left):\n- Absolutely positioned at bottom left (`60px` desktop, centered mobile).\n- Renders 4 horizontal pill indicators: first indicator is wide (`28px`), other three are thin (`14px`), colored in white with opacities.\n- Scroll Cue (Descend):\n- Absolutely positioned at `bottom: 36px`, centered horizontally. Hidden on mobile.\n- Text: uppercase \"Descend\" in `10px`, letter-spacing `0.22em`, color `rgba(255,255,255,0.6)`.\n- Icon: A chevron SVG surrounded by a `34px x 34px` round circular border animated with the `bobUp 1.8s ease-in-out infinite` bounce animation.\n\nScene 2: Call to Action (Forge Beyond)\n- Opacity: Fades in on scroll: `clamp((scrollProgress - 0.68) / 0.16, 0, 1)`.\n- Layout: Centered vertical flex container (`zIndex: 46`), active only when opacity is visible.\n- Content:\n- Centered text wrapper.\n- Heading: `FORGE BEYOND THE REAL` (Viaoda Libre, size clamp `38px` to `78px`, color `#ffffff`, letter spacing `0.03em`, line-height `1.05`, elegant text shadow `0 2px 20px rgba(0,0,0,0.4)`).\n- Paragraph: `Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known.` (Imprima, size `20px` desktop / `14px` mobile, max-width `480px` desktop / `260px` mobile, line-height `1.6`, color `rgba(255,255,255,0.82)`).``\n",
+        "zh-CN": "构建 Mythic Naturecore（“Reverie”）电影感视差落地页。完整规格以 en 字段为准（逐字注入）；从随附的 example.html 起步，只替换文案与图片，不要改动滚动/视差数学与视觉语言。"
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "Mythic Naturecore — Reverie"
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "assets": [
+        "./example.html"
+      ]
+    },
+    "pipeline": {
+      "stages": [
+        {
+          "id": "generate",
+          "atoms": [
+            "file-write",
+            "live-artifact"
+          ]
+        }
+      ]
+    },
+    "capabilities": [
+      "prompt:inject",
+      "fs:write",
+      "network"
+    ]
+  }
+}