Back to Details

motion-design-rules

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
These rules apply to every Helios video composition. Read and internalize these before producing a creative specification or writing composition code.

RULE 1 — Anti-Slideshow Architecture

The biggest mistake in code-based video is building a PowerPoint (Scene A fades out → Scene B fades in).
The camera never stops.
Separate all elements into two categories:
GLOBAL elements persist across scenes: • Background texture or gradient • Floating particles, orbs, or accent shapes • Logo or brand mark • Ambient motion (slow drift, subtle pulse)
LOCAL elements are scene-specific: • Hero text for that scene • Supporting details, stats, or callouts • Scene-specific imagery
Global elements must NOT reset between scenes. They morph, shift, or evolve — but never disappear and reappear.
This creates the illusion of a single continuous world rather than a sequence of separate slides.

RULE 2 — The Visual Stack (Minimum 4 Layers)

Every frame must have at least 4 layers of depth. A flat composition looks amateur.
Layer 0 — The Void Base color or deep gradient. Never pure black unless intentional.
Layer 1 — The Texture Subtle noise, gradient drift, grid lines, or slow-moving video. This layer is never static. It always breathes.
Layer 2 — The Context Floating shapes, lines, accent UI elements, or particles. These sit behind the hero content but in front of the background. They move slower than foreground elements (parallax).
Layer 3 — The Hero Primary content: text, images, product UI. Highest contrast. Sharpest edges. Draws the eye immediately.
If a frame has fewer than 3 visible layers, add depth.

RULE 3 — Physics Engine (Global Easing)

Define ONE global easing personality for the entire video. Every animation must use this easing unless there is a specific creative reason to break the rule.
Match the easing to brand identity:
• Tech / Developer / Hacker → circOut (fast start, hard brake) • Luxury / Spa / Premium → easeInOut (slow start, slow end) • Playful / Consumer / Fun → spring (overshoot and wobble) • Corporate / Enterprise → easeOut (controlled deceleration) • Bold / Startup / Energy → backOut (slight overshoot, confident)
Define this in the creative specification as:
physics: { easing: "circOut", defaultDuration: 0.4 }
All motion.dev / WAAPI animations must reference this constant.

RULE 4 — Choreography and Staggering

Nothing ever appears all at once.
The entrance order for every scene:
  1. Background shifts or evolves (sets the stage)
  2. Context elements animate in (lines, shapes, accents)
  3. Hero text staggers in (word by word or line by line)
  4. Supporting details cascade (one by one, not simultaneously)
The stagger delay between child elements should be 50ms–150ms depending on energy level.
High energy (promo, social): 50–80ms stagger Medium energy (demo, launch): 80–120ms stagger Low energy (explainer, testimonial): 100–150ms stagger
Exit animations must overlap with the next scene's entrance by at least 200ms. Scenes should crossfade, not swap.

RULE 5 — The Squint Test

