weike-zhang/dsh-svg-motion

dsh-svg-motion

在 DeepSeek Harness 里,把一个 SVG logo 变成一段动效视频。

给工具一个 SVG(直接贴代码,或给文件路径),它会在浏览器里逐帧渲染成透明背景动画,再用 ffmpeg 合成 MP4。不需要设计软件,也不用会视频剪辑。

上面是用境间 logo 生成的 6 个状态动效:待机、悬停、加载、成功、失败、穿越,每个状态一种动效语言。产物是透明背景 30fps 序列帧 + MP4,可直接放进网页、演示或剪辑。

它能做出什么

一张 SVG,两种动效语言:

产出的文件:

• animation.mp4(H.264 视频)
• poster.png(最后一帧静态图)
• frames/frame_%04d.png(透明 PNG 序列,可再合成或转 GIF)

动效展示

境间 logo 的完整状态动效包见 examples/jingjian-logo-states.html,浏览器打开就能点:待机、悬停、点击、加载、忙碌、成功、失败、聚焦、禁用、通知、抉择、穿越,共 12 个状态。

境间 logo 为「境间」项目自有品牌标识,仅用作本插件的演示素材。

快速开始

在 dsh 会话里,对模型说:

把这个 logo 做成组装动效视频:<svg>…</svg>

或者指向一个文件:

把 /work/logo.svg 做成 4 秒的 logo 风格动效

工具会返回视频、静态图、序列帧的路径。

安装

插件通过 profile patch 注册。在已运行的 Web 或 headless profile 里添加:

dsh plugin --profile web add github:weike-zhang/dsh-svg-motion

发布到 npm 后命令会变成 dsh plugin --profile web add @linxin666/dsh-svg-motion。也可以直接把本仓库的 cordis.patch.yml 指进 profile 的 bundle patch。

参数

环境要求

• Node.js ≥ 22
• Playwright 管理的 Chromium(npx playwright install chromium)
• ffmpeg(仅合成视频时需要,已在 PATH 上)

开发

npm install
npm run build     # tsc → lib/
npm test          # 单元测试

端到端验证(走真实 harness 工具管线,不需要 LLM key,驱动直接调用 ctx.tools.execute),在仓库根目录执行:

npm install
npm install @deepseek-ai/dsh@0.1.0-rc.6
./node_modules/.bin/dsh --profile headless --patch ./e2e.patch.yml "ignored"

驱动会用 intent: logo 渲染境间 logo,打印产物路径;改 src/e2e-driver.ts 里的 arguments.intent 可以切换成组装风格。

许可

Apache-2.0