Framer / V301

Framer 3.0｜品牌与产品发布

开场光线引出分支和发布操作，中段放具体编辑结果，后段再把界面语言抽象成玻璃符号。蓝色既是选中状态，也是全片材质线索。

构图与编排可播放 · 可替换内容

整体编排规则示例

0.00 / 75.00 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Framer 3.0｜品牌与产品发布 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03050a}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

动作与构图

局部动作 · 构图规则

用同一种蓝光连接功能与品牌

开场光线引出分支和发布操作，中段放具体编辑结果，后段再把界面语言抽象成玻璃符号。蓝色既是选中状态，也是全片材质线索。

每段只突出一个变化

编辑区按内容修改、协作、响应式、代码组件、CMS 的次序推进。镜头先给局部操作，再拉远看结果；多个页面同时出现时保持等宽对齐。

组件段允许更密集的切换

组件段允许更密集的切换规则示例

0.00 / 5.00 秒

33–38 秒 · 动作示意独立打开 ↗

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Framer 3.0｜品牌与产品发布 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03050a}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="33" data-end="38"><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>

照片轮盘、粒子球、图片拖尾、字词滚筒和网格画廊在黑色舞台里快速更换。外框与展示范围保持固定，让变化集中在内部。