VorlagenzentrumAktualisiert 13. Nov. 2026

科技数据可视化 MG Reel

Innovation

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

Teilen
Animationsbaustein

Animation für Vorspann, Übergang, Untertitel oder einzelne Szenen zur Ergänzung deines Videos.

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.

Über diese Vorlage

一支 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。
  • 字体使用系统无衬线字体栈，未捆绑字体文件。
Informationen für Entwickler
DateienFork · 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 数字均为演示占位，复用前须替换为真实数据。

Was du ersetzen kannst

ParameterBeschreibungTypEinschränkungenStandard
brandErforderlich落版品牌名string≤ 24 Zeichen，≥ 1 ZeichenMOTION 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
accentErforderlich强调色string#RRGGBB#00E5FF
backgroundErforderlich背景色string#RRGGBB#060918

Update-Verlauf

Verbesserungen, Fehlerbehebungen und offene Punkte je Version.

Mit deinem KI-Assistenten aktualisieren

Geben Sie dem Assistenten die alte Vorlage und senden Sie den folgenden Satz. Die neue Version wird als separate Datei gespeichert und die alten Pakete und Projekte bleiben erhalten.

Bitte drücken Sie https://motiongit.cn/update.md, um diese MotionGit-Vorlage direkt zu aktualisieren, behalten Sie das alte Paket und das vorhandene Projekt und teilen Sie mir mit, welche neue Datei verwendet werden soll, wenn Sie fertig sind.
  1. v1.0.1Neueste Version

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

Mehr Visuelle Kunst

Alle anzeigen
COMMUNITY

Kommentare und Ergebnisse

Teile Fragen, Erfahrungen oder Werke aus dieser Vorlage.

Noch keine Kommentare. Teile das erste Ergebnis.