ııı motion.md视频风格规范
Bluevine / V371

Bluevine｜品牌几何动效

先展示字标的几何构造，再把圆弧模块变成独立符号和应用图标。

构图与编排 可播放 · 可替换内容
整体编排规则示例
0.00 / 17.88 秒
动作与构图示意 独立打开 ↗
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bluevine｜品牌几何动效 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#09004b}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>
画面元素构造线几何字标半圆模块叶片模块应用图标
MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

01

沿字标横移，填色追随视线

沿字标横移，填色追随视线规则示例
0.00 / 6.40 秒
1.4–7.8 秒 · 动作示意 独立打开 ↗
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bluevine｜品牌几何动效 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#09004b}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="1.4" data-end="7.8"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

深蓝底上先画基线、字高与圆弧线稿，蓝色填充依次进入。构造线比字形更轻，横移时让正在完成的字母留在中心。

02

字形模块成为自己的视觉语言

半圆、拱门、圆角方形与圆依次占据正方形中心，背景与图形成对换色。每屏只放一个形状，边界清楚，快切后留短暂停顿。

03

拆圆再组合，把标志落到图标里

圆分成两半，重新排列成上直下弧的组合；反白之后缩进圆角方形。迁移时应选择新标志里真正重复的几何母题，替换字标和配色，同时保留构造—模块—应用的顺序。

SEQUENCE

段落与节奏

点击段落，定位到上方编排示意。

0.00 秒的构图参考
0.00s
2.57 秒的构图参考
2.57s
7.88 秒的构图参考
7.88s
8.96 秒的构图参考
8.96s
12.52 秒的构图参考
12.52s
14.97 秒的构图参考
14.97s

画面参考 · 离散静帧

KEEP THE RELATIONSHIPS

制作其他主题

  • 圆分成两半，重新排列成上直下弧的组合；反白之后缩进圆角方形。迁移时应选择新标志里真正重复的几何母题，替换字标和配色，同时保留构造—模块—应用的顺序。

制作约束

构造线 / 几何字标 / 半圆模块 / 叶片模块 / 应用图标

  • 先展示字标的几何构造，再把圆弧模块变成独立符号和应用图标。
  • 深蓝底上先画基线、字高与圆弧线稿，蓝色填充依次进入。构造线比字形更轻，横移时让正在完成的字母留在中心。
  • 半圆、拱门、圆角方形与圆依次占据正方形中心，背景与图形成对换色。每屏只放一个形状，边界清楚，快切后留短暂停顿。