Add reusable map and device chat templates

app/app.js

@@ -337,5 +337,9 @@ search.addEventListener("input", () => renderList(search.value));
 state.catalog = await loadCatalog();
 document.querySelector("#template-count").textContent = state.catalog.templates.filter((template) => template.status === "ready").length;
 renderList();
-const initialTemplate = state.catalog.templates.find((template) => template.status === "ready" && template.preview) || state.catalog.templates[0];
+const requestedTemplateId = new URLSearchParams(location.search).get("template");
+const requestedTemplate = requestedTemplateId
+  ? state.catalog.templates.find((template) => template.id === requestedTemplateId && template.status === "ready")
+  : null;
+const initialTemplate = requestedTemplate || state.catalog.templates.find((template) => template.status === "ready" && template.preview) || state.catalog.templates[0];
 if (initialTemplate) selectTemplate(initialTemplate);

catalog.json

@@ -461,6 +461,112 @@
       "defaultFormat": "mp4",
       "preview": "/renders/cause-chain/sample.webm",
       "status": "ready"
+    },
+    {
+      "id": "globe-route-journey",
+      "name": "动态地球航线",
+      "description": "正射投影的扁平动态地球沿经纬度路线转动，航线逐段生长、节点依次点亮，并可显示沿线移动的载具，适合历史航行、国际业务、物流和传播路径。",
+      "path": "templates/globe-route-journey",
+      "category": "地图与空间",
+      "tags": [
+        "地球",
+        "地图",
+        "航线",
+        "经纬度",
+        "路径"
+      ],
+      "duration": 10,
+      "size": "1080×1920",
+      "formats": [
+        "mp4"
+      ],
+      "defaultFormat": "mp4",
+      "preview": "/renders/globe-route-journey/sample.mp4",
+      "status": "ready"
+    },
+    {
+      "id": "mac-terminal-typewriter",
+      "name": "Mac 终端打字机",
+      "description": "macOS 深色终端窗口依次输入命令并显示执行反馈，适合开发工具、AI 工作流与自动化流程演示。",
+      "path": "templates/mac-terminal-typewriter",
+      "category": "界面与设备",
+      "tags": [
+        "Mac",
+        "终端",
+        "打字机",
+        "开发工具"
+      ],
+      "duration": 8,
+      "size": "1920×1080",
+      "formats": [
+        "mp4"
+      ],
+      "defaultFormat": "mp4",
+      "preview": "/renders/mac-terminal-typewriter/sample.mp4",
+      "status": "ready"
+    },
+    {
+      "id": "iphone-device-frame",
+      "name": "深银色 iPhone 外壳",
+      "description": "窄银边、黑色内沿和灵动岛组成的现代 iPhone 产品演示容器，适合承载 App、网页和数据看板。",
+      "path": "templates/iphone-device-frame",
+      "category": "界面与设备",
+      "tags": [
+        "iPhone",
+        "手机外壳",
+        "产品演示",
+        "设备框"
+      ],
+      "duration": 8,
+      "size": "1920×1080",
+      "formats": [
+        "mp4"
+      ],
+      "defaultFormat": "mp4",
+      "preview": "/renders/iphone-device-frame/sample.mp4",
+      "status": "ready"
+    },
+    {
+      "id": "wechat-desktop-chat",
+      "name": "微信对话 · 电脑版",
+      "description": "真实桌面微信结构的宽聊天区、大输入编辑器和工具栏，支持文本、图片面板与语音消息。",
+      "path": "templates/wechat-desktop-chat",
+      "category": "界面与设备",
+      "tags": [
+        "微信",
+        "电脑版",
+        "聊天",
+        "界面动画"
+      ],
+      "duration": 8,
+      "size": "1920×1080",
+      "formats": [
+        "mp4"
+      ],
+      "defaultFormat": "mp4",
+      "preview": "/renders/wechat-desktop-chat/sample.mp4",
+      "status": "ready"
+    },
+    {
+      "id": "wechat-mobile-chat",
+      "name": "微信对话 · 手机版",
+      "description": "1080×1920 手机微信对话，支持图片、长文本、语音、真实输入栏和自动滚动。",
+      "path": "templates/wechat-mobile-chat",
+      "category": "界面与设备",
+      "tags": [
+        "微信",
+        "手机版",
+        "聊天",
+        "竖屏"
+      ],
+      "duration": 8,
+      "size": "1080×1920",
+      "formats": [
+        "mp4"
+      ],
+      "defaultFormat": "mp4",
+      "preview": "/renders/wechat-mobile-chat/sample.mp4",
+      "status": "ready"
     }
   ]
 }

scripts/render.mjs

@@ -14,5 +14,13 @@ const renderValues = schema.some((item) => item.id === "exportMode") ? { ...valu
 const outputDir = path.join(root, "renders", templateId);
 await fs.mkdir(outputDir, { recursive: true });
 const output = path.join(outputDir, `${path.basename(presetPath, ".json")}.mp4`);
-const result = spawnSync("npx", ["--yes", "hyperframes@0.6.115", "render", "--strict-variables", "--variables", JSON.stringify(renderValues), "--output", output], { cwd: template.absolutePath, stdio: "inherit" });
-process.exit(result.status || 0);
+const renderVariablesPath = path.join(outputDir, `.${path.basename(presetPath, ".json")}.render-vars.json`);
+await fs.writeFile(renderVariablesPath, JSON.stringify(renderValues), "utf8");
+const renderArgs = ["--yes", "hyperframes@0.6.115", "render", "--workers", "3", "--strict-variables", "--variables-file", renderVariablesPath, "--output", output];
+const npxCli = path.join(path.dirname(process.execPath), "node_modules", "npm", "bin", "npx-cli.js");
+const command = process.platform === "win32" ? process.execPath : "npx";
+const commandArgs = process.platform === "win32" ? [npxCli, ...renderArgs] : renderArgs;
+const result = spawnSync(command, commandArgs, { cwd: template.absolutePath, stdio: "inherit" });
+await fs.rm(renderVariablesPath, { force: true });
+if (result.error) throw result.error;
+process.exit(result.status ?? 1);

templates/globe-route-journey/design.md

@@ -0,0 +1,35 @@
+# 动态地球航线视觉规范
+
+## 用途
+
+用于历史航行、国际业务、物流路径、传播扩散、迁徙路线和全球事件等空间叙事。核心镜头语言是“地球转动 → 航线生长 → 节点点亮 → 载具沿线移动”。
+
+## 视觉方向
+
+- 采用正射投影制造扁平 2D 地球观感，不使用写实卫星贴图。
+- 地图是主角，标题与说明只占顶部安全区。
+- 航线使用高饱和暖色，海洋与背景保持冷色。
+- 国界线低对比，避免与航线争夺注意力。
+- 标签只显示最近经过的节点，防止全球路线出现文字拥挤。
+
+## 默认配色
+
+- Background: `#071321`
+- Foreground: `#F4EFE7`
+- Ocean: `#49A8E3`
+- Land: `#BFE98F`
+- Route: `#FF655E`
+
+## 变量约束
+
+- `routeJson` 必须是至少两个节点的 JSON 数组。
+- 每个节点包含 `name`、`lon`、`lat`。
+- 经度范围建议为 `-180` 到 `180`，纬度范围建议为 `-90` 到 `90`。
+- 路线越长，节点建议越少；10 秒模板推荐 4–9 个节点。
+
+## 禁用项
+
+- 不加入真实卫星纹理和复杂地形阴影。
+- 不同时显示所有地点标签。
+- 不使用随机星空、随机航线或不可读帧的持续循环。
+- 不把具体历史人物、年代、配音写死在模板结构中。