ııı motion.md视频风格规范
Supabase / V386

Supabase Explorer and Notebooks

先用增长图打开产品，再逐项证明查询、保存、自然语言和本地工作流，短句始终与正在演示的功能并置。

构图与编排 可播放 · 可替换内容
整体编排规则示例
0.00 / 58.25 秒
动作与构图示意 独立打开 ↗
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Supabase Explorer and Notebooks · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090b0b}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>
画面元素倾斜界面用户增长图SQL 编辑器结果表自然语言输入本地命令
MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

01

左边一句能力，右边一个操作

产品名揭示后固定左侧短句区，右侧暗色界面展示对应操作。界面可略倾斜并缓慢前移，但 SQL 与结果的主要区域不能超出阅读范围。

02

数据表和图表共享同一查询

数据表和图表共享同一查询规则示例
0.00 / 7.50 秒
28.5–36 秒 · 动作示意 独立打开 ↗
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Supabase Explorer and Notebooks · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090b0b}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="28.5" data-end="36"><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>

查询语句先出现，运行后填入表格，再切到绿色图形。保存段保留笔记标题，说明查询、数据和图表属于同一工作单元。

03

自然语言最终落到可见 SQL

输入问题后显示生成语句与结果；本地仓库段使用独立终端命令收尾。黑底、灰白正文、等宽代码和少量绿色形成稳定层级，不用霓虹泛光压低文字对比。

04

迁移时用完整的数据故事

替换项目名、查询、表格和图表时确保字段与数值一致。每段只讲一个可操作能力，保持固定短句区，最后交代成果如何保存或带走。

SEQUENCE

段落与节奏

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

0.00 秒的构图参考
0.00s
6.00 秒的构图参考
6.00s
10.50 秒的构图参考
10.50s
28.87 秒的构图参考
28.87s
45.00 秒的构图参考
45.00s
56.00 秒的构图参考
56.00s

画面参考 · 离散静帧

KEEP THE RELATIONSHIPS

制作其他主题

  • 替换项目名、查询、表格和图表时确保字段与数值一致。每段只讲一个可操作能力，保持固定短句区，最后交代成果如何保存或带走。

制作约束

倾斜界面 / 用户增长图 / SQL 编辑器 / 结果表 / 自然语言输入 / 本地命令

  • 先用增长图打开产品，再逐项证明查询、保存、自然语言和本地工作流，短句始终与正在演示的功能并置。
  • 产品名揭示后固定左侧短句区，右侧暗色界面展示对应操作。界面可略倾斜并缓慢前移，但 SQL 与结果的主要区域不能超出阅读范围。
  • 查询语句先出现，运行后填入表格，再切到绿色图形。保存段保留笔记标题，说明查询、数据和图表属于同一工作单元。