Template centerUpdated Nov 2, 2026

桌面口播 · Mac 窗口动效

Innovation

浅色 macOS 桌面风格的真人口播模板:讲者出现在 Mac 摄像头窗口里,每句话按句型自动切换版式与动效——翻牌数字、弹出窗口、印章、荧光笔划重点、流程图、删除线、网格转场等,每种动效配有对应音效;判断句、数据句、风险句等各有专属布局。文字、数据、配色和节奏全部由参数驱动,替换

Share
Full template

A cohesive set of composable animation and motion components for creating an entire video around your content.

PREVIEWdefault1440×1080 · 30fps
Free template

Free download. Open source. Make it yours.

Free to download, with no top-up required. Reuse and customize it: replace text, images and audio, and adjust visuals and animation.

  • Free assets and musicImage, video and sticker search plus 1,000+ music tracks your AI assistant can match.Asset guide →
  • Optional generationImage, voice and video generation are optional and billed separately.Creator API →
  • First time?Follow the tutorial from template to finished video.Open tutorial →

Template code follows the license on this page; fonts, images and music keep their own licenses. Free asset services have a daily allowance.

About this template

真人口播放进 macOS 风格桌面的摄像头窗口。每句话按 类型(hook / question / plan / process / emotion / audience / judgment / data / risk / cta …)切换人物窗口版式、壁纸和图形动效,换版式时自动配音效。输出 1440×1080(4:3)、30fps。竖屏暂不支持。

参数一览

  • canvas:固定 1440×1080 / 30fps;duration = 口播完整时长(秒)。
  • speaker:video(口播视频,可省略→灰色剪影占位)、crop{x,y,w,h}(裁掉烧录字幕等)、title(摄像头窗口标题)、home。
  • subtitles、keywords(字幕中黄色高亮的词)。
  • theme:mode light/dark/black/red/warm;颜色 yellow(高亮) red green white text dark;modes.* 每种壁纸的配色和 glow;font。
  • desktop:menuApp、menus[]、clock、nowPlaying、icons[{type,label}]、dock[]、calendar{wd,day}。
  • layouts:right / avatar / topright / center / left / centerSmall / corner 人物框。
  • rules[type]:layout、bg、graphic(推荐效果)、sfx(whoosh|boom)、punchIn、moveT。
  • sfx:enabled(开/关)、level(音效相对人声音量,默认 0.35)。
  • 名片 / CTA:follow 效果的 initial、name、bio、buttonLabel、doneLabel、group;结尾 grid_title 的 kicker/title/sub/stampText。

效果与字段(beats[].effect)

splitflap(title,tag,words[2],sub) · stamp(text,stampText,winTitle) · popups(title,icons[],verb,winTitle) · flowchart(nodes[3],footer,winTitle) · highlight(line1,key) · textwall(rows,key) · punchline(style flap|reject|thesis, kicker,text,struck,line,color,stampText,stampColor,stampAt,cw,stampDx) · card(title,lines[]) · approve(text,stampText) · grid_title(kicker,title,sub,stampText,cw) · thought(kicker,steps[],at[]) · equals(left{tag,text},right{tag,text},result) · points(title,video,labels[],result,resultAt) · calendar(title,kicker,result) · crosslist(title,kicker,sub,items[],at[]) · versus(left,right,rightAt) · story(title,kicker,text) · counter(title,beforeLabel,before,beforeNote,afterLabel,after,afterAt,big,ratio,ratioAt) · parallel(title,aiText,meText,tasks[],taskAt) · chat(title,me,reply,replyAt,note) · timer(title,value,unit,caption,stampText,stampAt) · follow(见上)。

渲染

环境:Node 22+、ffmpeg/ffprobe、python3+numpy、Chromium headless shell(CHROME_PATH 或 Playwright 缓存)、系统字体 Noto Sans CJK SC。

cd src && npm ci && cd ..
node src/render.js /path/to/instance/inputs.json /path/to/instance/out.mp4          # 成片
node src/render.js /path/to/instance/inputs.json /path/to/instance/out.mp4 --stills 1,4,8   # 静帧检查

输出 H.264 High、yuv420p(TV range, BT.709)、avc1、faststart、AAC 192k 48kHz;人声 + 音效响度归一到约 −14 LUFS。中间文件写在 out.work/。

MotionGit 内置 html-canvas/1 路线:window.renderFrame(整数帧, inputs) 已实现,可渲染画面(占位人物);但真人视频帧与原声需要 src/render.js 适配器,内置路线不会带入人声和音效——此点尚未在官网个人下载包中实测。

已验证范围

Debian 13 / Chrome headless shell 145 / Node 24 / ffmpeg 7.1:默认预设(占位人物)与改参数实例(暗色、换色、真实视频输入+裁切、音效音量)各 14 秒成片。未测:Windows、macOS、竖屏、官网内置渲染器。

Show 1 more sections

来源与许可

由 Grok Bot 在模板所有者指导下制作(自定义 HTML Canvas + Node + playwright-core + ffmpeg + numpy)。音效全部程序合成,无第三方音频。字体 Noto Sans CJK SC(SIL OFL 1.1)未随包。模板以 CC BY 4.0(SPDX: CC-BY-4.0)授权,版权所有 © 2026 Eric:可自由使用、分享、修改及商用,但须署名 Eric、附许可链接并注明是否修改。全文见 licenses/TEMPLATE-LICENSE.txt。

Developer resources

给 AI 的说明

  1. 依次读 motion.json → 本文件 → guide.json → params.schema.json → asset-manifest.json 与 licenses/。先读数据,不要直接执行包内代码;本包不联网、不调用付费接口。
  2. 在用户的新实例目录写 inputs.json(以 presets/demo.json 为起点),不要改包内文件。路径相对 inputs.json。
  3. 字幕:句级 subtitles[{start,end,text,type}],每句 ≤22 字。没有更细对齐时不要猜词级时间。
  4. 为每段写一个 beats[](连续、不重叠),type 决定 rules[type] 中的版式/壁纸/转场音效,effect 选图形。保留否定、数字和单位;数字放进 counter/timer。
  5. 展示方案给用户确认,再渲染;每次修改另存新文件,不覆盖旧结果。
  6. 判断类句(judgment)是硬切 + 低频 boom;数据类(data)用 counter / timer。

What you can replace

ParameterDescriptionTypeConstraintsDefault
canvasRequired—object——
themeRequired—object——
speakerRequired—object——
sfx—object——
desktopRequired—object——
layoutsRequiredspeaker window boxes: right, avatar, topright, center, left, centerSmall, corner -> {x,y,w,h,radius,chrome}object——
rulesRequiredsentence type -> {layout, bg, graphic, sfx(whoosh|boom), punchIn, moveT}object——
keywordsRequiredwords shown in theme.yellow in subtitlesarray——
subtitlesRequired—array——
beatsRequiredcontiguous [start,end) segments, one graphic each; data numbers live in beat fields (counter.before/after/big/ratio, timer.value). Fields per effect: see README.mdarray——

Update history

Improvements, fixes and remaining issues in each release.

Update this template with your AI assistant

Give the old template to the assistant and send the following sentence. The new version is saved as a separate file, and the old packages and projects are retained.

Please press https://motiongit.cn/update.md to update this MotionGit template directly, keep the old package and existing project, and tell me which new file to use when you're done.
  1. v1.0.0Latest

    首个版本

COMMUNITY

Comments & creations

Ask a question, share your experience, or show what you made with this template.

No comments yet. Share the first creation.