网站 · 代码动画

doodle-cut

30 秒手绘风视频剪辑器动画,画面、配乐、音效全部用代码写出来

weilanx.works/doodle-cut
doodle-cut 封面
Now showing ✦
Platform · 平台
代码动画
Stack · 技术栈
Remotion · React · SVG · Node.js
Date · 日期
2026.09
Status · 状态
已上线

一个橙色小盒子在剪视频的 30 秒动画:拖素材、剪掉无聊片段、加转场时被自己绊倒、把抖动拉到最大、最后导出成功撒花。

每一个画面、角色动作、镜头运动、背景音乐和音效,全部是代码生成的。

怎么做到的

  • 画面:Remotion(React + SVG / CSS),完全由帧号驱动
  • 音乐和音效:一个约 400 行的 Node 脚本,用 Karplus-Strong 拨弦、三角波贝斯、噪声鼓点和混响合成尤克里里风格配乐和 8 种音效
  • 输出:1920×1080、30 fps、30 秒

核心思路

动画是帧号的纯函数。 组件只负责画出 getEditorState(frame)、getBuddy(frame)、getCamera(frame) 返回的内容,所以整段编排可以写单元测试。音乐是 120 BPM,一拍正好 15 帧,动作很容易踩在节拍上。