motion-effects

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion effects, built in your brand

使用你的品牌打造动效

Sixteen effects that make a product, a number or a word move like it was made by a motion designer. Each one is a recipe: what it is, where it starts, where it ends, when each part moves inside an 8-second loop, and the one detail that makes it look premium. You pick the effect, give it your real words, and it gets built from scratch in your colours and type.

Before you start: read

brand.md

and

MOTION.md

if they exist. If not, run

brand-intake

first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

十六种动效，让产品、数字或文字像由动效设计师亲手打造一般。每一种动效都是一份制作配方：它是什么、从哪里开始、在哪里结束、8 秒循环中各部分何时运动，以及让它显得高级的那个关键细节。你选择动效并提供真实内容，它就会使用你的色彩和字体从零构建。

开始之前： 如果存在

brand.md

和

MOTION.md

，请先阅读。若不存在，先运行

brand-intake

，或询问十六进制色值、字体和 Logo 文件。在获得这些信息前，绝不能声称结果符合品牌规范。

Step 1: Ask for four things, then wait

第一步：询问四件事，然后等待

The effect. One of the 16 by name or number. If they describe a job instead ("show our pricing", "reveal the launch name"), suggest the two effects from the table below that fit best and let them pick.
The real content. The words, labels and numbers that go in it. Real figures, or say they are samples.
The size. 1080 x 1080 (square), 1080 x 1350 (LinkedIn portrait), 1080 x 1920 (Reel) or 1920 x 1080 (YouTube).
Loop or hold. Loop repeats forever (a post or a GIF). Hold plays once and stays on the finished frame (under a voiceover, so it never resets mid-sentence).

#	Effect	Use it when you
01	Button → player	add a "watch the demo" moment to a landing page or launch email
02	Search → results	show what people find in your help centre or content library
03	Card → workspace	announce a feature, and one small card becomes the whole editor
04	Tabs → panels	compare plans, packages or channels without a wall of text
05	Chart morph	drop a weekly result into a client report or results post
06	Dashboard zoom	pull the one KPI that matters out of a dashboard
07	Spring stack	show three offers, case studies or testimonials in turn
08	Magnetic dock	show the tools you use, or a product's integrations
09	Masked type	reveal a campaign name, issue number or launch headline
10	Elastic type	open an event, webinar or podcast with a title card
11	Text → layout	turn a headline into a carousel cover or article teaser
12	Image reveal	tease a product drop, then swap in your own photo
13	Perspective shift	explain the layers of a service, brand system or stack
14	Glass focus	make people read the one line of a report that matters
15	Flowing paths	show one piece of content feeding several channels
16	Particle logo	close a video, reel or post on your mark

动效。 从 16 种中按名称或编号选择一种。如果对方描述的是一项任务（“展示我们的定价”“揭示发布名称”），从下表中推荐最合适的两种动效，让对方选择。
真实内容。 要放入其中的文字、标签和数字。使用真实数据；若暂用示例，需明确说明。
尺寸。 1080 x 1080（正方形）、1080 x 1350（LinkedIn 竖版）、1080 x 1920（Reel）或 1920 x 1080（YouTube）。
循环或停留。 循环会无限重复（用于帖子或 GIF）。停留只播放一次，并停留在最终画面上（用于旁白下方，因此不会在句子中途重置）。

#	动效	适用场景
01	按钮 → 播放器	为落地页或发布邮件增加一个“观看演示”时刻
02	搜索 → 结果	展示人们在帮助中心或内容库中能找到什么
03	卡片 → 工作区	宣布一项功能，让一张小卡片变成整个编辑器
04	标签页 → 面板	对比套餐、方案或渠道，避免大段文字
05	图表变形	将每周成果放入客户报告或成果帖子
06	仪表盘缩放	从仪表盘中突出最重要的一个 KPI
07	弹性堆叠	依次展示三项优惠、案例研究或用户评价
08	磁吸 Dock	展示所用工具或产品集成
09	蒙版文字	揭示活动名称、期刊编号或发布标题
10	弹性文字	用标题卡开启活动、网络研讨会或播客
11	文字 → 布局	将标题变成轮播封面或文章预告
12	图片显现	预告新品发布，然后换成自己的照片
13	透视位移	解释服务、品牌系统或技术栈的层级
14	玻璃聚焦	让人们阅读报告中最重要的那一行
15	流动路径	展示一份内容分发到多个渠道
16	粒子 Logo	以品牌标志结束视频、Reel 或帖子

Step 2: Read the recipe

第二步：阅读配方

Open

references/effects.md

