功能
Codex 皮肤动态预览：做一个还能读的五秒循环
皮肤视频不是 MV。最好的动态预览是一次慢呼吸：推进、雾漂移，和足够让面板可读的静止。
快速回答
CodexSkin 可以在浏览器里从静态皮肤构图导出五秒动态预览。工作室绘制缓慢推进、轻微雾漂移和稳定面板，再用 MediaRecorder 录成 WebM。运动要克制，第一帧要能读，不要闪烁或快切。
动态为什么能让皮肤传播
静态图展示皮肤长什么样，五秒循环展示它是什么感觉。社交平台上，动态比截图更容易让人停下。对视觉产品，这是有用的分发。
它也是更好的演示。缓慢推进按用户会注意到的顺序展示构图、面板和强调色。快切展示能量，却把产品藏起来。
导出刻意很短。五秒足够展示一次漂移、一次呼吸或一次光线变化，又不会变成没人看完的大文件，体积也小到可以直接发在聊天里。如果商店页需要更长素材，录两三条五秒循环再剪在一起，比导出一条长片更稳，也更容易重来。
浏览器导出怎么工作
工作室把选中的图片画进 canvas，套上暗度、面板和配色，再动画一个缓慢的缩放和位移。用浏览器的 MediaRecorder 录制并下载 WebM。图片不离开浏览器。
这是合成，不是生成式视频。不调用 AI 模型、不需要 API Key、不消耗积分。想要生成视频，用单独的图生视频模型；工作室预览是用来展示皮肤的。
五秒配方
面板不能动。文字一移动，观众就读不了，视频也显得不稳。动背景，保持界面静止。
- 0.0 到 5.0 秒：4% 推进，不切镜。
- 1–2% 的水平慢移，制造视差。
- 边缘轻微雾或渐变漂移，不要盖住文字。
- 面板和文字固定，只有背景动。
- 最后一帧和第一帧足够接近，能循环。
五秒动态预览
播放循环。只有背景在动，面板保持静止。
性能与文件大小
五秒 1280x800 的 WebM 通常能放进产品页，但仍比静态图重。用首帧做 poster，懒加载视频，不要带声音自动播放。
页面慢就保留静态图，把视频做成可选。静态图是产品，视频是演示。不要让页面依赖更重的素材。
无障碍规则
尊重减少动态偏好。用户选择减少动态时，显示静态图，不自动播放。避免闪烁、频闪和快速缩放。慢推进对大多数观众安全，闪烛光不是。
视频承载信息就加字幕或文字说明。这里的视频是装饰，静态图和 alt 文本承载意义。不要只靠动态解释皮肤。
工作室不做什么
浏览器导出不生成新场景、不驱动角色、不做 AI 视频。它合成你已经设计好的皮肤。这是优点：快、私密、免费、可预测。
想从静态图生成视频，用图生视频模型，并保持同样纪律：轻微运动、身份稳定、不要闪烁。皮肤预览和 AI 视频是不同产品，成本也不同。
把预览当成展示层，而不是兼容性承诺。它不证明任何引擎可用，也不替代安装后的真实截图；发布前仍要在目标平台跑一遍恢复流程。
FAQ
工作室会上传图片做视频吗？
不会。canvas、动画和录制都在浏览器里完成，图片不会发给 CodexSkin。
动态预览是什么格式？
浏览器通过 MediaRecorder 录 WebM。支持情况看浏览器，Chrome 和 Edge 最稳。不可用时工作室会明确报错。
视频多长？
默认五秒。五秒足够展示构图，又短到循环不烦。
消耗积分吗？
不消耗。动态预览是本地 canvas 录制，不调用 AI 模型，也不用生成积分。
能发 TikTok 或 Reels 吗？
可以，前提是素材权利允许。第一帧要能读，不要加水印盖住面板。
为什么视频和实时预览不一样？
canvas 导出是简化合成，使用同一张图和配色，但可能无法复现所有 CSS 效果。实时预览看准确度，视频用来分享。
来源与延伸阅读
下一步
试用免费工作室
每篇指南配一张真实图片都更好懂。打开工作室，载入预设，测试三个界面。
更多指南
在社交平台怎么用
大多数平台用第一帧做缩略图。让第一帧是能读的构图，不是模糊的转场。面板可见，强调色明显。第一帧又黑又空，用户就划过去了。
五秒循环适合 X、TikTok、Reels 和产品页。不要加水印盖住面板；需要署名就放文案或边缘。