npm - agent-devkit - Versions diffs - 0.0.1 - Mend

agent-devkit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4610) hide show

package/runtime/vendor/plugins/open-design/_official/examples/docs-page/SKILL.md ADDED Viewed

@@ -0,0 +1,80 @@
+---
+name: docs-page
+description: |
+  A documentation page — inline-start nav, scrollable article body,
+  inline-end table of contents. Use when the brief mentions "docs",
+  "documentation", "guide", "API reference", or "tutorial".
+triggers:
+  - "docs"
+  - "documentation"
+  - "guide"
+  - "tutorial"
+  - "api reference"
+  - "文档"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: engineering
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [typography, typography-hierarchy, typography-hierarchy-editorial, rtl-and-bidi]
+---
+# Docs Page Skill
+Produce a single, three-column documentation page in one HTML file.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Use the body type token for
+   prose; the mono token for code; respect line-height and max-width rules.
+2. **Pick a topic** from the brief — the page should look like real docs, not
+   a generic wireframe. Concrete API names, command examples, plausible
+   parameters.
+3. **Lay out** three regions, expressed on the inline axis so the
+   layout flips correctly under `dir="rtl"`:
+   - **Inline-start nav** (240–280px, sticky): grouped link list, current
+     page bolded with an `inline-start`-edge accent stripe. 3–5 groups
+     of 4–8 links.
+   - **Article body** (max-width ~720px, centered in the middle column):
+     H1, lede paragraph, H2 sections, code blocks, callout boxes (note /
+     warning), inline links, lists.
+   - **Inline-end TOC** (200–240px, sticky): "On this page" with the
+     H2/H3 anchors, current section highlighted as the user scrolls.
+4. **Write** a single HTML document:
+   - `<!doctype html>` through `</html>`, all CSS inline.
+   - CSS Grid for the three columns; sticky positioning for the rails.
+   - Code blocks: monospace token, soft surface fill, copy-button affordance
+     (visual only — no JS needed).
+   - Anchor IDs on every H2/H3 so the TOC links work.
+   - `data-od-id` on the nav, article, and TOC.
+5. **Prose**: write at least 350 words of believable docs. Include at least
+   one shell command, one code snippet (5–15 lines), one callout, one table.
+6. **Self-check**:
+   - Body text wraps at the DS line-length sweet spot (60–75 chars).
+   - Code uses the DS mono token, not generic `monospace`.
+   - Accent is restrained — used for active nav item, links, one callout
+     border. Not on body text.
+   - Page is readable at 1280w and collapses gracefully below 900w (TOC drops
+     out, nav becomes a top drawer).
+   - Use logical CSS (`margin-inline-start`, `border-inline-start`,
+     `inset-inline-end`, `text-align: start`) on the rails and accent
+     stripe so the layout flips correctly under `dir="rtl"`.
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.

package/runtime/vendor/plugins/open-design/_official/examples/docs-page/example.html ADDED Viewed