and read the chosen effect in full: start state, end state, timing, the premium detail. The recipe is the spec. Swap the demo words for the user's real ones, and map every colour role (ground, surface, ink, muted, accent, second accent) to a colour in MOTION.md.

打开

references/effects.md

，完整阅读所选动效：起始状态、结束状态、时间安排和高级细节。该配方就是规格说明。将演示文案替换为用户的真实内容，并把每个颜色角色（底色、表面色、文字色、弱化色、强调色、第二强调色）映射到 MOTION.md 中的一种颜色。

Step 3: Build it

第三步：构建动效

Build one self-contained file,

effect.html

, to these rules:

One clock. Every frame is worked out from the time alone. Add
```
window.seek(seconds)
```
that draws the exact frame for that moment, in any order, as often as it is called. No
```
setTimeout
```
, no CSS animations running on their own, no randomness that is not seeded.
One loop, 8 seconds. Move from 0.0 to 2.2, hold to 6.6, return by 8.0.
```
seek(0)
```
and
```
seek(8)
```
must draw the same frame. In hold mode, play the move once and stay on the finished frame from 6.6 onwards.
Back to the start. The return eases every element back to exactly where it began. Nothing snaps home.
Real content, never lorem. The user's words and numbers. Sample numbers carry a visible "illustrative" or "example" label on every frame.
Self-contained. Fonts embedded, images inlined, no network requests, so it opens offline and renders the same every time.
Autoplay unless told not to. Play in real time when opened in a browser, and stop the clock when the URL ends in
```
?render
```
, so an exporter drives
```
window.seek()
```
itself.
Scale the effect up. It fills the frame at the chosen size, with margins from MOTION.md. It is not a small tile in a big empty canvas.

构建一个自包含文件

effect.html

，并遵守以下规则：

一个时钟。 每一帧都只根据时间计算。添加
```
window.seek(seconds)
```
，使其能够以任意顺序、调用任意多次时，都绘制出该时刻的精确画面。不得使用
```
setTimeout
```
，不得让 CSS 动画自行运行，也不得使用未设种子的随机性。
一个循环，共 8 秒。 从 0.0 运动到 2.2，保持至 6.6，并在 8.0 前返回。
```
seek(0)
```
和
```
seek(8)
```
必须绘制相同画面。在停留模式下，活动段只播放一次，并从 6.6 起持续停留在最终画面。
回到起点。 返回过程以缓动方式将每个元素精确恢复到初始位置。不得生硬跳回。
使用真实内容，绝不使用 lorem。 使用用户的文字和数字。示例数字必须在每一帧都带有清晰可见的“illustrative”（示意）或“example”（示例）标签。
自包含。 嵌入字体，内联图片，不发起网络请求，因此可离线打开，并且每次渲染结果一致。
除非明确要求不要自动播放，否则默认自动播放。 在浏览器中打开时实时播放；当 URL 以
```
?render
```
结尾时停止时钟，让导出程序自行驱动
```
window.seek()
```
。
放大动效。 按所选尺寸填满画面，并使用 MOTION.md 中规定的边距。它不应成为大块空白画布中的小方块。

Step 4: Check it before you show it

第四步：展示前进行检查

Capture frames at 0, 1, 2.2, 4.4, 6.6, 7.9 and 8 seconds and look at every one.

The loop: frame 0 and frame 8 are identical.
The move: frames 0, 1 and 2.2 are all different. If two match, part of the effect is not running.
The fit: no text runs past its box, and nothing is cut off at any of the seven moments.
The still: pause on 4.4. The point of the effect reads from that single frame.
The brand: every colour and font on screen is in MOTION.md.

Fix what fails, capture again, and only then show the user the 2.2 and 4.4 frames with the file path.

在 0、1、2.2、4.4、6.6、7.9 和 8 秒处捕获画面，并逐一检查。

循环： 第 0 帧和第 8 帧完全相同。
运动： 第 0、1 和 2.2 帧各不相同。如果其中两帧相同，说明动效的某一部分没有运行。
适配： 文字不得超出其容器，并且在七个时间点均不得出现裁切。
静态画面： 暂停在 4.4 秒。单看这一帧时，也应能理解动效的要点。
品牌： 屏幕上的每种颜色和字体都必须来自 MOTION.md。

修复失败项，再次捕获画面，之后再向用户展示 2.2 秒和 4.4 秒帧以及文件路径。

Step 5: Export it

第五步：导出

Now turn effect.html into a video and a GIF I can post. Use tools already on this computer. If you need something that is not installed, stop and tell me what it is before you install anything. Load the page with ?render, call window.seek() for every frame at 30 frames per second (240 frames for 8 seconds), and encode an MP4 in H.264 at [SIZE]. Then make a GIF that loops forever. Show me three frames from the finished GIF so I can check it came out right.

