템플릿 센터업데이트 2026년 11월 13일

科技数据可视化 MG Reel

혁신 공간

25 秒、16:9 深色科技风数据可视化 MG 短片:开场标题字、增长折线/柱状图与 KPI 卡、节点网络脉冲流、三张产品 UI 卡片、品牌落版五段连续动效。画面由 HTML/CSS/SVG 逐帧驱动,配本地原创合成 BGM;图表与 KPI 数字为演示占位,复用时替换为真实数据。

공유
모션 조각

오프닝, 전환, 자막 또는 개별 장면에 쓰는 애니메이션으로 영상 제작을 보완합니다.

PREVIEWdefault1920×1080 · 30fps
Free template

Download free. Customize and create again.

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

Personal and commercial video production · Individuals and businesses may make and publish videos under the template license. Unless authorized, you may not repost or resell the template package or source code, including modified versions, or use them to develop a third-party online service.

  • 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.

템플릿 소개

一支 25 秒、1920×1080、30fps 的深色科技风数据可视化 MG 短片,作为工作室作品集 Reel 的第一条。五个连续场景,全部由 HTML / CSS / SVG 与逐帧时间线驱动;包内不内嵌音频,BGM 仅作默认演示素材,正式音轨由宿主音乐合同接入。

场景拆解(固定 25 秒)

| # | 时间段 | 场景 | 实现位置 | | --- | --- | --- | --- | | 1 | 0.0–3.0s | DATA / MOTION / STORY 三词模糊上浮 + 副标题,对角划像收尾 | src/index.js · drawS1 | | 2 | 3.0–9.0s | 平滑折线图 + 柱状图升起 + 三张 KPI 卡片滑入 | src/index.js · drawS2 | | 3 | 9.0–15.0s | 八节点网络连线浮现,脉冲点沿主路径循环流动 | src/index.js · drawS3 | | 4 | 15.0–21.0s | 三张产品 UI 卡片:环形进度、迷你柱状、受众与目标进度 | src/index.js · drawS4 | | 5 | 21.0–25.0s | 品牌落版,分隔线展开,尾部整体淡出 | src/index.js · drawS5 |

入口 src/index.html;参数集中在 src/config.js;共享缓动、配色与划像组件:src/lib.js;BGM 合成脚本:src/make_bgm.py,演示音频:assets/bgm.mp3。

素材与许可

  • 画面图形均为包内 SVG/CSS 程序化绘制,无外部图片。
  • assets/bgm.mp3 由 src/make_bgm.py 本地原创合成,无第三方采样;页面不内嵌 <audio>,许可见 licenses/TEMPLATE-LICENSE.txt。
  • 字体使用系统无衬线字体栈,未捆绑字体文件。
개발자 자료

给 AI 的说明

这是 MotionGit 模板包(.motion,ZIP 容器)。请按顺序读取:

  1. motion.json:模板身份、运行要求、输出画幅与时长
  2. 本文件
  3. params.schema.json:可替换的主题参数与约束
  4. guide.json:用途、素材角色、容量与适配限制
  5. asset-manifest.json 与 licenses/:素材来源与许可

先读数据、不执行代码。只有在宿主具备文件、命令与渲染能力并得到用户授权后,才检查依赖并运行。默认不联网;本包不引用外部字体、图片或网络资源。

运行

运行配置:html-canvas/1,入口 src/index.html。页面挂载 window.renderFrame(integerFrame, inputs):宿主按 30fps 传入整数帧(0–749)与参数对象,返回该帧画面。画面只依赖帧号与输入参数,不依赖实时时钟或机器速度;同一帧号重复渲染结果一致,状态不跨帧累积。宿主渲染 1920×1080、25 秒成片。

随包工具链流程:check-params(核对 inputs 类型与兜底)→ plan(列出五场景时长与素材)→ prepare(落包内素材与配色)→ preview(逐帧抽帧核对默认帧、改参帧与首尾)→ render(导出成片并接入音乐合同)。

可替换的内容

参数集中在 src/config.js 的 DEFAULTS,并在 params.schema.json 中声明;宿主通过 inputs 覆盖:

  • brand:片尾落版品牌名(最多 24 字符,默认 MOTION STUDIO)
  • introWord1/2/3:第一幕三个开场词
  • introTag:第一幕副标题
  • s2Kicker / s2Title:数据页小标题与主标题
  • kpiLabels / kpiValues:三张 KPI 卡片标签与数值(各 3 项)
  • s3Kicker / s3Title:网络页小标题与主标题
  • s4Kicker / s4Title:UI 卡片页小标题与主标题
  • outroMeta:片尾品牌名下方的元信息行
  • accent:强调色(默认 #00E5FF)
  • background:背景色(默认 #060918)

S4 卡片内环图百分比、迷你柱、受众数与进度条数值为代码内演示占位常量;图表与 KPI 数字均为演示占位,复用前须替换为真实数据。

교체 가능한 항목

매개변수설명유형제약 조건기본값
brand필수落版品牌名string최대 24자,최소 1자MOTION STUDIO
introWord1开场词 1string—DATA
introWord2开场词 2string—MOTION
introWord3开场词 3string—STORY
introTag开场副标题string—WE CRAFT MOTION THAT MOVES PEOPLE
s2Kicker数据页小标题string—Quarterly Growth
s2Title数据页主标题string—Revenue · Q1 → Q4
kpiLabelsKPI 标签(3 项)array—["TOTAL REVENUE","GROWTH YOY","UPTIME"]
kpiValuesKPI 数值(3 项)array—["$2.4M","+38.4%","99.99%"]
s3Kicker网络页小标题string—System Architecture
s3Title网络页主标题string—Nodes · Connections · Flow
s4KickerUI 卡片页小标题string—Product Interfaces
s4TitleUI 卡片页主标题string—Dashboards · Metrics · UI
outroMeta落版副标string—MG Reel · 2026
accent필수强调色string#RRGGBB#00E5FF
background필수背景色string#RRGGBB#060918

업데이트 기록

버전별 개선 사항, 수정 내용과 남은 과제입니다.

AI 도우미로 템플릿 업데이트

이전 템플릿을 보조자에게 전달하고 다음 문장을 보냅니다. 새 버전은 별도의 파일로 저장되고 이전 패키지와 프로젝트는 유지됩니다.

이 MotionGit 템플릿을 직접 업데이트하려면 https://motiongit.cn/update.md를 누르고, 이전 패키지와 기존 프로젝트를 유지하고, 완료되면 사용할 새 파일을 알려주세요.
  1. v1.0.1최신 버전

    1.0.1 重构:运行契约由 OpenFilm window.film.frame(t) 迁移为平台原生 html-canvas/1 的 window.renderFrame(整数帧, inputs);品牌、开场词、各场景标题、KPI 标签与数值、强调色与底色接入参数;页面不内嵌音频,BGM 由宿主音乐合同接入。图表与卡片内数字为演示占位,复用时替换真实数据。

COMMUNITY

댓글과 제작 결과

질문, 사용 경험, 이 템플릿으로 만든 작품을 공유하세요.

아직 댓글이 없습니다. 첫 작품을 공유하세요.