模板系统

模板会在运行时展开成普通 clips,不应被理解为一个会自动把样式或动画传递给子元素的父容器。

1. 模板列表

当前支持:

  • product-intro
  • slideshow
  • subtitle-video
  • talking-head
  • comparison
  • countdown
  • text-reveal
  • news
  • quote
  • list

2. 通用限制

模板 clip 自己的以下字段,不作为已文档化的子 clip 继承行为:

  • transform
  • style
  • animations
  • keyframes
  • transition

模板内部控制应通过 data 传入。

3. product-intro

当前有效字段:

  • name
  • tagline
  • features
  • price
  • image
  • cta

渲染行为:

  • 可选左侧产品图
  • 右侧产品标题与说明
  • 可选特性列表
  • 可选价格
  • 可选 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

当前有效字段:

  • images
  • durationPerSlide
  • showCaptions

渲染行为:

  • 每张图片展开成一个 image clip
  • slide 使用当前内置切换行为
  • 当图片项包含 captionshowCaptions !== 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

当前有效字段:

  • src
  • words
  • config
  • source
  • volume
  • muted
  • playbackRate

渲染行为:

  • 生成一个全屏 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

当前有效字段:

  • src
  • words
  • config
  • source
  • volume
  • muted
  • playbackRate
  • speaker
  • role
  • title
  • showLowerThird

渲染行为:

  • 生成一个全屏人物视频
  • 可选顶部标题
  • 可选底部 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.title
  • left.items
  • left.image
  • right.title
  • right.items
  • right.image
  • vsText

渲染行为:

  • 生成左右对比区块
  • 支持两侧可选图片与列表
  • 生成中间分隔线和 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

当前有效字段:

  • from
  • to
  • showText
  • onComplete

渲染行为:

  • 生成倒计时序列
  • 临近结束时可显示提示文字
  • 结束时可显示完成文案

示例:

{
  "type": "template",
  "template": "countdown",
  "start": 0,
  "duration": 6,
  "data": {
    "from": 5,
    "to": 0,
    "showText": true,
    "onComplete": "Launch"
  }
}

9. text-reveal

当前有效字段:

  • text
  • style
  • fontSize
  • color
  • textAlign
  • position

当前文档化的 style 值:

  • fade
  • slide
  • zoom

渲染行为:

  • 生成分阶段出现的文字 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

当前有效字段:

  • headline
  • content
  • reporter
  • location
  • showLowerThird

渲染行为:

  • 主标题
  • 可选内容区
  • 可选底部信息条

示例:

{
  "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

当前有效字段:

  • quote
  • author
  • source

渲染行为:

  • 渲染引用文本
  • 可选作者与来源行

示例:

{
  "type": "template",
  "template": "quote",
  "start": 0,
  "duration": 6,
  "data": {
    "quote": "Simplicity scales better than complexity.",
    "author": "Alex Chen",
    "source": "Team Memo"
  }
}

12. list

当前有效字段:

  • title
  • items
  • style
  • itemDuration
  • animation

渲染行为:

  • 可选标题
  • 顺序生成列表项
  • 支持前缀样式与条目动画
  • 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"
  }
}