@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Filebase docs — Quickstart</title>
+  <style>
+    :root {
+      --bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
+      --accent: #c96442; --surface: #ffffff; --code-bg: #f4f4f2;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 -apple-system, system-ui, sans-serif; }
+    .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 28px; display: flex; justify-content: space-between; align-items: center; }
+    .topbar .brand { font-weight: 600; }
+    .topbar input { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); width: 280px; font: inherit; background: var(--bg); }
+    .layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 0; min-height: calc(100vh - 50px); }
+    @media (max-width: 1024px) { .layout { grid-template-columns: 220px 1fr; } .toc { display: none; } }
+    @media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } }
+    .sidebar { padding: 24px 16px; border-right: 1px solid var(--border); overflow-y: auto; font-size: 14px; }
+    .sidebar .group { margin-bottom: 22px; }
+    .sidebar .group-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 8px 8px; }
+    .sidebar a { display: block; color: var(--fg); text-decoration: none; padding: 5px 8px; border-radius: 6px; }
+    .sidebar a:hover { background: var(--surface); }
+    .sidebar a.active { background: var(--accent); color: white; }
+    article { padding: 40px 56px 80px; max-width: 760px; }
+    .crumbs { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
+    h1 { font-size: 36px; letter-spacing: -0.02em; margin: 0 0 12px; }
+    .lede { color: var(--muted); font-size: 17px; margin: 0 0 32px; }
+    h2 { font-size: 22px; letter-spacing: -0.01em; margin: 40px 0 12px; }
+    h3 { font-size: 16px; margin: 24px 0 8px; }
+    p { margin: 12px 0; }
+    code { font-family: ui-monospace, monospace; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
+    pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
+    pre code { background: transparent; padding: 0; }
+    .callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: 14px; }
+    .callout .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 4px; }
+    .toc { padding: 40px 24px 24px; font-size: 13px; border-left: 1px solid var(--border); }
+    .toc .toc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
+    .toc a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
+    .toc a.active { color: var(--accent); font-weight: 500; }
+    .pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
+    .pager a { flex: 1; text-decoration: none; color: var(--fg); padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
+    .pager a small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
+  </style>
+</head>
+<body>
+  <header class="topbar" data-od-id="topbar">
+    <span class="brand">◰ Filebase docs</span>
+    <input placeholder="Search · ⌘K" />
+  </header>
+  <div class="layout">
+    <nav class="sidebar" data-od-id="sidebar">
+      <div class="group">
+        <div class="group-label">Getting started</div>
+        <a href="#" class="active">Quickstart</a>
+        <a href="#">Concepts</a>
+        <a href="#">Authentication</a>
+      </div>
+      <div class="group">
+        <div class="group-label">Sync engine</div>
+        <a href="#">Block-level deltas</a>
+        <a href="#">Conflict resolution</a>
+        <a href="#">Resumable uploads</a>
+      </div>
+      <div class="group">
+        <div class="group-label">CLI</div>
+        <a href="#">Install</a>
+        <a href="#">Configuration</a>
+        <a href="#">Subcommands</a>
+      </div>
+    </nav>
+    <article data-od-id="article">
+      <div class="crumbs">Docs › Getting started › Quickstart</div>
+      <h1>Quickstart</h1>
+      <p class="lede">Sync your first folder in under five minutes. The CLI is the fastest path; the desktop app and the API client all wrap the same engine.</p>
+      <h2 id="install">1. Install the CLI</h2>
+      <p>The CLI is distributed as a single binary for macOS, Linux, and Windows.</p>
+<pre><code># macOS · Homebrew
+brew install filebase
+# Linux · curl
+curl -fsSL https://get.filebase.dev | sh</code></pre>
+      <p>Verify the install:</p>
+<pre><code>filebase --version
+# filebase 0.6.4</code></pre>
+      <h2 id="auth">2. Authenticate</h2>
+      <p>Sign in with your Filebase account. The token is stored in <code>~/.config/filebase/credentials</code>.</p>
+<pre><code>filebase auth login
+# → opens your browser
+# ✓ Logged in as you@example.com</code></pre>
+      <div class="callout">
+        <div class="label">Note</div>
+        On servers without a browser, use <code>filebase auth login --device</code> for a device-code flow.
+      </div>
+      <h2 id="sync">3. Sync a folder</h2>
+      <p>Pick a local directory and link it to a remote root. Filebase watches it for changes and pushes block-level diffs in the background.</p>
+<pre><code>cd ~/projects
+filebase init my-team
+filebase sync</code></pre>
+      <h3>Excluding files</h3>
+      <p>Add a <code>.filebaseignore</code> at the root of the synced folder. Same syntax as <code>.gitignore</code>:</p>
+<pre><code>node_modules/
+*.log
+build/</code></pre>
+      <h2 id="next">4. Where to go next</h2>
+      <p>Read <a href="#">Conflict resolution</a> to understand how Filebase merges concurrent edits, or skip to the <a href="#">CLI reference</a> for the full subcommand list.</p>
+      <div class="pager">
+        <a href="#"><small>← Previous</small>Concepts</a>
+        <a href="#" style="text-align: right;"><small>Next →</small>Conflict resolution</a>
+      </div>
+    </article>
+    <aside class="toc" data-od-id="toc">
+      <div class="toc-label">On this page</div>
+      <a href="#install" class="active">1. Install the CLI</a>
+      <a href="#auth">2. Authenticate</a>
+      <a href="#sync">3. Sync a folder</a>
+      <a href="#next">4. Where to go next</a>
+    </aside>
+  </div>
+</body>
+</html>

package/runtime/vendor/plugins/open-design/_official/examples/docs-page/open-design.json ADDED Viewed

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-docs-page",
+  "title": "Docs Page",
+  "title_i18n": {
+    "zh-CN": "文档页面",
+    "zh-TW": "文件頁面",
+    "ja": "ドキュメントページ",
+    "ko": "문서 페이지",
+    "de": "Dokumentationsseite",
+    "fr": "Page de documentation",
+    "ru": "Страница документации",
+    "es": "Página de documentación",
+    "pt-BR": "Página de documentação",
+    "it": "Pagina di documentazione",
+    "vi": "Trang tài liệu",
+    "pl": "Strona dokumentacji",
+    "id": "Halaman Dokumentasi",
+    "nl": "Documentatiepagina",
+    "ar": "صفحة التوثيق",
+    "tr": "Dokümantasyon Sayfası",
+    "uk": "Сторінка документації",
+    "en": "Docs Page"
+  },
+  "version": "0.1.0",
+  "description": "A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions \"docs\", \"documentation\", \"guide\", \"API reference\", or \"tutorial\".",
+  "description_i18n": {
+    "zh-CN": "文档页面 — 侧边导航、可滚动正文和目录。当需求提到'文档'、'指南'、'API 参考'或'教程'时使用。",
+    "zh-TW": "文件頁面 — 側邊導覽、可捲動內文和目錄。當需求提到'文件'、'指南'、'API 參考'或'教學'時使用。",
+    "ja": "ドキュメントページ — サイドナビゲーション、スクロール可能な本文、目次を含むレイアウト。'ドキュメント'、'ガイド'、'API リファレンス'、'チュートリアル'が指定された際に使用します。",
+    "ko": "문서 페이지 — 사이드 탐색, 스크롤 가능한 본문, 목차로 구성됩니다. '문서', '가이드', 'API 참조' 또는 '튜토리얼'이 언급될 때 사용하세요.",
+    "de": "Eine Dokumentationsseite mit seitlicher Navigation, scrollbarem Artikelbereich und Inhaltsverzeichnis. Verwenden Sie sie bei Erwähnung von 'Dokumentation', 'Anleitung', 'API-Referenz' oder 'Tutorial'.",
+    "fr": "Une page de documentation avec navigation latérale, contenu déroulant et table des matières. À utiliser lorsque le brief mentionne 'documentation', 'guide', 'référence API' ou 'tutoriel'.",
+    "ru": "Страница документации с боковой навигацией, прокручиваемым содержимым и оглавлением. Используйте при упоминании 'документация', 'руководство', 'справочник API' или 'учебник'.",
+    "es": "Una página de documentación con navegación lateral, cuerpo de artículo desplazable y tabla de contenidos. Úsela cuando se mencione 'documentación', 'guía', 'referencia API' o 'tutorial'.",
+    "pt-BR": "Uma página de documentação com navegação lateral, corpo de artigo rolável e sumário. Use quando o briefing mencionar 'documentação', 'guia', 'referência de API' ou 'tutorial'.",
+    "it": "Una pagina di documentazione con navigazione laterale, corpo dell'articolo scorrevole e indice dei contenuti. Da usare quando il brief menziona 'documentazione', 'guida', 'riferimento API' o 'tutorial'.",
+    "vi": "Trang tài liệu với thanh điều hướng bên, nội dung cuộn được và mục lục. Sử dụng khi yêu cầu đề cập 'tài liệu', 'hướng dẫn', 'tham chiếu API' hoặc 'hướng dẫn chi tiết'.",
+    "pl": "Strona dokumentacji z boczną nawigacją, przewijaną treścią artykułu i spisem treści. Używaj, gdy brief wspomina o 'dokumentacji', 'przewodniku', 'referencji API' lub 'tutorialu'.",
+    "id": "Halaman dokumentasi dengan navigasi samping, isi artikel yang dapat digulir, dan daftar isi. Gunakan saat brief menyebutkan 'dokumentasi', 'panduan', 'referensi API', atau 'tutorial'.",
+    "nl": "Een documentatiepagina met zijnavigatie, scrollbare artikelinhoud en inhoudsopgave. Gebruik bij vermelding van 'documentatie', 'handleiding', 'API-referentie' of 'tutorial'.",
+    "ar": "صفحة توثيق تحتوي على شريط تنقل جانبي، محتوى قابل للتمرير وجدول محتويات. استخدمها عندما يذكر الملخص 'توثيق' أو 'دليل' أو 'مرجع API' أو 'برنامج تعليمي'.",
+    "tr": "Yan gezinme, kaydırılabilir makale içeriği ve içindekiler tablosu içeren dokümantasyon sayfası. Brief'te 'dokümantasyon', 'kılavuz', 'API referansı' veya 'öğretici' geçtiğinde kullanın.",
+    "uk": "Сторінка документації з бічною навігацією, прокручуваним вмістом статті та змістом. Використовуйте, коли бриф згадує 'документація', 'посібник', 'довідник API' або 'підручник'.",
+    "en": "A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions \"docs\", \"documentation\", \"guide\", \"API reference\", or \"tutorial\"."
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Open Design",
+    "url": "https://github.com/nexu-io"
+  },
+  "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/docs-page",
+  "tags": [
+    "example",
+    "first-party",
+    "prototype",
+    "engineering",
+    "web",
+    "desktop",
+    "docs",
+    "documentation",
+    "guide",
+    "tutorial",
+    "api-reference",
+    "untitled"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "prototype",
+    "platform": "desktop",
+    "scenario": "engineering",
+    "surface": "web",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions \"docs\", \"documentation\", \"guide\", \"API reference\", or \"tutorial\".",
+        "zh-CN": "使用这个插件完成以下任务：A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions \"docs\", \"documentation\", \"guide\", \"API reference\", or \"tutorial\"."
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "Docs Page"
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "designSystem": {
+        "primary": true
+      },
+      "craft": [
+        "typography",
+        "typography-hierarchy",
+        "typography-hierarchy-editorial",
+        "rtl-and-bidi"
+      ],
+      "assets": [
+        "./example.html"
+      ]
+    },
+    "pipeline": {
+      "stages": [
+        {
+          "id": "generate",
+          "atoms": [
+            "file-write",
+            "live-artifact"
+          ]
+        }
+      ]
+    },
+    "capabilities": [
+      "prompt:inject",
+      "fs:write"
+    ]
+  }
+}

