extreme-motion-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion Design

Produz vídeo de motion design por código, com áudio e verificação. O agente não enxerga o vídeo enquanto escreve código: por isso o fluxo mede antes de renderizar (

lint.py

), obriga a olhar frames renderizados e só entrega depois de um gate numérico (

qa.py

Caminhos são relativos à pasta desta skill (

<skill>

). Scripts com dependências declaram tudo inline (PEP 723): rode com

uv run <skill>/scripts/x.py

voice.py

lint.py

gl.py

usam só a biblioteca padrão e rodam com

python3

;

stills.cjs

roda com

node

na pasta do projeto.

通过代码制作 motion design 视频，并加入音频与验证。Agent 在编写代码时无法直接看到视频：因此，该流程会先执行测量再渲染（

lint.py

），要求检查已渲染的 frames，并且只有在通过数值 gate（

qa.py

）后才交付。

以下路径均相对于此 skill 所在的文件夹（

<skill>

）。依赖项通过 inline 声明（PEP 723）的脚本应使用

uv run <skill>/scripts/x.py

运行。

voice.py

、

lint.py

和

gl.py

仅使用标准库，可通过

python3

运行；

stills.cjs

在项目目录下通过

node

运行。

Fluxo obrigatório

强制流程

Brief em 5 linhas: objetivo, público, formato (16:9, 9:16, 1:1), duração, tom e marca (cores, fonte). Se faltar formato ou duração, assuma 16:9, 30 fps, 15 a 30 s, e diga o que assumiu.
Pergunta de voz (sempre): rode
```
python3 <skill>/scripts/voice.py
```
e faça ao usuário a pergunta que ele imprime, com as três opções: sem voz, voz com ElevenLabs (o script traz o passo a passo da chave) ou voz local (o script recomenda o modelo que cabe no hardware medido). Use a ferramenta de pergunta do agente quando existir, senão pergunte em texto, e espere a resposta. Não escolha pelo usuário. Só dispense quando o pedido já respondeu com todas as letras. Detalhes de cada caminho em
```
references/narration.md
```
.
Projeto: copie
```
<skill>/assets/template/
```
para a pasta do vídeo, renomeie
```
gitignore
```
para
```
.gitignore
```
(é ele que mantém o
```
.env
```
fora do git) e rode
```
npm install
```
. Mapa das primitivas em
```
references/template.md
```
.
Roteiro e voz primeiro (se houver voz): escreva o roteiro, gere o áudio pelo caminho escolhido e use os tempos reais das palavras. O áudio é o relógio; o visual se ajusta a ele, nunca o contrário.
Partitura: preencha
```
public/timeline.json
```
(duração, cenas, narração, trilha, eventos de SFX, loudness). Fronteiras de cena saem do início das frases. Vídeo, mixagem, lint e QA leem este mesmo arquivo.
Trilha e SFX:
```
music.py
```
(Incompetech, depois Openverse, depois geração local) e eventos de SFX na partitura. Todo arquivo baixado entra em
```
credits.json
```
. Detalhes em
```
references/audio.md
```
. Aprovação do áudio (com voz): rode
```
mix.py
```
e entregue
```
public/audio/mix.wav
```
para o usuário ouvir antes do render final. Pedido que muda só a voz refaz voz, partitura e mix e volta para o usuário ouvir, sem render e sem folha de contato, até a voz ser aprovada.
Direção antes de animar: leia
```
references/direction.md
```
e a doutrina (
```
references/doctrine.md
```
). Faça 3 a 5 styleframes com
```
stills.cjs --times
```
e olhe cada um antes de animar.
Cenas: construa com as primitivas do template. Leia só a referência da técnica que for usar (roteador abaixo).
Lint (antes de todo render):
```
python3 <skill>/scripts/lint.py
```
na pasta do projeto. Corrija todo FAIL; avalie cada WARN.
Dailies:
```
node <skill>/scripts/stills.cjs <Composição>
```
gera os frames de início, meio e fim de cada cena em um processo só, e
```
contact_sheet.py --stills out/stills
```
monta a folha sem precisar de MP4. OLHE a imagem, revise com o checklist de
```
references/qa.md
```
, corrija e repita até não haver FIX. Para ver vários frames nunca chame
```
remotion still
```
em laço: cada chamada refaz o bundle e abre outro browser.

Mixagem, render, entrega e gate:

bash

uv run <skill>/scripts/mix.py public/timeline.json
npx remotion render Showcase out/render.mp4 --codec=h264 --audio-codec=aac --color-space=bt709 $(python3 <skill>/scripts/gl.py Showcase)
uv run <skill>/scripts/deliver.py out/render.mp4 -o out/final.mp4
uv run <skill>/scripts/qa.py out/final.mp4 --profile youtube --timeline public/timeline.json --words public/audio/narration.words.json --stills out/stills
uv run <skill>/scripts/contact_sheet.py out/final.mp4 --timeline public/timeline.json -o out/sheet.png

gl.py

mede uma vez por projeto qual backend gráfico renderiza mais rápido com a mesma imagem e devolve a flag (ou nada).

deliver.py

copia o vídeo sem reencode quando o render já está certo.

--stills

faz o

qa.py

reprovar MP4 com contraste diferente dos stills. Só entregue com

qa.py

sem FAIL. Entregue o MP4, a folha de contato e o texto de créditos, e diga o que ficou em WARN.

Brief（5 行）：目标、受众、格式（16:9、9:16、1:1）、时长、基调和品牌（颜色、字体）。如果缺少格式或时长，则假设为 16:9、30 fps、15 至 30 秒，并说明所作的假设。
语音问题（始终必问）：运行
```
python3 <skill>/scripts/voice.py
```
，并向用户提出它输出的问题，同时提供三个选项：无语音、使用 ElevenLabs 配音（脚本会提供 API key 的配置步骤）或本地语音（脚本会根据检测到的硬件推荐合适的模型）。如果 Agent 具备问题工具，应使用该工具，否则以文本方式提问，并等待用户回复。不得代替用户选择。只有当请求中已经明确回答所有选项时，才可省略此步骤。各路径的详细信息见
```
references/narration.md
```
。
项目：将
```
<skill>/assets/template/
```
复制到视频文件夹中，将
```
gitignore
```
重命名为
```
.gitignore
```
（该文件用于确保
```
.env
```
不会进入 git），然后运行
```
npm install
```
。Primitives 映射见
```
references/template.md
```
。
先写脚本和配音（如有配音）：编写脚本，通过所选路径生成音频，并使用单词的实际时间数据。音频是时钟；视觉内容必须适应音频，而不能反过来。
编排表：填写
```
public/timeline.json
```
（时长、场景、narration、配乐、SFX 事件、loudness）。场景边界从短句开头划分。视频、混音、lint 和 QA 均读取此文件。
配乐和 SFX：使用
```
music.py
```
（先使用 Incompetech，再使用 Openverse，最后使用本地生成），并在编排表中填写 SFX 事件。每个下载的文件都应记录到
```
credits.json
```
中。详细信息见
```
references/audio.md
```
。 音频审批（使用配音时）：运行
```
mix.py
```
，并将
```
public/audio/mix.wav
```
交付给用户试听，确认后才能进行最终渲染。如果请求只修改语音，则重新生成语音、编排表和混音，并再次交给用户试听；在语音获得批准前，不进行渲染，也不生成 contact sheet。
先导演，后动画：阅读
```
references/direction.md
```
和运动准则（
```
references/doctrine.md
```
）。使用
```
stills.cjs --times
```
制作 3 至 5 个 styleframes，并在制作动画前逐一查看。
场景：使用模板中的 primitives 构建场景。仅阅读将要使用的技术所对应的参考文档（见下方路由表）。
Lint（每次渲染前）：在项目文件夹中运行
```
python3 <skill>/scripts/lint.py
```
。修复所有 FAIL，并评估每个 WARN。
Dailies：运行
```
node <skill>/scripts/stills.cjs <Composição>
```
，在同一个进程中生成每个场景的开头、中间和结尾 frames；然后运行
```
contact_sheet.py --stills out/stills
```
，无需生成 MP4 即可制作 contact sheet。务必查看图像，使用
```
references/qa.md
```
中的 checklist 进行审查，修正问题并重复此过程，直到不再存在 FIX。需要查看多个 frames 时，绝不要循环调用
```
remotion still
```
：每次调用都会重新打包 bundle 并打开另一个 browser。

混音、渲染、交付与 gate：

bash

uv run <skill>/scripts/mix.py public/timeline.json
npx remotion render Showcase out/render.mp4 --codec=h264 --audio-codec=aac --color-space=bt709 $(python3 <skill>/scripts/gl.py Showcase)
uv run <skill>/scripts/deliver.py out/render.mp4 -o out/final.mp4
uv run <skill>/scripts/qa.py out/final.mp4 --profile youtube --timeline public/timeline.json --words public/audio/narration.words.json --stills out/stills
uv run <skill>/scripts/contact_sheet.py out/final.mp4 --timeline public/timeline.json -o out/sheet.png

gl.py

每个项目测量一次在生成相同图像时哪个图形 backend 渲染速度更快，并返回相应的 flag（或不返回 flag）。如果渲染结果已经正确，

deliver.py

会在不重新编码的情况下复制视频。

--stills

会使

qa.py

在 MP4 的对比度与 stills 不一致时判定失败。只有当

qa.py

没有 FAIL 时才能交付。最终应交付 MP4、contact sheet 和 credits 文本，并说明仍处于 WARN 状态的项目。

Regras inegociáveis

不可妥协的规则

Todo estado visual deriva de
```
useCurrentFrame()
```
. Proibido: transição ou animação CSS, classes
```
animate-*
```
,
```
setTimeout
```
,
```
Date.now()
```
,
```
Math.random()
```
(use
```
random(seed)
```
),
```
useFrame()
```
do React Three Fiber. Senão o render pisca ou diverge do preview.
```
lint.py
```
reprova.
Curvas e springs só dos tokens de
```
src/lib/motion.ts
```
: entrada
```
enter
```
ou
```
sharp
```
, saída
```
exit
```
, mudança de posição ou forma
```
move
```
, zoom out e reveal
```
settle
```
, herói da cena
```
easeX.emphasized
```
,
```
linear
```
só para rotação contínua e loops. Nunca
```
bounce
```
ou
```
elastic
```
. Overshoot é um só (
```
easeX.overshoot
```
ou
```
springs.snappy
```
) e só no elemento em foco.
Uma ação primária por vez; secundárias de até 30% da amplitude e ambiente de até 5%. Stagger total até 500 ms. Saída dura cerca de 75% da entrada. Primeira animação começa 0,1 a 0,3 s depois do corte. Depois de cada chegada, hold de 0,4 a 0,8 s; pausa de 0,3 a 0,75 s antes do clímax.
Texto fica na tela pelo menos 1,5 s + 0,3 s por palavra e no máximo 17 caracteres por segundo em pt-BR. No máximo 2 linhas de 32 a 42 caracteres.
Safe area: ação dentro de 90% do quadro, texto dentro de 80%. Em 9:16 (1080x1920), texto entre y 360 e 1420.
Motion blur só em 1 a 3 batidas rápidas por vídeo, nunca em texto que precisa ser lido.
Nada com cara de gerado por IA: sem gradiente roxo de tela cheia, sem tudo entrando com fade, sem glow genérico, sem emoji, sem tudo centralizado. Uma cor de acento, contraste WCAG AA.
Nenhum número, logo ou fato inventado na tela. Dado do usuário ou com fonte.
Trilha só com licença
```
cc0
```
,
```
pdm
```
ou
```
by
```
(ou gerada). Nunca
```
nd
```
,
```
sa
```
,
```
nc
```
, sampling+ ou licença desconhecida.
Chave de API nunca entra no chat, em comando, em log ou em arquivo versionado. O usuário grava no
```
.env
```
do projeto.

所有视觉状态都必须派生自
```
useCurrentFrame()
```
。禁止使用：CSS transition 或 animation、
```
animate-*
```
classes、
```
setTimeout
```
、
```
Date.now()
```
、
```
Math.random()
```
（应使用
```
random(seed)
```
）以及 React Three Fiber 的
```
useFrame()
```
。否则，渲染结果会闪烁或与 preview 不一致。
```
lint.py
```
会判定失败。
曲线和 springs 只能使用
```
src/lib/motion.ts
```
中的 tokens：入场使用
```
enter
```
或
```
sharp
```
，退场使用
```
exit
```
，位置或形状变化使用
```
move
```
，zoom out 和 reveal 使用
```
settle
```
，场景 hero 使用
```
easeX.emphasized
```
；
```
linear
```
仅用于持续旋转和 loops。绝不使用
```
bounce
```
或
```
elastic
```
。Overshoot 只能使用一种（
```
easeX.overshoot
```
或
```
springs.snappy
```
），并且只能应用于焦点元素。
每次只执行一个主要动作；次要动作的幅度最多为 30%，环境元素的幅度最多为 5%。总 Stagger 不得超过 500 ms。退场时长约为入场时长的 75%。首个动画应在剪切后 0.1 至 0.3 秒开始。每次元素到位后，应保持 0.4 至 0.8 秒；在 clímax 前停顿 0.3 至 0.75 秒。
文本在屏幕上的停留时间至少为 1.5 秒加每个单词 0.3 秒，在 pt-BR 中每秒最多显示 17 个字符。最多 2 行，每行 32 至 42 个字符。
Safe area：动作必须位于画面的 90% 区域内，文本必须位于 80% 区域内。在 9:16（1080x1920）格式中，文本应位于 y 360 至 y 1420 之间。
Motion blur 每个视频只能用于 1 至 3 个快速节拍，绝不能用于需要阅读的文本。
不得呈现明显的 AI 生成风格：禁止全屏紫色渐变、禁止所有元素都以 fade 入场、禁止通用 glow、禁止 emoji，也禁止将所有元素居中。使用一种 accent color，并达到 WCAG AA 对比度。
屏幕上不得出现任何虚构的数字、logo 或事实。所有信息必须来自用户或注明来源。
配乐只能使用
```
cc0
```
、
```
pdm
```
或
```
by
```
授权，或由本地生成。绝不使用
```
nd
```
、
```
sa
```
、
```
nc
```
、
```
sampling+
```
或授权不明的音乐。
API key 绝不能出现在聊天内容、命令、日志或已纳入版本控制的文件中。API key 应由用户保存在项目的
```
.env
```
中。

Roteador de técnicas

技术路由表

Técnica	Referência	Primitiva ou script
Keyframing, motion smooth, easing, springs	`references/techniques-motion.md`	`keys()` , `tween()` , `pop()` , `springs`
Zoom in, zoom out, push-in, pan, whip pan, parallax, câmera na mão	`references/techniques-motion.md`	`<Camera>` , `<Layer depth>` , `wiggle()`
Motion graphics (formas, linhas, dados, logo)	`references/techniques-motion.md`	`shapes.ts` , `strokeDashoffset` , `@remotion/shapes`
Kinetic typography	`references/techniques-motion.md`	`<KineticWords>` com `narration.words.json`
Morphing	`references/techniques-motion.md`	`morphPath()` (flubber)
Seamless loop	`references/techniques-motion.md`	`loopPhase()` , `loopNoise()` , `qa.py --loop`
UX/UI motion e microinterações	`references/techniques-motion.md`	`springs.snappy` , cursor em arco, ripple
Antecipação, overshoot, follow-through, squash e stretch, smear	`references/techniques-advanced.md`	`anticipate()` , `easeX` , `lag()` , `squash()` , `smear()`
Cascata, speed ramp, time remap, curva de velocidade	`references/techniques-advanced.md`	`cascade()` , `timeRemap()` , `velocity()`
Match cut, morph cut, corte invisível, J-cut e L-cut, íris, transição por forma e líquida	`references/techniques-advanced.md`	`<IrisReveal>` , `<GooeyFilter>` , `@remotion/transitions`
Mattes, trim paths, repeater, baseline reveal, contador, eco, shine, look de lente	`references/techniques-advanced.md`	`<MaskReveal>` , `ticker()` , `<Echo>` , `<Shine>` , `<Grain>`
Frame a frame, cel animation, stop motion	`references/techniques-character.md`	`stepped()` , `<BoilFilter>` , `jitter()`
Rigging, IK, lip sync	`references/techniques-character.md`	`twoBoneIK()` , `fabrik()` , `forwardKinematics()` , `visemeFor()`
Motion 3D	`references/techniques-3d-compositing.md`	`@remotion/three` + `<ThreeCanvas>`
Compositing	`references/techniques-3d-compositing.md`	blend modes, máscaras, `<Grain>` , chroma key
Motion tracking	`references/techniques-3d-compositing.md`	`scripts/track.py` + `<Tracked>`
Match moving	`references/techniques-3d-compositing.md`	`track.py --quad` + `<CornerPin>` , `scripts/matchmove.py`
Rotoscopia	`references/techniques-3d-compositing.md`	`scripts/roto.py` (PNG com alfa ou contornos SVG)

Direção e estrutura de batidas (

references/direction.md

), voz (

references/narration.md

), áudio (

references/audio.md

), QA e entrega (

references/qa.md

), doutrina de movimento (

references/doctrine.md

), mapa do template (

references/template.md

技术	参考文档	Primitive 或脚本
Keyframing、motion smooth、easing、springs	`references/techniques-motion.md`	`keys()` 、 `tween()` 、 `pop()` 、 `springs`
Zoom in、zoom out、push-in、pan、whip pan、parallax、手持镜头	`references/techniques-motion.md`	`<Camera>` 、 `<Layer depth>` 、 `wiggle()`
Motion graphics（形状、线条、数据、logo）	`references/techniques-motion.md`	`shapes.ts` 、 `strokeDashoffset` 、 `@remotion/shapes`
Kinetic typography（动态排版）	`references/techniques-motion.md`	`<KineticWords>` 与 `narration.words.json`
Morphing	`references/techniques-motion.md`	`morphPath()` （flubber）
Seamless loop（无缝循环）	`references/techniques-motion.md`	`loopPhase()` 、 `loopNoise()` 、 `qa.py --loop`
UX/UI motion 与 microinteractions	`references/techniques-motion.md`	`springs.snappy` 、弧线 cursor、ripple
Anticipation、overshoot、follow-through、squash and stretch、smear	`references/techniques-advanced.md`	`anticipate()` 、 `easeX` 、 `lag()` 、 `squash()` 、 `smear()`
Cascade（级联）、speed ramp、time remap、速度曲线	`references/techniques-advanced.md`	`cascade()` 、 `timeRemap()` 、 `velocity()`
Match cut、morph cut、无痕剪切、J-cut 和 L-cut、iris、shape transition 和 liquid transition	`references/techniques-advanced.md`	`<IrisReveal>` 、 `<GooeyFilter>` 、 `@remotion/transitions`
Mattes、trim paths、repeater、baseline reveal、counter、echo、shine、镜头质感	`references/techniques-advanced.md`	`<MaskReveal>` 、 `ticker()` 、 `<Echo>` 、 `<Shine>` 、 `<Grain>`
Frame a frame、cel animation、stop motion	`references/techniques-character.md`	`stepped()` 、 `<BoilFilter>` 、 `jitter()`
Rigging、IK、lip sync	`references/techniques-character.md`	`twoBoneIK()` 、 `fabrik()` 、 `forwardKinematics()` 、 `visemeFor()`
Motion 3D	`references/techniques-3d-compositing.md`	`@remotion/three` + `<ThreeCanvas>`
Compositing	`references/techniques-3d-compositing.md`	blend modes、masks、 `<Grain>` 、chroma key
Motion tracking	`references/techniques-3d-compositing.md`	`scripts/track.py` + `<Tracked>`
Match moving	`references/techniques-3d-compositing.md`	`track.py --quad` + `<CornerPin>` 、 `scripts/matchmove.py`
Rotoscopia	`references/techniques-3d-compositing.md`	`scripts/roto.py` （带 alpha 的 PNG 或 SVG 轮廓）

导演与节拍结构（

references/direction.md

）、语音（

references/narration.md

）、音频（

references/audio.md

）、QA 与交付（

references/qa.md

）、运动准则（

references/doctrine.md

）以及模板映射（

references/template.md

）。

Comandos de voz e áudio

语音与音频命令

bash

python3 <skill>/scripts/voice.py                                   # mede o hardware e monta a pergunta de voz
python3 <skill>/scripts/voice.py --check-key                       # valida a chave da ElevenLabs sem gastar
python3 <skill>/scripts/voice.py --audition "Primeira frase." -o out/vozes   # mesma frase em cada voz local
uv run <skill>/scripts/tts.py roteiro.txt -o public/audio/narration --voice pf_dora --speed 0.92     # Kokoro local
uv run <skill>/scripts/tts.py roteiro.txt -o public/audio/narration --provider elevenlabs --voice <voice_id>
uv run <skill>/scripts/align.py public/audio/narration.wav roteiro.txt    # tempos por palavra para qualquer WAV
uv run <skill>/scripts/tts.py --normalize-only "Plano de R$ 49,90 às 14h30 com IA"                  # confira a pronúncia
uv run <skill>/scripts/music.py incompetech --feel calm --bpm 70-110 --min-sec 60 -o public/audio/music.mp3
uv run <skill>/scripts/music.py generate --sec 30 --bpm 84 --mood calm -o public/audio/music.wav    # offline
uv run <skill>/scripts/beats.py public/audio/music.mp3 --fps 30                                   # cortes na batida
uv run <skill>/scripts/sfx.py --all public/audio/sfx                                              # whoosh, pop, click...

bash

python3 <skill>/scripts/voice.py                                   # mede o hardware e monta a pergunta de voz
python3 <skill>/scripts/voice.py --check-key                       # valida a chave da ElevenLabs sem gastar
python3 <skill>/scripts/voice.py --audition "Primeira frase." -o out/vozes   # mesma frase em cada voz local
uv run <skill>/scripts/tts.py roteiro.txt -o public/audio/narration --voice pf_dora --speed 0.92     # Kokoro local
uv run <skill>/scripts/tts.py roteiro.txt -o public/audio/narration --provider elevenlabs --voice <voice_id>
uv run <skill>/scripts/align.py public/audio/narration.wav roteiro.txt    # tempos por palavra para qualquer WAV
uv run <skill>/scripts/tts.py --normalize-only "Plano de R$ 49,90 às 14h30 com IA"                  # confira a pronúncia
uv run <skill>/scripts/music.py incompetech --feel calm --bpm 70-110 --min-sec 60 -o public/audio/music.mp3
uv run <skill>/scripts/music.py generate --sec 30 --bpm 84 --mood calm -o public/audio/music.wav    # offline
uv run <skill>/scripts/beats.py public/audio/music.mp3 --fps 30                                   # cortes na batida
uv run <skill>/scripts/sfx.py --all public/audio/sfx                                              # whoosh, pop, click...

Quando parar e perguntar

何时停止并询问

A pergunta de voz do passo 2.
Logo, marca, número ou depoimento que o usuário não forneceu.
Antes de gastar em API paga (voz, música): diga o tamanho do roteiro em caracteres e espere o sim.
Trilha com licença diferente de cc0, pdm ou by.
Empresa do usuário com mais de 3 pessoas usando Remotion: avise da Company License.

第 2 步中的语音问题。
用户未提供的 logo、品牌、数字或证言。
在产生付费 API 费用（语音、音乐）之前：告知脚本的字符数并等待用户确认。
配乐授权不属于
```
cc0
```
、
```
pdm
```
或
```
by
```
。
用户所在公司有超过 3 人使用 Remotion：提醒其注意 Company License。