拾光
HTML TO MP4 ENGINE · A CODE-MADE BRAND FILM

把想法,
变成下一步。

codefilm 把 HTML/CSS/SVG 写成 MP4。这支 32 秒品牌片的画面、声音、字幕全部由代码生成;没有剪辑软件,没有素材库,没有视频模型。

查看源码 ↗
拾光 · 32s · 1920×1080 · 30fps
32s时长
960逐帧渲染
1个 HTML 文件
0素材库 / 视频模型
The story

散落的想法,值得被收成一束光。

拾光是一个虚构的 AI 工作台:把便签、聊天和文档里的碎片,连成一份能执行的计划。这支片子用同一个隐喻讲它——从散落,到清晰。

01

一百个想法

开场是 30 张漂浮的便签,它们不是贴图,是 DOM;每一张的位移、旋转和透明度都是时间的函数。

02

收成一束光

便签向中心收拢,变成一条竖线,再长成一个标记。没有转场插件,只有位置和缩放的插值。

03

从散落到清晰

左侧的混乱与右侧的计划同屏对照。最后 5 秒,所有声音一起收束到一句品牌主张。

The method

不是剪辑,是代码。

codefilm 是一个 HTML to MP4 引擎,也是一个可移植的 agent skill:给它一条参考视频或一个主题,它先判断能不能用代码重建,再逐帧验证,不把“看起来像”当成“做对了”。

01 / ROUTE

先判断

平面动效、UI、字、图表 → 代码。真人、实拍、复杂 3D → 生成或剪辑。不承诺做不到的事。

02 / ANALYZE

量出来

切点、镜头长度、静止比、运动强度、调色板、语气。形容词全部换成数字。

03 / BUILD

写成代码

一个 HTML,一个 render(t)。没有 CSS 动画、没有随机数、没有墙钟时间。

04 / VERIFY

逐帧对

并排帧差、确定性、循环缝、节奏与音频 oracle。通过才交付。

Open source

整套引擎,MIT。

codefilm 是一个 HTML to MP4 引擎与 agent skill:脚本、模板、动效参考、质检门,以及这支片子的全部源码,都在一个仓库里。你可以把它装进 Claude Code、Codex 或任何能读文件的 agent。

借鉴的 34 个项目、许可证与具体借鉴点,全部列在 ATTRIBUTIONS.md。