package/runtime/vendor/plugins/open-design/_official/examples/dreamcore-landing/SKILL.md ADDED Viewed

@@ -0,0 +1,134 @@
+---
+name: dreamcore-landing
+description: "Use this plugin when the user wants a single-page immersive parallax landing page with a scroll-driven portal/curtain entrance and a curved arc card slider — a 'dreamcore' / 'reverie' hero that scales a portal image toward the viewer as the user scrolls into a second dream-world scene. Invoke for 'parallax landing', 'scroll cinematic hero', 'portal zoom landing', 'arc card slider', or when the user references the Dreamcore Landing template."
+version: 0.1.0
+od:
+  mode: prototype
+  surface: web
+  scenario: design
+  preview:
+    type: html
+    entry: example.html
+  design_system:
+    requires: false
+---
+# Dreamcore Landing — Immersive Parallax Scroll Hero
+Produce a single-page immersive **parallax landing page** with two scroll-driven scenes inside one sticky viewport. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the layer math, the easing, or the visual language. The seed already encodes the exact layer stack, scroll mapping, entrance sequence, mouse parallax, and arc-slider geometry described below.
+This is the authoritative build brief. Follow it exactly — the layer z-order, scale ranges, scroll breakpoints, MAG values, fonts, image URLs, and card data are locked.
+## Stack
+- Default output: a single self-contained HTML file (the `example.html` seed). Vanilla HTML/CSS/JS, no build step. Framework features are mapped down: `useScroll`/`useTransform` → a passive `scroll` listener writing scrollProgress; per-frame transforms → a `requestAnimationFrame` loop; mouse parallax → a `mousemove` handler lerped at `speed = 0.07`; entrance animation → `setTimeout` milestones.
+- If the user explicitly asks for the React + TypeScript + Tailwind + Vite project, port the seed faithfully into a single `src/App.tsx`: same layer stack, same easing helpers (`easeInOut`, `lerp`, `clamp`), same MAG values, `lucide-react` as a (largely unused) dependency, Tailwind only for the responsive breakpoints. Override the `xl` breakpoint to `1100px` (`screens: { xl: '1100px' }`). Do not change the design while porting.
+## Fonts & Global
+- Google Fonts via `<link>`: `https://fonts.googleapis.com/css2?family=Viaoda+Libre&family=Imprima&display=swap`. **Viaoda Libre** = serif headings; **Imprima** = sans-serif body. Title: "Step Into Wonder".
+- Global reset, dark background `#0a0608`, `font-family: 'Imprima', sans-serif`, `scrollbar-gutter: stable`.
+- `@keyframes bobUp`: translateY `-6px` at 50% (drives the scroll-cue chevron, `animation: bobUp 1.8s ease-in-out infinite`).
+## Image Assets (use these EXACT remote URLs — keep them remote)
+These are large stable CDN stills; **do not inline them and do not swap the host**.
+```
+PORTAL_BG     = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/image_1_vdzwae-464f73.webp
+CURTAIN_LEFT  = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/curtain_left_znkmva-f9eb4c.webp
+CURTAIN_RIGHT = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/curtain_right_paeyym-9fa947.webp
+WORLD_BG      = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/image_2_gkcdlx-5f252f.webp
+BOTTOM_CLOUDS = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/bottom_clouds_xskut6-c56b42.webp
+CARD_IMAGES[0] = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/hf_20260525_160507_2ccbb4eb-1469-484f-af25-59168ad9a233-0c7429.webp&w=1280&q=85
+CARD_IMAGES[1] = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/hf_20260525_160644_072a7f68-a101-4ded-a332-7d37707dbdd1-bfae0e.webp&w=1280&q=85
+CARD_IMAGES[2] = https://plugin-assets.open-design.ai/plugins/dreamcore-landing/hf_20260525_160706_1c153d04-0dfb-4ac9-a4ef-e74f301c329c-8b9d4e.webp&w=1280&q=85
+```
+## Architecture
+- Outer container: `height: 480vh; position: relative`. Inside it: a `position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0a0608` viewport. All layers stack via absolute positioning + z-index.
+- `scrollProgress = clamp(window.scrollY / (container.scrollHeight - window.innerHeight), 0, 1)`.
+- Helpers: `easeInOut(t) = t<0.5 ? 2*t*t : -1+(4-2*t)*t`; `lerp(a,b,t)`; `clamp(v,mn,mx)`. `isMobile()` = `matchMedia('(max-width: 767px)')`.
+- `ep = easeInOut(scrollProgress)` drives every layer's scale.
+## Layer Stack (bottom → top by z-index)
+1. **World Background** (z 0): `WORLD_BG`, inset 0, `object-fit: cover`, `transform-origin: 50% 50%`. Scale `lerp(1, 1.18, ep)`. Mouse MAG = 6.
+2. **Bottom Clouds** (z 10): `BOTTOM_CLOUDS`, bottom 0, `width:100% height:auto`, `transform-origin: 50% 100%`. Scale `lerp(1, 1.4, ep)`. Mouse MAG = 9 (Y dampened ×0.4). Opacity fades 0.7→1 in first 5% of scroll.
+3. **Arc Card Slider** (z 9): absolute, `bottom: 60px (mobile)/80px (desktop)`, centered. Opacity = `scene2Opacity`. Holds `<ArcCardSlider>` (geometry below).
+4. **Portal Frame** (z 15): `PORTAL_BG`, inset 0, `object-fit: cover`, `transform-origin: 52% 38%`. Scale `lerp(1, 7.5, ep)` — the zoom-into-portal. Mouse MAG = 7. Opacity 1 until scroll 0.65, fades to 0 by 0.85.
+5. **Bottom Fade** (z 16): bottom, `height: 40%`, `linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%)`, `pointer-events: none`.
+6. **Curtain Left** (z 16): `CURTAIN_LEFT`, inset 0, `object-fit: cover`, `object-position: right center`, `transform-origin: left center`. Entrance: after 100ms shift `translateX(-62%)` with `transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1)`. On scroll: additional `translateX -lerp(0,150,ep)%`, scale `lerp(1,1.3,ep)`. Mouse MAG = 14 (Y ×0.3). After 2200ms, transition → `none` for instant parallax.
+7. **Curtain Right** (z 16): mirror — `transform-origin: right center`, `object-position: left center`, shifts `+62%` then `+lerp(0,150,ep)%`, MAG = 14.
+8. **Top Fade** (z 45): top, `height: 42vh`, `linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%)`, `pointer-events: none`.
+## Navigation (z 50)
+Absolute top, full width, `flex; space-between; center`. Link style: Imprima, `12px`, `letter-spacing: 0.12em`, uppercase, `#fff`, opacity 0.9.
+- **Mobile** (`padding: 18px 20px`): "Explore" (11px) · StarLogo · "Connect" (11px).
+- **Desktop** (`padding: 22px 48px`): left group `["Worlds","Atelier","Immersions"]` gap 36 · StarLogo center · right group `["Craft","Codex","Connect"]` gap 36.
+- **StarLogo** — inline SVG 28×28: white star path `M14 2l2.09 6.42H23l-5.45 3.96 2.09 6.42L14 14.84l-5.64 4.06 2.09-6.42L4.96 8.42h6.95L14 2z` (opacity 0.9) + 3 small circles (cx/cy 14/24 r1.5 op .6; 6/6 r1 op .4; 22/6 r1 op .4).
+## Scene 1 UI (z 20)
+Opacity = `clamp(1 - scrollProgress/0.22, 0, 1)`. Three Tailwind-responsive layout blocks (no JS layout branching):
+- **Mobile** (`md:hidden`, `padding 80px 24px 100px`, centered column): heading "FALL › INTO" (`clamp(26px,7vw,42px)`, tracking-widest, `#3b1a0a`) then "REVERIE" (`clamp(52px,16vw,80px)`, tracking-tight, leading-none, `#3b1a0a`). The `›` is `#6b2e0e` at `0.8em`; "INTO" is italic. Subtext `15px`, `#5c2d0e`, max-width 280. One 140×140 reel card.
+- **Tablet** (`hidden md:flex xl:hidden`, gap 28): same heading dark-brown (sizes `clamp(28px,5vw,44px)`/`clamp(60px,12vw,86px)`), subtext `16px` max-width 400. Three 140×140 cards (`gap 14`): card1 reel, card2 number "32" + "World Patrons", card3 reel.
+- **Desktop** (`hidden xl:block`/`flex`): heading block absolute `top:46% left:60px maxWidth:440px translateY(-50%)`, white with `text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.9)`. "FALL › INTO" `clamp(32px,4.5vw,54px)` line-height 1.1 ls 0.04em, `›` = `rgba(255,220,180,0.7)`. "REVERIE" `clamp(50px,7.5vw,88px)` line-height 0.9 ls -0.02em. Subtext `18px` line-height 1.7 `rgba(255,245,235,0.88)` max-width 300 with shadow. Cards block absolute `right:40px top:50% translateY(-50%)` gap 12, three 158×158 cards radius 28 `box-shadow: 0 8px 32px rgba(0,0,0,0.45)`.
+Reel card anatomy (all sizes): `border-radius 22px (mobile/tablet) / 28px (desktop)`, `CARD_IMAGES[i]` background-cover, gradient overlay (60% height), backdrop-blur layer (44% height, masked gradient), bottom content at 12px inset. Play cards = white circle (26/30px) + play-triangle SVG + "View Reel" (13/18px). Number card = "32" Viaoda Libre (28/36px) + "World Patrons".
+- **Slider dots** (bottom): `28px (mobile centered) / 40px (desktop left:60px)`. 4 dots, first `28px` wide active, rest `14px`, all `4px` tall radius 2. Active `rgba(255,255,255,0.9)`, inactive `rgba(255,255,255,0.35)`.
+- **Scroll cue** (desktop only, `bottom:36px` centered): "DESCEND" (`10px`, ls 0.22em, uppercase, `rgba(255,255,255,0.6)`) + ScrollChevron (34px circle, `1.5px border rgba(255,255,255,0.5)`, chevron SVG, `animation: bobUp 1.8s ease-in-out infinite`).
+## Scene 2 UI (z 46)
+Opacity = `clamp((scrollProgress - 0.68)/0.16, 0, 1)`. Centered column, margin-top `8vh (mobile)/12vh (desktop)`.
+- Heading (Viaoda Libre): "FORGE BEYOND THE REAL" — `clamp(28px,8vw,44px)` mobile / `clamp(38px,6.5vw,78px)` desktop, white, ls 0.03em, line-height 1.05, `text-shadow: 0 2px 20px rgba(0,0,0,0.4)`.
+- Subtext (Imprima): "Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known." — `14px`/`20px`, line-height 1.6, ls -0.01em, max-width `260`/`480`, `rgba(255,255,255,0.82)`.
+## Arc Card Slider Component
+9 cards (data below). Props: `cards[]`, `rotationOffset`, `isMobile`.
+Layout math — `cardSpacingDeg`: 12 (mob)/9 (desk); `centerIndex = floor(9/2) = 4`; `arcRadius`: 700/1100; `cardW`: 160/220; `cardH`: 175/230; `sliderH`: 260/360. `arcSweepDeg = (9-1)*10 = 80`. `rotationOffset = lerp(0, arcSweepDeg, clamp((scrollProgress - 0.70)/0.30, 0, 1))`.
+Per card: `baseDeg = (i - centerIndex)*cardSpacingDeg`; `deg = baseDeg - rotationOffset + (centerIndex*cardSpacingDeg)`; `rad = deg*PI/180`; `x = sin(rad)*arcRadius`; `y = arcRadius - cos(rad)*arcRadius`. Position absolutely at `bottom: -y + (140 mob/200 desk)px`, `left: calc(50% + x - halfW)`, `transform: rotate(deg)`, `transformOrigin: halfW arcRadius`.
+Appearance: rounded rect (`18px`/`26px`), background = `card.color` (pastel), `box-shadow: 0 8px 40px rgba(80,40,60,0.18)`. Top-right numbered circle (24px, `1.5px border rgba(80,50,60,0.3)`, text `rgba(80,50,60,0.6)`, 10px Imprima, zero-padded index). Bottom: title Viaoda Libre (`22px`/`30px`, `#3a2530`) + desc Imprima (`12px`/`15px`, `rgba(58,37,48,0.65)`).
+### Card Data (9 cards)
+```
+{ title: 'Hidden Realms',  desc: 'Luminous sanctuaries unseen by wandering eyes', color: '#f3cdd6' }
+{ title: 'Wild Solitudes', desc: 'Dissolve into untamed horizons and deep calm',  color: '#dcedc2' }
+{ title: 'Silent Havens',  desc: 'Remote escapes far beyond ordinary reach',      color: '#c3e3f4' }
+{ title: 'Bespoke Quests', desc: 'Journeys shaped around your vision and soul',   color: '#f0e4c0' }
+{ title: 'Vivid Drifts',   desc: 'Surreal passages through breathtaking terrain', color: '#dcd2f2' }
+{ title: 'Mystic Crests',  desc: 'Timeless ridgelines wrapped in cloud and myth', color: '#f3cdd6' }
+{ title: 'Deep Currents',  desc: 'Glowing depths alive with uncharted wonder',    color: '#c3e3f4' }
+{ title: 'Gilded Dusk',    desc: 'Amber horizons that stretch past all reason',   color: '#f0e4c0' }
+{ title: 'Glassy Tides',   desc: 'Calm waters holding skies of pure stillness',   color: '#dcedc2' }
+```
+## Entrance Sequence
+- t=100ms: `curtainsOpen` → true → 62% horizontal shift on each curtain with `1.8s cubic-bezier(0.16, 1, 0.3, 1)`.
+- t=600ms: `uiVisible` → true → Scene 1 UI fades/slides in (`opacity 0.9s ease, transform 0.9s ease`) with staggered delays: heading 0.3s, cards 0.55s, dots 0.8s, scroll cue 0.9s.
+- t=2200ms: `entranceDone` → true → curtain transition switches to `none` so parallax is instant.
+## Mouse Parallax (desktop)
+`requestAnimationFrame` loop lerps raw mouse position at `speed = 0.07`. Each layer offsets by its `MAG` in the reverse direction of the mouse, combined with the scroll-driven scale/translate. MAG: world=6, clouds=9, portal=7, curtainL=14, curtainR=14.
+## Hard Rules
+- The portal scale range `lerp(1, 7.5, ep)` and curtain entrance `-62%/+62%` are the signature motion — do not reduce them.
+- Keep all five Cloudinary stills and the three higgs.ai card images as **remote URLs**; they are large stable CDN media. Do not inline them, do not swap the host.
+- No external avatar hosts (`i.pravatar.cc`, `api.dicebear.com`) — this template uses no avatars.
+- Fonts are locked: Viaoda Libre (serif headings) + Imprima (body). Background `#0a0608`.
+- Scroll breakpoints are locked: scene1 fades by 0.22; portal fades 0.65→0.85; scene2 fades in 0.68→0.84; arc rotation drives 0.70→1.0.