Before finalizing the composition, pause at 5 random frames and mentally "squint" at the layout.
Check:
• Can you instantly identify the most important element? (Hierarchy) • Is there enough negative space? (Breathing room) • Are there more than 3 competing focal points? (Clutter — delete something) • Does every visible element serve a purpose? (No decoration for decoration's sake)
If any frame fails the squint test, simplify. Space is a design element, not just empty pixels.

RULE 6 — Transition Continuity

Scene transitions must never be a hard cut followed by silence.
During every transition:
• At least one global element must be visually continuous • The outgoing scene's exit and incoming scene's entrance must overlap • Audio energy (if present) should bridge the transition • Color palette shifts should be gradual, not abrupt
Preferred transition patterns:
• Wipe with persistent background • Scale-out hero → scale-in new hero (camera metaphor) • Directional slide (content moves as if camera is panning) • Morphing shapes that carry energy between scenes
Avoid: hard cuts, full-black gaps, simultaneous fade-out/fade-in.
以下规则适用于所有Helios视频合成项目。 在制作创意规范或编写合成代码前，请务必通读并理解这些规则。

规则1 — 反幻灯片架构

基于代码的视频制作中最大的误区就是做成PowerPoint式的效果（场景A淡出→场景B淡入）。
镜头永远不能静止。
将所有元素分为两类：
全局元素：跨场景持续存在 • 背景纹理或渐变 • 漂浮粒子、球体或装饰形状 • Logo或品牌标识 • 环境动态效果（缓慢漂移、轻微脉动）
局部元素：仅属于特定场景 • 该场景的核心文本 • 辅助细节、数据或标注 • 场景专属图像
全局元素在场景切换时绝对不能重置。 它们可以变形、移动或演化，但绝不能消失后再重新出现。
这样能营造出一个连贯统一的视觉空间，而非一系列独立的幻灯片。

规则2 — 视觉层级（至少4层）

每一帧都必须具备至少4层视觉深度。 扁平化的合成效果会显得很业余。
第0层 — 基底 基础色或深色渐变。除非有特殊设计需求，否则绝对不要用纯黑色。
第1层 — 纹理 细微噪点、渐变漂移、网格线或慢速视频。 这一层永远不能静止，要始终保持动态感。
第2层 — 背景元素 漂浮形状、线条、装饰性UI元素或粒子。 它们位于核心内容之后、背景之上。 移动速度要慢于前景元素（视差效果）。
第3层 — 核心内容 主要内容：文本、图像、产品UI。 对比度最高，边缘最清晰，能立刻吸引视线。
如果某一帧的可见图层少于3个，就需要增加视觉深度。

规则3 — 物理引擎（全局缓动）

为整个视频定义一套全局缓动风格。 除非有特殊创意需求，否则所有动画都必须使用这套缓动效果。
根据品牌调性匹配缓动风格：
• 科技/开发者/极客风格 → circOut（快速启动，急停） • 奢华/SPA/高端风格 → easeInOut（缓慢启动，缓慢结束） • 趣味/消费/娱乐风格 → spring（过冲并轻微晃动） • 企业/商务风格 → easeOut（可控减速） • 大胆/创业/活力风格 → backOut（轻微过冲，自信感）
在创意规范中这样定义：
physics: { easing: "circOut", defaultDuration: 0.4 }
所有motion.dev / WAAPI动画都必须引用这个常量。

规则4 — 编排与 stagger 动画

所有元素绝对不能同时出现。
每个场景的入场顺序：
  1. 背景切换或演化（搭建场景基调）
  2. 背景元素入场动画（线条、形状、装饰）
  3. 核心文本 stagger 入场（逐字或逐行）
  4. 辅助细节依次入场（逐个出现，而非同时）
子元素之间的stagger延迟应根据活力级别设置为50ms–150ms。
高活力（促销、社交内容）：50–80ms延迟 中活力（演示、发布内容）：80–120ms延迟 低活力（讲解、 testimonial）：100–150ms延迟
退场动画必须与下一场景的入场动画至少重叠200ms。场景应采用交叉淡入淡出，而非直接切换。

规则5 — 眯眼测试

在最终确定合成效果前，随机暂停5帧，然后在脑海中“眯眼”观察布局。
检查以下内容：
• 能否立刻识别出最重要的元素？（层级结构） • 是否有足够的留白？（呼吸空间） • 是否存在超过3个相互竞争的视觉焦点？（过于杂乱 — 删除多余元素） • 每个可见元素是否都有存在的意义？（不要为了装饰而装饰）
如果任何一帧未通过眯眼测试，就需要简化设计。 空间是一种设计元素，而不只是空白像素。

规则6 — 转场连贯性

场景转场绝对不能是硬切后伴随静音。
在每次转场过程中：
• 至少有一个全局元素要保持视觉连续性 • 退场场景的退场动画与入场场景的入场动画必须重叠 • 音频能量（如果有）要衔接转场过程 • 调色板的切换要平缓，不能突兀
推荐的转场模式：
• 带有持续背景的擦除转场 • 核心内容缩小→新核心内容放大（镜头隐喻） • 定向滑动（内容移动，模拟镜头平移） • 变形形状，在场景间传递视觉能量
避免使用：硬切、全黑间隙、同时淡出/淡入。