ШаблоныОбновлено 13 нояб. 2026 г.

科技数据可视化 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。
  • 字体使用系统无衬线字体栈，未捆绑字体文件。
Материалы для разработчиков
ФайлыФорк · 0

给 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

История обновлений

Улучшения, исправления и нерешённые вопросы каждой версии.

Обновить с помощью ИИ-ассистента

Отдайте старый шаблон помощнику и отправьте следующее предложение. Новая версия сохраняется в виде отдельного файла, а старые пакеты и проекты сохраняются.

Нажмите https://motiongit.cn/update.md, чтобы напрямую обновить этот шаблон MotionGit, сохранить старый пакет и существующий проект и сообщить мне, какой новый файл использовать, когда вы закончите.
  1. v1.0.1Последняя версия

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

Больше Визуальное искусство

Показать все
COMMUNITY

Комментарии и работы

Делитесь вопросами, опытом и работами, созданными по этому шаблону.

Комментариев пока нет. Поделитесь первой работой.