dsh-reel

DSH Reel Studio

从插件介绍，到一条宣传片与一张宣传图。

面向 DeepSeek Harness（DSH）插件的本地 Remotion 宣传素材工具。

从可编辑案例与截图出发，生成横屏视频、视频封面和竖版宣传图；另有 2026 campaign 管线：24 秒品牌片 + 3:4 海报 + 16:9 封面 + 1:1 方图。

[下载源码](https://github.com/Eileenes/dsh-reel/archive/refs/heads/main.zip) · [快速开始](#quick-start) · [观看 24 秒样片](docs/demo.mp4) · [查看安装海报](docs/install-poster.png) · [编辑案例](#cases) · [插件接入](#host-plugin)

---

能做什么

| 2026 campaign（v2） | 案例模板（v1） | 本地工作流 |

| --- | --- | --- |

| 24 秒、1920×1080、30fps 品牌宣传片 | 32.5 秒横屏视频模板（case JSON 驱动） | 全部素材在本机 Remotion / Chrome 内渲染 |

| 2160×2880 海报、1920×1080 封面、1080×1080 方图 | 2160×2880 宣传图 + 从视频导出的 16:9 封面 | CLI 分别导出视频、图片或全部产物 |

| 体素鲸鱼、DSH 插件市场真实界面、事件音效 | 七段结构、程序化 BGM、截图与合成界面 | --dry-run 先生成渲染参数，不启动渲染 |

两条管线并存：

• v2 campaign（新）：studio/src/v2/ 下的品牌片与海报系统，默认讲 dsh-reel-studio 自己的故事（在 DSH 里搜插件 → 安装 → 读仓库 → 写分镜 → 出片），画面使用暗色 DSH 插件市场 UI 与体素鲸鱼。海报/封面由 [design/](design/README.md) 的 HTML 模板生成。
• v1 案例模板：studio/src/PluginDemo.tsx + cases/*.json，用于把某个插件的资料套进固定 32.5 秒模板；仍需要人工适配部分镜头（见[编辑案例](#cases)）。

当前是可运行的示例项目，不是"给个仓库地址就自动出片"的成品。 宿主工具（reel_scan / reel_plan / reel_render）仍是脚手架能力；v2 campaign 目前是 dsh-reel 自己的品牌物料，参数化到任意插件是下一步路线。

新增案例（2026-11-08）：Sorenyeah home film · 38 秒。 第一条以网站为对象的片子，开场把用户自己的鲸鱼参考片（Soren_DeepSeek_whale.mp4）用本仓库的体素鲸鱼重做成 3D 1080p：终端打字 → 278 个体素拼出鲸鱼 → 跳到站点 App 图标上（图标下压、发光）→ 真实主页窗口从图标后面升起，镜头推进页面；之后接二进制名字 → 首页 / 音乐 / 作品的真实页面 → 四个项目 → 七首歌与三篇文章 → 联系方式 → 片尾。代码在 studio/src/sorenyeah/，素材在 studio/public/sorenyeah/，音乐是 make_music_v2.py 的 38 档（120 BPM、19 小节），音效由 studio/scripts/make_home_audio.py 生成（64 个事件）。方法、时间线与限制见 [案例拆解](docs/case-sorenyeah-home.md)；运行 npm run home:audio && npm run home:render 出片。

样片与素材

[观看 24 秒 campaign 片](docs/demo.mp4) · [3:4 安装海报](docs/install-poster.png) · [16:9 封面](docs/poster.png) · [1:1 方图](docs/promo-1x1.png) · [关键帧](docs/stills/)

新版 campaign 讲的是 dsh-reel-studio 自己：在 DSH 插件市场里搜到它、安装、让它把一个插件仓库读成一条片子和一张图。片中市场界面按真实 dshmarket / DSH 插件页结构重建，文案逐字取自已核对文案；不包含伪造的下载量、星数或"官方认证"。

v1 案例模板的旧示例介绍的是 [omdsh-dev/DSH-better-sidebar](https://github.com/omdsh-dev/DSH-better-sidebar)（MIT 许可，截图来自该仓库，任务/侧边对话面板为合成界面）；案例里的下载量与 Stars 是静态示例数据。

V0.1 真机界面宣传片管线（Better Sidebar）

2026-11 新增：以目标插件的真实界面为主、30 秒以内的宣传片方法。首个案例是 Better Sidebar（MIT，截图来自其官方仓库）。

• [28 秒成片](docs/better-sidebar-v0.1.mp4)（1080p / 30fps / 带声音）
• [方法总结](docs/promo-method-v0.1.md)：读插件 → 定分镜 → 收干净素材 → 侧栏壳 → 鲸鱼运动 → 声音 → QA
• [案例拆解](docs/case-better-sidebar-v0.1.md)：功能表、28s 时间线、素材来源、已知限制
• [Onetake comp 参考](promo/comp-better-sidebar.html)：实际分镜/动画代码（依赖 Onetake 运行时，不随仓库分发）

按插件名出片（标准流程）

以后只给插件名/仓库，就按同一套流程出片（28s / 1080p / 30fps，结构和参考片一致）：

• [标准流程 SOP](docs/v01-film-sop.md)：收数据 → 写案例 JSON → 一条命令生成 comp/素材/音效 → Onetake 渲染 → 混流 → QA
• 生成器：[tools/v01-film/make-v01-film.mjs](tools/v01-film/make-v01-film.mjs)（模板 [comp-template.html](tools/v01-film/comp-template.html)）
• 案例：[cases/v01/dsh-guizang-design.json](cases/v01/dsh-guizang-design.json)；成片按 SOP 在本地生成（studio/out/promo--intro-1080.mp4，不随仓库分发）

安装 / 使用海报

3:4 · 2160×2880：插件市场搜索、命令行安装、三步使用、Star 入口和微信群二维码。源文件在 [design/install-poster.html](design/install-poster.html)。

> 这条管线目前是手动分镜 + 外部 Onetake 渲染：素材、tab 坐标、音频事件需要按目标插件逐个调整；不是“给仓库地址就自动出片”。

Onetake 许可说明（重要）

• 本仓库里的 Onetake comp / 工作流，仅用于开发和制作 DSH 插件相关的宣传素材；
• Onetake 本身不是商用授权：它是 PolyForm Noncommercial 许可，只能用于非商业用途；
• 任何人如果要把 Onetake 或其渲染产物用于商业用途，需要自行向 Onetake 作者取得另行商业授权；
• 本仓库不包含、也不分发 Onetake 运行时；商用前请同时确认 Onetake、截图、字体、音乐等全部素材的许可。

交流群

对 dsh-reel-studio 感兴趣、想反馈问题或一起做插件宣传片，可以扫码进群：

群聊：dsh-deel · 二维码 7 天内有效（11 月 11 日前）

快速开始

1. 准备环境并安装渲染依赖

需要 Node.js 22+、pnpm 和 Chrome／Chromium。下面的命令在仓库的 studio/ 中安装 Remotion 依赖；单独渲染示例无需先接入 DSH。

git clone https://github.com/Eileenes/dsh-reel.git
cd dsh-reel/studio
pnpm install
cd ..

CLI 会检查 macOS、Windows 与 Linux 的常见 Chrome 路径。浏览器不在这些位置时，可设置 CHROME_PATH；以下是 macOS shell 示例：

export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

未找到浏览器时，CLI 会使用 Remotion 的默认浏览器处理方式。首次安装依赖或获取浏览器可能需要联网。

2. 渲染 2026 campaign（v2，推荐先看这个）

# 24 秒品牌片（1920×1080 / 30fps）
cd studio
node_modules/.bin/remotion render src/v2/entry.tsx ReelPromo out/reel-promo.mp4 \
  --codec h264 --crf 16 --concurrency=1
cd ..

# 海报 / 封面 / 方图（HTML 模板 → headless Chrome → docs/）
bash design/build.sh

> 本机 macOS 上 3D 场景走 ANGLE/Metal；remotion.config.ts 已设置 setChromiumOpenGlRenderer('angle')。