weike-zhang/dsh-svg-motion

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

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

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

它能做出什么

一张 SVG,两种动效语言:

语言	效果	适合
组装 (assembly)	主体先出现,其余零件从四周飞入、落位时带一点回弹	logo 有可分离的部件
Logo (logo)	整个 logo 当作一个物体:双翼张开、核心点亮、小细节最后就位	紧凑品牌标,拆开会破坏轮廓

产出的文件:

• 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。

参数

参数	默认	说明
svg	—	SVG 代码或 .svg 文件绝对路径(必填)
intent	assembly	assembly 组装 / logo 整体落位
duration	3.0	时长(秒),0.5–8
size	1080	渲染尺寸(像素),240–1920
video	true	是否同时合成 MP4

环境要求

• 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