[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11106":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":15,"starSnapshotCount":15,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},11106,"phantom-motion","pixelxzen\u002Fphantom-motion","pixelxzen","Phantom-Motion is an incredibly powerful, epic interactive dynamic visual storytelling generator. Its capabilities are limited only by the bounds of your imagination! 它是一个极其硬核的史诗级交互式动态视觉叙事生成器。它的实力只取决于你的想象力高低！","",null,"HTML",173,23,115,0,1,3,9,4.14,"Apache License 2.0",false,"main",true,[25,26,27],"gsp","html","python","2026-06-12 02:02:29","\u003Cdiv align=\"center\">\n  \u003Cimg src=\".\u002Flogo.svg\" width=\"100%\" alt=\"Phantom Motion Logo\">\n  \n  \u003Ch3>驭无形之码，导有形之境 (Code-Defined Media Engine)\u003C\u002Fh3>\n\n  \u003Cp>\n    \u003Cb>Phantom Motion\u003C\u002Fb> 是一个极其硬核的交互式动态视觉叙事生成器。\u003Cbr>\n    它不仅仅是生成代码，而是融合了\u003Cb>好莱坞电影级 GSAP 运镜\u003C\u002Fb>、\u003Cb>GPGPU 百万物理粒子\u003C\u002Fb>、\u003Cb>KaTeX 顶级数学渲染\u003C\u002Fb>以及\u003Cb>东方水墨与八卦哲学演算\u003C\u002Fb>的次世代 HTML5\u002FWebGL 动画引擎。配合 Hyperframes 与无头浏览器，它可以将 AI 生成的纯文本剧本，毫无卡顿地压制为 \u003Cb>60FPS、4K 画质、音画微秒级同步的商业级 MP4 大片\u003C\u002Fb>。\n  \u003C\u002Fp>\n\n  \u003Cp>\n    \u003Ca href=\".\u002FREADME.md\">🇨🇳 简体中文\u003C\u002Fa> | \u003Ca href=\".\u002FREADME_EN.md\">🇺🇸 English Version\u003C\u002Fa>\n  \u003C\u002Fp>\n\n  \u003Cp>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVersion-10.0.0-8A64B7.svg?style=for-the-badge\" alt=\"Version\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Apache_2.0-success.svg?style=for-the-badge\" alt=\"License\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAI_Agent-Claude_Code_\u002F_Gemini-blue.svg?style=for-the-badge\" alt=\"AI Agent\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FStack-Three.js_|_GSAP-black.svg?style=for-the-badge\" alt=\"Stack\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FStack-D3.js_|_SVG-orange.svg?style=for-the-badge\" alt=\"Stack\">\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\".\u002Fassets\u002Fphantom-motion-poster-v2.jpg\" width=\"100%\" alt=\"Phantom Motion Poster\">\n\u003C\u002Fdiv>\n\n---\n\n## 🌟 为什么它能降维打击传统影视工业？\n\n市面上的代码动画往往是“生硬的元素平移”和“机器感极强的旁白”。**Phantom Motion** 的诞生是为了终结这一切，我们将导演的克制与图形学的极致结合到了 AI 智能体中：\n\n- **🎙️ Audio-First (音频优先) 引擎**：先生成声音，再画画面。利用 TTS 获取绝对时间轴，实现 GSAP `Duck & Swell`（BGM 随人声自动避让烘托），做到微秒级的音画同步。支持 Gemini 3.1 Flash TTS 最新 API 架构。\n- **🎥 剧本驱动的电影级 Camera Rig**：严禁摄像机乱飞！内置四大经典运镜（静态悬浮、深渊拉近、史诗环绕、焦点拉扯）。大模型根据剧本情感，通过 GSAP 轨道车替身技术，精确调度 3D 机位。\n- **🏛️ 3D 非遗与全息引擎**：直接支持 GLTF\u002FGLB 外部高精 PBR 模型加载，并能一键切换至 `Hologram Mode`（发光网格透视），支持精准的 30FPS\u002F60FPS 物理级帧录制。\n- **📊 高级数据可视化引擎**：摒弃掉帧的传统图表库，采用 `D3.js + GSAP`，将真实数据映射为极具东方美学的高级平滑曲线（Spline），伴随旁白做动态生长动画。\n- **🏷️ SVGL 品牌库集成**：原生集成 SVGL 接口，支持只需提供知名品牌名称（如 GitHub, OpenAI），AI 即可自动下载并内联其高清矢量 SVG Logo。\n- **✨ AetherViz 交互架构 (V9.0)**：全新引入混合坐标系统与玻璃拟态控制面板，支持将静态展示无缝切换为具有 3D 拖拽、参数调节的交互式实验室模式。\n- **📚 Monocle 旗舰级版式引擎 (V10.0)**：**[全新发布]** 深度融合《Monocle》杂志人文美学，内置 30+ 套非对称网格、Playfair 衬线字体组合与旗舰级视觉叙事模板。\n- **🏷️ 1500+ SVGL 品牌资产 (V10.0)**：原生集成全球最大的开源 SVG Logo 库，支持 1500+ 知名品牌 Logo（如 GitHub, OpenAI, Tesla）的一键调用与 3D 全息渲染。\n- **✨ WYSIWYG 交互套件 (Phantom Edit)**：**[核心卖点]** 每一套 Phantom Deck 模板都原生支持“所见即所得”编辑。用户只需**双击任意文本**即可立即修改内容，且系统会根据当前模板风格提供差异化的视觉反馈（如发光边框、像素高亮等），失焦后自动保存，完美兼容 GSAP 动画时间轴。\n\n- **🚫 0 版权法务风险**：所有核心特效全部由原生 WebGL、Three.js Shader 和 开源协议库构成，拒绝任何闭源付费插件，生成的 MP4 视频 100% 归创作者所有。\n\n---\n\n## 📂 仓库结构\n\n```text\nphantom-motion\u002F\n├── assets\u002F                 # 存放公共媒体资源（如打赏二维码、logo）\n├── references\u002F             # 核心组件库（Three.js片段、GSAP运镜、东方美学代码等）\n├── scripts\u002F                # 核心引擎脚本（TTS生成、BGM生成、HTML拼装等）\n├── tests\u002F                  \n│   └── xingji\u002F             # 《苍穹之轨：钱学森弹道》 完整动画示例与静态资源\n├── SKILL.md                # 核心智能体底层逻辑系统指令库 (System Prompt V10.0)\n├── logo.svg                # 动态 SVG 徽标\n├── README.md               # 中文文档\n└── README_EN.md            # 英文文档\n```\n\n---\n\n## 🚀 快速开始 (Quickstart)\n\nPhantom Motion 被设计为一个极其优雅的 CLI 智能体 Skill。它可以被挂载到目前主流的端侧或云端代码智能体中：\n\n1. **环境准备**\n   确保你安装了 Node.js 与 Python3，并在本项目下执行：\n   ```bash\n   npm install\n   pip install requests  # 或使用环境所需的其他基础包\n   ```\n\n2. **安装到智能体**\n   你可以将本仓库配置为以下 AI IDE 的核心 Skill 或 Workspace：\n   - **Claude Code**：直接将本目录作为一个独立的 Workspace 载入，或通过自定义 Skill 指令映射 `SKILL.md`。\n   - **Codex \u002F Openclaw \u002F Hermes \u002F Antigravity**：将 `SKILL.md` 的内容注册到你的自定义 Agent Prompt 库中，并允许智能体读取 `scripts\u002F` 与 `references\u002F` 目录。\n\n3. **唤醒智能体**\n   在你的终端或对话框中输入触发词：\n   > *\"帮我生成一个关于量子力学的代码动画\"*\n\n4. **全自动挂机生成**\n   AI 会自动拆分剧本 -> 查阅资料 -> 生成 TTS 与 BGM -> 组装 HTML 骨架 -> 挂载特效代码 -> 最终合成。\n\n---\n\n## ⚠️ 顶级大模型与 API Key 脱敏警告\n\n> **【模型推荐】** \n> 好的代码动画，是需要反复打磨才能出精品效果的！别妄想一句话就能拿到精品动画，简单一句话得到的大多是普通粗稿级动画作品。精品级作品需要你与 AI 进行反复的分镜推敲和代码迭代。\n> 因此，**强烈推荐使用顶级“御三家”模型**：`Claude Opus 4.7+`、`Gemini 3.1+ Pro`、`ChatGPT 5.5+`，只有它们的超大上下文和代码逻辑，才能驾驭这种级别的视觉叙事。\n\n> **【API Key 声明】**\n> 本项目依赖的音频管线（Gemini 3.1 Flash TTS、MiniMax Music API）需要用户配置自己的 API Key 和 Group ID 环境变量。\n> **请绝对不要将包含你个人 API Key 的代码同步到 GitHub 等公开仓库中！** 生成演示文件后，请务必进行脱敏处理！\n\n---\n\n\n## ⚙️ 环境配置 (Environment Variables)\n\n由于引擎深度集成了 AI 语音与音乐生成能力，在开始渲染或组装前，请确保在系统环境变量中（或 `.env` 文件）配置以下 API 密钥：\n\n```bash\n# Gemini 3.1 Flash TTS 语音生成 (必需)\nexport GEMINI_API_KEY=\"your_gemini_api_key_here\"\n\n# MiniMax 音乐生成 API (可选，用于高级动态 BGM)\nexport MINIMAX_API_KEY=\"your_minimax_api_key_here\"\nexport MINIMAX_GROUP_ID=\"your_minimax_group_id_here\"\n```\n\n> ⚠️ **安全警告**：请绝对不要将包含你个人 API Key 或真实姓名的代码、日志同步到 GitHub 等公开仓库中！提交 PR 前请务必进行脱敏处理！\n\n## 🎬 Showcase: 终极性能阅兵剧本库 (Masterpiece Prompts)\n\n如果你想体验 V10.0 引擎的极致威力，请直接将以下 5 个 **“导演级提示词”** 复制给你的智能体：\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>♟️ 剧本 01：《神之一手》（30秒 · 极速高燃）\u003C\u002Fb>\u003C\u002Fsummary>\n\n> \"制作一段 30 秒的高燃短片，还原 2016 年 AlphaGo 对战李世石的第四局‘神之一手（第78手）’。\n> **[0-3秒] 巨幕片头**：纯黑背景，极具压迫感的白色巨幕大字「 神 之一 手 」伴随重低音砸下，背景有微弱的代码乱码闪烁。\n> **[3-27秒] 阵法与落子**：联网检索该局真实的棋盘坐标数据。调用【SVG 东方棋局引擎】，在极简的木纹紫苏色网格上，复现第 78 手‘白棋挖’的绝对震撼瞬间。不要多余的 3D 旋转，镜头保持【上帝视角绝对俯视 (Static)】。黑白棋子随着旁白节奏，带有极强回弹阻尼感（back.out）砸向棋盘。\n> **旁白要求**：调用 Gemini Charon (低沉男声)。每行字幕不超过 15 字。'人类智慧的孤城... 在硅基算力前摇摇欲坠... 直到那不可思议的第七十八手。' 伴随落子，BGM 瞬间爆发。\n> **[最后 3 秒] 极简片尾**：棋盘极度线性淡出至黑幕，中心浮现 Phantom Motion LOGO。\"\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>🏛️ 剧本 02：《榫卯：木的灵魂》（45秒 · 内部透视重构）\u003C\u002Fb>\u003C\u002Fsummary>\n\n> \"制作 45 秒关于中国古建筑非遗技艺‘斗拱榫卯’的 3D 解构动画。\n> **[0-3秒] 巨幕片头**：紫苏灰背景，大字「 榫 卯 」配合木材撞击的清脆音效浮现。\n> **[3-25秒] 质感与智慧**：联网考证‘燕尾榫’的真实力学互锁原理。调用【3D 器物引擎 (GLTFLoader)】，导入极具真实 PBR 木纹质感的榫卯结构。镜头执行【史诗环绕 (Orbit)】，展示严丝合缝的外观。\n> **[25-42秒] 降维透视**：旁白说到'不见一钉一铆，却能抗住千年风云'时，木头 PBR 材质瞬间被剥离，切换为【Hologram Mode (全息发光紫苏网格)】。镜头执行【焦点拉近 (Push-in)】，透视内部极其精妙的受力结构，两个木块在空中拆解又严丝合缝地拼装。\n> **旁白要求**：调用 Gemini Erinome (知性女声)。每行字幕严格限 15 字内。\n> **[最后 3 秒] 极简片尾**：全息网格在空中消散为黑幕。\"\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>📈 剧本 03：《茶叶与帝国》（60秒 · 宏大数据叙事）\u003C\u002Fb>\u003C\u002Fsummary>\n\n> \"制作 60 秒的丝绸之路茶叶贸易史数据动画大片。\n> **[0-3秒] 巨幕片头**：巨幕大字「 丝 茶 之 路 」，水墨粒子从字体边缘散开。\n> **[3-20秒] 历史画卷**：调用【3D 卷轴顶点着色器】，在屏幕中央极其平滑地展开一幅长卷。画卷上使用【飞白水墨 Shader】缓慢渗透出唐宋时代的商贸地图。\n> **[20-57秒] 数据洪流**：联网检索 17-19 世纪中国茶叶出口欧洲的真实飙升数据。绝对禁止使用 ECharts！必须调用【D3.js + GSAP 图表引擎】，在 3D 卷轴的上方，画出一条极具东方美学的紫苏色平滑折线（Spline）。折线伴随激昂的交响乐不断攀升，下方带有半透明的发光面积阴影。\n> **旁白要求**：男声。'一片树叶... 跨越了重洋万里... 左右了帝国的兴衰。' 字幕排版保持极简。\n> **[最后 3 秒] 极简片尾**：折线攀升至顶点化作高光，随后一切线性淡出至黑幕。\"\n\u003C\u002Fdetails>\n\n\u003Cdetails open>\n\u003Csummary>\u003Cb>🪐 剧本 04：《苍穹之轨：钱学森弹道》（90秒 · 极致硬核科幻）\u003C\u002Fb>\u003C\u002Fsummary>\n\n\u003Cdiv align=\"center\">\n  \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8c353bea-9410-4e16-80dc-2528f7ce583d\" width=\"100%\" poster=\".\u002Ftests\u002Fxingji\u002Fxingji-cover.png\" controls muted loop playsinline autoplay>\n  \u003C\u002Fvideo>\n  \u003Cbr>\n  \u003Cp>\u003Ci>（官方 1080P 横屏渲染实测，感受 GPGPU 粒子与 Charon 音色的史诗质感）\u003C\u002Fi>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n> \"调用最大科学算力，制作 90 秒的钱学森弹道（Boost-glide）硬核科普。\n> **[0-3秒] 巨幕片头**：纯黑背景，大字「 苍 穹 之 轨 」。\n> **[3-30秒] 历史档案**：调用【档案抓取 Skill】，从维基百科精准下载钱学森先生的真实无版权高清照片。照片以 3D 玻璃全息卡片悬浮在宇宙中。旁白介绍其在大气层边缘滑翔突防的绝顶构想。\n> **[30-87秒] 弹道演算**：触发【GSAP Flip】，全息照片丝滑缩小退至左下角。画面中央浮现高精度的 PBR 全息网格地球。**强制要求**：依据物理学真实原理，利用样条曲线（CatmullRom Curve）绘制一条在地球大气层边缘如'打水漂'般起伏波动的红色发光轨迹，绝不能用普通的抛物线敷衍！镜头紧紧跟随轨迹飞行（Flyby）。\n> **旁白要求**：女声。'在大气层边缘... 像打水漂一样滑翔... 让一切防御系统形同虚设。' 音频必须做低频增强。\n> **[最后 3 秒] 极简片尾**：导弹命中光芒闪烁后，黑幕淡出。\"\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>☯️ 剧本 05：《大统一：量子与道》（120秒 · 终极视觉圣杯）\u003C\u002Fb>\u003C\u002Fsummary>\n\n> \"制作 120 秒的顶级哲学与物理大片，探讨量子力学与东方《易经》的终极共鸣。\n> **[0-3秒] 巨幕片头**：大字「 万 物 一 理 」，伴随一声深沉的古琴。\n> **[3-40秒] 粒子的狂舞**：触发【100万 GPGPU 粒子引擎】，满屏的微观发光粒子在卷曲噪声（Curl Noise）中疯狂涌动，展现量子世界的混沌与测不准原理。中心利用【KaTeX 公式引擎】浮现薛定谔波动方程。\n> **[40-80秒] 阵法显现**：旁白：'西方物理的尽头... 东方哲学早已在那里等候。' 触发物理场形变，一百万颗粒子瞬间收束，在中心聚集成一个完美的 3D 太极图。\n> **[80-117秒] 易经推演**：太极图中，调用【易经 SVG 阵列生成器】，先天八卦的阴阳爻随着重低音，带有极强阻尼感一层层分裂、弹出。整个八卦阵与背后的星系粒子共同开启恢弘的自转。\n> **旁白要求**：男低音（Gravelly），字数极简，带有史诗般的呼吸停顿。'从量子纠缠的混沌... 到阴阳两仪的秩序... 宇宙，本是同源。'\n> **[最后 3 秒] 极简片尾**：所有粒子如星辰般寂灭，归于黑幕。触发双态隔离代码：渲染成 MP4 停止，网页预览则无限循环。\"\n\u003C\u002Fdetails>\n\n---\n\n## 📈 Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=Pixelxzen\u002Fphantom-motion&type=Date)](https:\u002F\u002Fstar-history.com\u002F#Pixelxzen\u002Fphantom-motion&Date)\n\n---\n\n## 🤝 鸣谢与版权声明\n\n本项目由 **紫苏子ACG** 原创开发。\n- **Phantom Motion 核心代码**：采用 [Apache-2.0 License](.\u002FLICENSE) 开源协议。\n- **字体与数学引擎**：基于 MIT 协议的 [KaTeX](https:\u002F\u002Fgithub.com\u002FKaTeX\u002FKaTeX) 与 [SplitType](https:\u002F\u002Fgithub.com\u002FlukePeeters\u002FSplitType)。\n- **图形与动画**：基于 [Three.js](https:\u002F\u002Fthreejs.org\u002F) 与 [GSAP](https:\u002F\u002Fgreensock.com\u002F)，部分数据图表渲染由 [D3.js](https:\u002F\u002Fd3js.org\u002F) 提供支持。\n- **无头压制渲染引擎**：致谢 [Hyperframes](https:\u002F\u002Fgithub.com\u002Fhyperframes\u002Fhyperframes)（其技术栈版权归原作者所有）。\n\n工具生成的最终 MP4 视频产物版权归使用者所有。\n\n---\n\n## ☕ 支持与交流\n\n如果你喜欢这个项目，欢迎关注我的社媒，或者请我喝杯咖啡！\n\n\u003Cdiv align=\"center\">\n  \u003Cp>\n    \u003Ca href=\"https:\u002F\u002Fwww.xiaohongshu.com\u002Fuser\u002Fprofile\u002F5b80023bd72b6300011273e6\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FXiaohongshu-小红书-E1306C?style=flat-square&logo=xiaohongshu&logoColor=white\" alt=\"Xiaohongshu\">\u003C\u002Fa>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWeChat_Official-紫苏子ACG-07C160?style=flat-square&logo=wechat&logoColor=white\" alt=\"WeChat Official\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWeChat_Video-紫苏子ACG-07C160?style=flat-square&logo=wechat&logoColor=white\" alt=\"WeChat Video\">\n    \u003Ca href=\"https:\u002F\u002Fx.com\u002FPixelxzen\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FX-(Twitter)-000000?style=flat-square&logo=x&logoColor=white\" alt=\"X (Twitter)\">\u003C\u002Fa>\n  \u003C\u002Fp>\n  \n  \u003Cp>\u003Cb>扫码赞赏，支持开源创作：\u003C\u002Fb>\u003C\u002Fp>\n  \u003Cimg src=\".\u002Fassets\u002Fsponsor-qrcode.png\" width=\"300\" alt=\"赞赏码\">\n\u003C\u002Fdiv>\n","Phantom Motion 是一个交互式动态视觉叙事生成器，能够将文本剧本转化为高质量的动画视频。其核心功能包括好莱坞电影级GSAP运镜、GPGPU百万物理粒子渲染、KaTeX数学公式渲染以及东方水墨与八卦哲学元素的融合。项目采用HTML5\u002FWebGL技术栈，并结合了D3.js和Three.js等库来实现高级数据可视化和3D模型支持。此外，它还具备强大的TTS音频同步能力和丰富的品牌资产库。适合用于制作商业演示、教育内容、创意短片等场景，尤其适用于需要高质量视觉表现且注重音画同步的应用。",2,"2026-06-11 03:31:12","CREATED_QUERY"]