HyperFrames (

npx skills add heygen-com/hyperframes

) does this in one step if it is installed.

现在将 effect.html 转换为可发布的视频和 GIF。使用本机已有的工具。如果需要使用尚未安装的工具，请先停止并告诉我具体是什么，再进行安装。使用 ?render 加载页面，以 30 帧/秒针对 8 秒内的每一帧（240 帧）调用 window.seek()，然后按 [SIZE] 编码为 H.264 MP4。再制作一个无限循环的 GIF。向我展示成品 GIF 中的三帧，以便我检查导出是否正确。

如果已经安装，HyperFrames（

npx skills add heygen-com/hyperframes

）可用一步完成此操作。

What I learned the hard way

吃过亏后总结的经验

"Make it premium" means one object changing shape. Every one of the 16 effects is a thing turning into another thing: a button into a player, bars into a line, a card into a window. A fade from one picture to another looks cheap every time.
The hold is where people actually look. 4.4 of the 8 seconds is the hold. If nothing moves in it, the loop feels dead. Each recipe keeps something small alive there: a progress bar, a cursor, a second wave of light.
A ghost of the start state sells the change. A faint outline left where the button or card began lets the eye follow the move. Without it the end state looks like it appeared from nowhere.
Stagger by a beat, not all at once. Rows, slats, letters and dots each start a fraction later than the last. Everything moving together reads as a slide transition.
Frame 0 drew in the wrong font. An embedded font does not load until something uses it, so the first frame can paint in a fallback. Load every font explicitly before the first
```
seek(0)
```
.
Scale it up, do not redraw it. An effect drawn with fixed coordinates ends up in one corner when you just change the canvas size. Scale the whole drawing to fill the frame instead.
A blank page is usually a name declared twice. Copying helpers between files duplicated a colour constant and stopped the whole script. Declare each name once, and paste the red console error back to Claude if the page is empty.
Eight seconds is too slow for a Reel cut. A full loop dropped into Instagram B-roll failed a motion check. Cut the active move (about 1.4 seconds of it) and use hold mode under narration.
Pick one unit for time and keep it. The exporter and the page must agree on seconds or milliseconds. This pack uses seconds everywhere.
Label made-up numbers on the frame. I made up every figure on my own board for the demo, so every effect carries an "example" label until real numbers go in.

“让它显得高级”意味着一个对象发生形变。 16 种动效中的每一种，都是一个事物变成另一个事物：按钮变成播放器、柱形变成线条、卡片变成窗口。每次都只做图片淡入淡出，看起来都会很廉价。
停留画面才是人们真正会看的地方。 8 秒中的 4.4 秒这一帧就是停留画面。如果其中没有任何东西运动，循环就会显得死气沉沉。每份配方都会让一个小元素在其中保持活力：进度条、光标，或第二道光波。
起始状态的残影能卖出变化感。 在按钮或卡片原来的位置留下淡淡轮廓，让眼睛能够追踪变化。没有它，终态看起来就像凭空出现。
错开一个节拍，不要全部同时运动。 行、条、字母和圆点应各自比前一个晚一点开始。全部同时运动会像幻灯片切换。
第 0 帧曾使用错误字体绘制。 嵌入字体在真正被使用前不会加载，因此第一帧可能用回退字体绘制。在第一次
```
seek(0)
```
之前显式加载所有字体。
进行缩放，而不是重绘。 使用固定坐标绘制的动效，在仅更改画布尺寸后会缩到一角。应缩放整个绘制内容以填满画面。
空白页面通常是因为名称声明了两次。 在文件之间复制辅助函数导致颜色常量重复，并使整个脚本停止。每个名称只声明一次；如果页面为空，把红色控制台错误贴回给 Claude。
8 秒对 Reel 剪辑来说太慢了。 将完整循环放进 Instagram B-roll 时未通过动效检查。应从完整循环中裁出约 1.4 秒的活动段，并在旁白下使用停留模式。
时间单位只用一种并保持一致。 导出程序和页面必须统一使用秒或毫秒。本套方案全程使用秒。
在画面上标注虚构数字。 我在自己的演示面板中编造了所有数据，因此在填入真实数字前，每个动效都带有“example”标签。

Hand off

交付

Give the user

effect.html

, the MP4 and the GIF, with the three checked frames. Then offer the next step in one line: another effect from the same group, or

reel-export

to turn it into a vertical Reel with safe-zone text.

向用户提供

effect.html

、MP4、GIF 以及三张已检查的画面。随后用一句话给出下一步选项：制作同一组中的另一个动效，或使用

reel-export

将其转换为带有安全区文字的竖版 Reel。