模板系统
模板会在运行时展开成普通 clips,不应被理解为一个会自动把样式或动画传递给子元素的父容器。
1. 模板列表
当前支持:
product-introslideshowsubtitle-videotalking-headcomparisoncountdowntext-revealnewsquotelist
2. 通用限制
模板 clip 自己的以下字段,不作为已文档化的子 clip 继承行为:
transformstyleanimationskeyframestransition
模板内部控制应通过 data 传入。
3. product-intro
当前有效字段:
nametaglinefeaturespriceimagecta
渲染行为:
- 可选左侧产品图
- 右侧产品标题与说明
- 可选特性列表
- 可选价格
- 可选 CTA 文本
示例:
{
"type": "template",
"template": "product-intro",
"start": 0,
"duration": 8,
"data": {
"name": "Smart Watch Pro",
"tagline": "Built for modern teams",
"features": ["AMOLED display", "7-day battery", "Health tracking"],
"price": "$299",
"image": "https://example.com/watch.png",
"cta": "Order Now"
}
}4. slideshow
当前有效字段:
imagesdurationPerSlideshowCaptions
渲染行为:
- 每张图片展开成一个
imageclip - slide 使用当前内置切换行为
- 当图片项包含
caption且showCaptions !== false时,会生成说明文字
示例:
{
"type": "template",
"template": "slideshow",
"start": 0,
"duration": 9,
"data": {
"images": [
{ "image": "https://example.com/slide-1.jpg", "caption": "Welcome" },
{ "image": "https://example.com/slide-2.jpg", "caption": "New Features" },
{ "image": "https://example.com/slide-3.jpg", "caption": "Get Started" }
],
"durationPerSlide": 3,
"showCaptions": true
}
}5. subtitle-video
当前有效字段:
srcwordsconfigsourcevolumemutedplaybackRate
渲染行为:
- 生成一个全屏
video - 生成一个
subtitle
示例:
{
"type": "template",
"template": "subtitle-video",
"start": 0,
"duration": 8,
"data": {
"src": { "$ref": "host-video" },
"words": { "$ref": "subtitle-main" },
"muted": false,
"volume": 1,
"config": {
"position": "bottom",
"fontSize": 58,
"highlightColor": "#22d3ee"
}
}
}6. talking-head
当前有效字段:
srcwordsconfigsourcevolumemutedplaybackRatespeakerroletitleshowLowerThird
渲染行为:
- 生成一个全屏人物视频
- 可选顶部标题
- 可选底部 lower-third 信息条
- 可选字幕轨
示例:
{
"type": "template",
"template": "talking-head",
"start": 0,
"duration": 8,
"data": {
"src": { "$ref": "host-video" },
"words": { "$ref": "subtitle-main" },
"title": "Weekly Update",
"speaker": "Alex Chen",
"role": "Founder",
"showLowerThird": true,
"config": {
"position": "bottom",
"fontSize": 60,
"highlightColor": "#22d3ee"
}
}
}7. comparison
当前有效字段:
left.titleleft.itemsleft.imageright.titleright.itemsright.imagevsText
渲染行为:
- 生成左右对比区块
- 支持两侧可选图片与列表
- 生成中间分隔线和 VS 文本
示例:
{
"type": "template",
"template": "comparison",
"start": 0,
"duration": 7,
"data": {
"left": {
"title": "Before",
"items": ["Manual workflow", "Slow review", "Higher cost"],
"image": "https://example.com/before.png"
},
"right": {
"title": "After",
"items": ["Automated workflow", "Fast review", "Lower cost"],
"image": "https://example.com/after.png"
},
"vsText": "VS"
}
}8. countdown
当前有效字段:
fromtoshowTextonComplete
渲染行为:
- 生成倒计时序列
- 临近结束时可显示提示文字
- 结束时可显示完成文案
示例:
{
"type": "template",
"template": "countdown",
"start": 0,
"duration": 6,
"data": {
"from": 5,
"to": 0,
"showText": true,
"onComplete": "Launch"
}
}9. text-reveal
当前有效字段:
textstylefontSizecolortextAlignposition
当前文档化的 style 值:
fadeslidezoom
渲染行为:
- 生成分阶段出现的文字 clips
- 在当前已实现范围内应用指定 reveal 样式
示例:
{
"type": "template",
"template": "text-reveal",
"start": 0,
"duration": 5,
"data": {
"text": "Ship faster with AI video",
"style": "slide",
"fontSize": 72,
"color": "#ffffff",
"textAlign": "center",
"position": "center"
}
}10. news
当前有效字段:
headlinecontentreporterlocationshowLowerThird
渲染行为:
- 主标题
- 可选内容区
- 可选底部信息条
示例:
{
"type": "template",
"template": "news",
"start": 0,
"duration": 8,
"data": {
"headline": "Quarterly results exceed expectations",
"content": "Revenue grew 38% year over year, driven by strong subscription growth.",
"reporter": "Maya Lin",
"location": "San Francisco",
"showLowerThird": true
}
}11. quote
当前有效字段:
quoteauthorsource
渲染行为:
- 渲染引用文本
- 可选作者与来源行
示例:
{
"type": "template",
"template": "quote",
"start": 0,
"duration": 6,
"data": {
"quote": "Simplicity scales better than complexity.",
"author": "Alex Chen",
"source": "Team Memo"
}
}12. list
当前有效字段:
titleitemsstyleitemDurationanimation
渲染行为:
- 可选标题
- 顺序生成列表项
- 支持前缀样式与条目动画
itemDuration: "auto"会自动分配总时长
示例:
{
"type": "template",
"template": "list",
"start": 0,
"duration": 8,
"data": {
"title": "Release Checklist",
"items": ["Finalize copy", "Export assets", "Publish update"],
"style": "checkmark",
"itemDuration": "auto",
"animation": "fadeIn"
}
}