motionforge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

MotionForge — motion graphic web yang bukan PPT

MotionForge — 不是 PPT 的网页 motion graphic

v1.0.0 · MotionForge fork based on Bang Motion by Bang Tutorial · MIT. Riwayat perubahan ada di repo MotionForge; cara pasang ada di

README.md

Skill ini untuk AI coding agent apa pun (format Agent Skills terbuka). Isinya hukum dan resep untuk motion graphic yang bergerak seperti video, bukan presentasi — patuhi sebelum menulis kode.

v1.0.0 · MotionForge 基于 Bang Motion by Bang Tutorial 的 fork · MIT. 变更历史位于 MotionForge repo；安装方式见

README.md

。

此 skill 适用于任何 AI coding agent（采用开放的 Agent Skills 格式）。其中包含让 motion graphic 像视频一样运动、而非像演示文稿一样运动的规则和配方—— 写代码前必须遵守。

Prasyarat — hanya browser

前提 — 只需浏览器

Deliverable (

index.html

) hanya butuh browser modern + internet untuk CDN (GSAP, font). Python dan Node opsional, dipakai hanya untuk alat kerja:

scripts/serve.py

(server no-cache, cuma perlu bila memakai module lokal), puppeteer (snapshot/verifikasi otomatis,

scripts/export-frames.mjs

→ MP4). Kalau user tidak punya keduanya: (1) tetap bangun satu-berkas, buka lewat klik dua kali; (2) verifikasi visual lewat

?debug=1

(panel scrub) dan screenshot manual per detik kunci; (3) MP4 lewat rekam layar (OBS / rekam tab browser) — jelaskan bahwa hasil rekam layar bisa drop frame, dan render frame-by-frame butuh Node. Jangan pernah membuat deliverable yang butuh

npm install

untuk DITONTON.

ffmpeg juga opsional. Cek dulu (

ffmpeg -version

); bila tidak ada:

Kebutuhan	Dengan ffmpeg	Tanpa ffmpeg
Sinkron VO (batas kalimat/paragraf)	`silencedetect`	`scripts/vo-pauses.html` — buka di browser, pilih audio, salin `SEG` / `PARA` ; hasilnya sama persis (Web Audio, tanpa instal)
Durasi/format audio	`ffprobe`	angka `DUR` dari vo-pauses.html; browser memutar wav/mp3/m4a/ogg langsung
Export MP4	gabung PNG dari export-frames.mjs	tidak ada MP4 — tawarkan instal satu perintah ( `winget install Gyan.FFmpeg` / `brew install ffmpeg` ) atau rekam layar
Mempelajari video referensi (ekstrak frame)	`fps=` + `tile=`	minta user mengirim screenshot di detik kunci, atau buka videonya di browser dan potret pada detik tertentu

Tanpa ffmpeg alur explainer tetap lengkap sampai sinkron VO; hanya MP4 yang butuh instalasi.

交付物（

index.html

）只需要现代浏览器，以及访问 CDN（GSAP、字体）所需的互联网连接。 Python 和 Node 均为可选项，仅用于工作流工具：

scripts/serve.py

（no-cache server，仅在使用本地 module 时需要）， puppeteer（自动 snapshot/验证，

scripts/export-frames.mjs

→ MP4）。如果用户没有这两项工具：(1) 仍构建单文件交付物，通过双击打开；(2) 使用

?debug=1

（scrub 面板）和关键秒数的手动 screenshot 进行视觉验证；(3) 通过屏幕录制（OBS／浏览器标签页录制）生成 MP4——需要说明屏幕录制结果可能丢帧，而逐帧渲染需要 Node。绝不能让交付物在观看时依赖

npm install

。

ffmpeg 同样为可选项。 首先检查（

ffmpeg -version

）；如果不存在：

需求	使用 ffmpeg	不使用 ffmpeg
VO 同步（按句子／段落边界）	`silencedetect`	`scripts/vo-pauses.html` — 在浏览器中打开，选择音频，复制 `SEG` ／ `PARA` ；结果完全相同（Web Audio，无需安装）
音频时长／格式	`ffprobe`	vo-pauses.html 中的 `DUR` 数值；浏览器可直接播放 wav／mp3／m4a／ogg
导出 MP4	合并 export-frames.mjs 生成的 PNG	不生成 MP4 — 可提议安装单条命令（ `winget install Gyan.FFmpeg` ／ `brew install ffmpeg` ），或使用屏幕录制
研究参考视频（提取帧）	`fps=` + `tile=`	要求用户在关键秒数提供 screenshot，或在浏览器中打开视频并截取指定时刻

没有 ffmpeg 时，explainer 流程仍可完整执行到 VO 同步阶段；只有 MP4 导出需要安装。

Player — tidak ada, autoplay, loop

Player — 无播放器、自动播放、循环

Default deliverable: tanpa panel/player apa pun di layar, langsung memutar saat dibuka, dan mengulang dari awal saat selesai (

onComplete → play(0)

; bila ada suara, audio ikut diulang). Kontrol tersembunyi: R ulang, Space jeda. Panel scrub/jam hanya muncul dengan

?debug=1

(alat review), dan

?clean=1

menahan autoplay untuk export. Ada suara? Coba

play()

langsung; bila diblokir browser, tahan di frame 0 dan mulai pada klik pertama — tanpa teks "ketuk untuk mulai". Ini sudah tertanam di kedua starter.

默认交付物：屏幕上不显示任何面板／播放器，打开后立即播放，并在播放结束后从头重复（

onComplete → play(0)

；如有声音，音频也会一同重复）。隐藏控制：R 重新播放，Space 暂停。scrub／时钟面板仅在

?debug=1

时出现（用于审阅），

?clean=1

则会暂停 autoplay 以供导出。如果存在声音，先尝试直接调用

play()

；如果浏览器将其阻止，则停留在第 0 帧，并在首次点击时开始播放——不显示“点击开始”之类的文字。两个 starter 中均已内置此机制。

Larangan struktural — uji PPT yang bisa diperiksa mekanis

结构性禁令 — 可机械检查的 PPT 测试

Model lain (dan kamu, bila lelah) akan jatuh ke pola ini walau sudah membaca hukum di bawah. Sebelum menyerahkan, cek KODE, bukan perasaan:

```
grep -c "class=\"scene\"\|<section" index.html
```
— bila ≥ 3 adegan berupa
```
<section>
```
yang dinyalakan-dimatikan dengan
```
autoAlpha
```
/opacity → itu slide deck. Adegan harus berganti karena DUNIA/KAMERA bergerak (kamera bergerak, whip ke sudut lain, push-through, latar berganti), bukan karena section di-fade. Pengecualian yang sah: kartun panggung (
```
references/kartun-panggung.md
```
) memakai cut/geser 96 px antar panggung — boleh, karena tiap panggung hidup penuh (≥10 benda beraksi), bukan gambar diam yang di-fade.
Ada benang merah visual yang bertahan: satu subjek (aksi kontinu) ATAU satu dunia kolase/kertas/putih yang disusuri kamera (kartun, foto, katalog, sketsa). Foto full-bleed berganti-ganti tanpa dunia bersama → PPT. Satu gambar + satu kalimat per adegan, berganti tiap adegan → tetap slideshow walau kameranya bergerak: tiap adegan 3–5 elemen yang masuk bertahap per frasa (explainer.md "Satu adegan = 3–5 elemen").
Per adegan hitung node teks: eyebrow/kicker + judul + body/kredit = 3 tingkat → PPT. Maksimum dua: satu angka/kalimat besar + satu label dunia. Dokumen/stempel/blok tanggal berisi ≤ 3 baris pendek dihitung objek, bukan tingkat teks.
Ken Burns (scale 1.0→1.05 pada foto) sebagai satu-satunya gerak → PPT. Gerak tiap detik harus datang dari BAHASA GERAK LATAR yang dipilih di style brief dari menu
```
techniques.md
```
§7c (kamera bernapas di latar bertekstur, gradien berpindah, blob mengambang, grain hidup, sapuan cahaya per segmen, bentuk besar berputar lambat, partikel naik, grid bernapas, teks hantu bergeser, Ken Burns + parallax…). Batang/garis/ potongan yang melintas ke samping ("lane", "range", "streak", hujan partikel horizontal) SUDAH dipakai dua proyek berturut-turut dengan nama berbeda — itu bukan default; hanya bila tema memang kecepatan/aliran, dan tidak boleh dua proyek berturut-turut.
Transisi hanya fade + scale bump + light leak di semua cut → template PPT. Whip ke sudut lain, cut ke instrumen (peta/speedometer/profil), push-through.
Explainer dimulai dari starter GAYANYA:
```
starter-explainer-kartun
```
,
```
-jurnalisme
```
,
```
-katalog
```
,
```
-sketsa
```
(mode kolase: kamera menyusuri aset diam),
```
starter-explainer
```
(aksi kontinu: dunia mengalir), atau
```
starter-explainer-panggung
```
(kartun panggung: satu panggung per adegan, rig sendi, kamera hanya di dalam panggung). Yang kolase satu rig; yang panggung rignya lain. BUKAN dari
```
assets/starter-opener.html
```
(opener teks), dan bukan dari nol.
Miniatur adalah slide. Kamera zoom < 1,08 sehingga rumah sebesar ibu jari dan tanah kosong mengisi separuh layar → PPT walau semua bergerak. Dunia dipecah jadi panggung seukuran frame, bukan satu peta besar yang dijelajahi (
```
kartun-panggung.md
```
Hukum 1).
Kerangka template (opener/promo). Cek rundown dan kode: adegan pertama berupa teks yang diperbesar lalu keluar ke kiri; tiga tile/kartu fitur sejajar; kotak input/searchbar yang diketik; urutan hook → fitur → fitur → janji → logo → CTA. Dua atau lebih tanpa tuntutan konsep → template, walau kulitnya baru. Pilih ulang kerangka dari
```
references/opener-konsep.md
```
.

Gagal satu poin saja → rombak sebelum ditunjukkan ke user.

其他模型（以及疲惫时的你）即使读过下面的规则，也很容易落入这种模式。交付前请检查代码，而不是感觉：

```
grep -c "class=\"scene\"\|<section" index.html
```
— 如果有 ≥ 3 个通过
```
autoAlpha
```
／opacity 开关显示的
```
<section>
```
场景，那么它就是 slide deck。场景切换必须源于世界／相机运动（相机移动、whip 至另一角、push-through、背景变化），而不是 section 淡入淡出。合法例外是：舞台卡通（
```
references/kartun-panggung.md
```
）在舞台之间使用 cut／平移 96 px——这是允许的，因为每个舞台都充满活力（≥ 10 个运动物体），而不是淡入淡出的静态图片。
必须存在贯穿始终的视觉线索：一个持续行动的主体，或者一个由相机穿行的拼贴／纸张／白色世界（卡通、照片、目录、草图）。如果全屏照片在没有共同世界的情况下不断切换，就是 PPT。如果每个场景只有一张图加一句话并不断切换，即使相机在移动，仍然是 slideshow：每个场景应按短语依次进入 3–5 个元素（
```
explainer.md
```
“一个场景 = 3–5 个元素”）。
按场景统计文本节点：eyebrow／kicker + 标题 + 正文／署名 = 3 个层级，因此属于 PPT。最多只能有两个：一个醒目的数字／句子，加一个世界标签。包含 ≤ 3 行短文本的文档／印章／日期块视为一个物体，而不是文本层级。
如果唯一运动是 Ken Burns（照片 scale 1.0→1.05），就是 PPT。每一秒的运动都必须来自 style brief 中从
```
techniques.md
```
§7c 菜单选定的背景运动语言（纹理背景上呼吸的相机、渐变位移、漂浮 blob、活性 grain、逐段光束扫过、缓慢旋转的大形状、上升粒子、呼吸网格、幽灵文字位移、Ken Burns + parallax……）。横向掠过的杆／线／切片（“lane”、“range”、“streak”、水平粒子雨）已经在两个连续项目中以不同名称使用过——不能作为默认效果；只有主题确实是速度／流动时才可使用，而且不能连续两个项目都采用。
如果所有 cut 都只使用 fade + scale bump + light leak，就是 PPT 模板。应使用 whip 至另一角、cut 至某个视觉工具（地图／速度计／剖面图）、push-through 等方式。
Explainer 必须从对应风格的 starter 开始：
```
starter-explainer-kartun
```
、
```
-jurnalisme
```
、
```
-katalog
```
、
```
-skeska
```
（拼贴模式：相机浏览静态资产）、
```
starter-explainer
```
（连续动作：世界持续流动），或
```
starter-explainer-panggung
```
（舞台卡通：每个场景一个舞台、关节 rig、相机只在该舞台内部移动）。拼贴模式使用一个 rig；舞台模式的 rig 则不同。不能从
```
assets/starter-opener.html
```
（opener 文字）开始，也不能从零开始。
缩略图就是 slide。 如果相机 zoom < 1.08，导致房子只有拇指大小且空旷地面占据半个画面，那么即使所有元素都在运动，仍然是 PPT。世界应被拆分为与画框同尺寸的舞台，而不是绘制成一张供相机探索的大地图（
```
kartun-panggung.md
```
规则 1）。
模板骨架（opener／promo）。 检查 rundown 和代码：首个场景是放大后向左退出的文字；三个横向对齐的功能 tile／卡片；带输入的 searchbar；顺序为 hook → 功能 → 功能 → 承诺 → logo → CTA。如果没有概念要求，却使用其中两项或更多，就是模板，即使更换了外观。必须从
```
references/opener-konsep.md
```
重新选择骨架。

只要有一项失败，就在展示给用户前重新制作。

Jenis pekerjaan yang dicakup

涵盖的工作类型

Skill ini untuk motion graphic web secara UMUM. Explainer hanya salah satu jenis — ia punya dokumen sendiri karena strukturnya beda, bukan karena ia yang utama.

Starter dinamai menurut kategorinya:

starter-opener.html

untuk opener, promo, bumper, intro, dan kinetic typography;

starter-explainer-*.html

untuk explainer, dengan akhiran mode/gaya (

-kartun

-jurnalisme

-katalog

-sketsa

= kolase; tanpa akhiran = aksi kontinu;

-panggung

= kartun panggung). Kartun panggung adalah mode explainer (gaya 6), bukan kategori sendiri: tujuannya tetap menjelaskan dengan VO, yang berbeda hanya cara produksinya.

Jenis	Durasi lazim	Ciri	Resep
Opener / promo produk	25–40 dtk	satu konsep dari menu (kerangka lahir dari produk, bukan urutan baku), satu momen istimewa, penutup brand	`references/opener-konsep.md` + alur kerja di bawah + `references/techniques.md`
Bumper / ident / logo sting	3–8 dtk	logo build-on, satu gerak tanda tangan, selesai sebelum penonton sadar	`techniques.md` (logo build-on, light leak)
Intro / outro kanal	5–12 dtk	nama kanal + tanda tangan gerak yang sama tiap episode	alur kerja di bawah
Kinetic typography / lirik	15–60 dtk	teks adalah subjek; split per kata/huruf; ritme mengikuti audio	`techniques.md` (split + blur berarah, pan 3D per kata)
Title / lower third / bumper segmen	2–6 dtk	elemen kecil di atas footage, masuk-keluar bersih, latar transparan	`techniques.md`
Explainer / video penjelasan	30–90 dtk	fakta bersumber, entitas tampil, sudut pandang berganti, lima gaya	`references/explainer.md` + starter per gaya

此 skill 面向通用的网页 motion graphic。Explainer 只是其中一种类型——它拥有独立文档，是因为自身结构不同，并不意味着它是主要类型。

Starter 按类别命名：

starter-opener.html

用于 opener、promo、bumper、intro 和 kinetic typography；

starter-explainer-*.html

用于 explainer，末尾标识模式／风格（

-kartun

、

-jurnalisme

、

-katalog

、

-sketsa

= 拼贴；无后缀 = 连续动作；

-panggung

= 舞台卡通）。舞台卡通是一种 explainer 模式（风格 6），不是独立类别：其目标仍是配合 VO 进行讲解，只是制作方式不同。

类型	常见时长	特征	配方
Opener／产品 promo	25–40 秒	从菜单中选择一个概念（骨架源于产品，而非固定顺序），包含一个特别时刻，以品牌收尾	`references/opener-konsep.md` + 下述工作流 + `references/techniques.md`
Bumper／ident／logo sting	3–8 秒	logo build-on、一种标志性动作，在观众意识到之前结束	`techniques.md` （logo build-on、light leak）
频道 intro／outro	5–12 秒	频道名称 + 每集相同的标志性动作	下述工作流
Kinetic typography／歌词	15–60 秒	文字成为主体；按单词／字母拆分；节奏跟随音频	`techniques.md` （split + 方向性 blur、逐词 3D pan）
Title／lower third／段落 bumper	2–6 秒	简洁地进入／退出 footage 顶部的小元素，背景透明	`techniques.md`
Explainer／解说视频	30–90 秒	有来源的事实、实体呈现、视角变化、五种风格	`references/explainer.md` + 对应风格的 starter

Explainer dan karakter: baca sebelum menentukan shot

Explainer 与角色化 — 确定 shot 前必读

Untuk explainer kartun edukasi flat berkarakter (gaya keenam, kartun panggung), atau revisi yang terasa seperti slideshow/miniatur, baca

references/kartun-panggung.md

: satu panggung per adegan, zoom 1,08–1,95, kontinu di dalam panggung dan cut/geser 96 px di antaranya, rig sendi dengan transform manual, nol caption, palet flat cerah. Bedakan kalimat, beat visual, framing, dan pergantian panggung. Untuk membangunnya langsung di After Effects, baca

references/ae-bridge-higgsfield.md

. Pedoman khusus explainer ini memperjelas aturan opener di bawah; contoh font, jumlah scene, dan efek bukan resep universal.

对于角色化平面教育卡通 explainer（风格 6，舞台卡通），或看起来仍像 slideshow／缩略图的修订版本，请阅读

references/kartun-panggung.md

：每个场景一个舞台，zoom 1.08–1.95，舞台内部保持连续运动，舞台之间使用 cut／平移 96 px，通过手动 transform 制作关节 rig，无 caption，使用明亮平面色板。区分句子、视觉 beat、framing 和舞台切换。若要直接在 After Effects 中构建，请阅读

references/ae-bridge-higgsfield.md

。这些 explainer 专用规则会进一步明确下方 opener 规则；字体、scene 数量和效果示例并非通用配方。

Hukum #1 — Ini video, bukan slide

规则 #1 — 这是视频，不是 slide

Penyakit paling umum: model menyusun adegan seperti slide — judul + sub-judul

body copy + deretan badge. Itu langsung terbaca "PPT" dan akan ditolak.

Aturan kerasnya:

Untuk opener: satu kalimat pendek + maksimal satu objek utama per adegan. Tidak ada kicker ("01 — FITUR"), sub-judul, paragraf keterangan, chip/badge fitur, atau metadata teknis (nama package, URL panjang). Chip, tombol, dan label yang merupakan bagian UI produk yang sedang dipakai tidak termasuk.
Informasi baru = respons visual baru. Pada explainer, ubah keadaan/aksi di dunia yang sama bila masih berhubungan; pergantian kalimat tidak wajib mengganti shot.
Daftar poin diganti visual, bukan otomatis tiga tile. Pilih cara dari menu fitur di
```
references/opener-konsep.md
```
(satu fitur didemokan, kata berganti, objek bertransformasi, kartu dikocok, grid tile…); dua opener berturut-turut tidak memakai cara yang sama.
Adegan harus hidup. Kamera boleh menetap saat objek membawa aksi. Gerakkan kamera untuk mengikuti atau mengungkap sesuatu; jangan mengandalkan teks fade/slide di atas latar diam, atau pan/zoom berulang di semua segmen.
"Zoom in-out" = ukuran shot, bukan napas kamera. Bila video terasa statis atau user meminta zoom, kamera mendekat ke elemen yang sedang bercerita (medium close-up / close-up) lalu mundur ke wide mengikuti ketukan isi; napas beberapa persen hampir tak terlihat (
```
techniques.md
```
§3b).

Baca

references/anti-ppt.md

SEBELUM mendesain adegan — berisi daftar pelanggaran nyata beserta perbaikannya.

最常见的问题是：模型把场景构造成 slide——标题 + 副标题 + body copy + 一排 badge。这会立刻显得像“PPT”，并被拒绝。

硬性规则：

对于 opener：每个场景最多只有一句短句 + 一个主要对象。 不允许 kicker（“01 — FITUR”）、副标题、说明段落、功能 chip／badge 或技术元数据（package 名称、长 URL）。正在使用的产品 UI 中作为组成部分的 chip、按钮和标签不计入此限制。
新信息 = 新视觉响应。 在 explainer 中，如果内容仍然相关，应改变同一世界中的状态／动作；句子变化并不必然要求切换 shot。
要点列表应转化为视觉，而不是自动变成三个 tile。 从
```
references/opener-konsep.md
```
的功能菜单中选择方式（演示一个功能、文字变化、对象变形、卡片震动、tile 网格……）；连续两个 opener 不得使用相同方式。
场景必须充满生命。 当对象执行动作时，相机可以保持稳定。移动相机以跟随或揭示内容；不要依赖文字 fade／slide 覆盖静态背景，也不要在所有段落中重复使用 pan／zoom。
“Zoom in-out”是 shot 尺寸，而不是相机呼吸。 如果视频显得静态，或用户要求 zoom，应让相机靠近正在叙事的元素（medium close-up／close-up），随后跟随内容点击退到 wide；几个百分点的呼吸幅度几乎不可见（
```
techniques.md
```
§3b）。

设计场景前请阅读

references/anti-ppt.md

——其中列出了实际违规项及修复方式。

Hukum #2 — Deterministik atau mati

规则 #2 — 确定性，否则失效

Tidak ada satu baris pun yang membaca jam sistem. Semua visual adalah fungsi murni dari

tl.time()

(waktu timeline GSAP): spektrum, angka berjalan, partikel, getar kamera (sinus frekuensi tinggi, bukan

Math.random()

), posisi objek yang "mengalir" (tween JARAK, bukan akumulasi kecepatan per frame). Konsekuensinya: scrub akurat seperti timeline After Effects, dan render frame-by-frame ke MP4 menghasilkan gambar identik setiap kali.

任何代码都不得读取系统时间。所有视觉都必须是

tl.time()

（GSAP timeline 时间）的纯函数：频谱、滚动数字、粒子、高频正弦相机震动（而非

Math.random()

）、流动对象位置（使用距离 tween，而不是逐帧累积速度）。这样才能获得准确 scrub，效果类似 After Effects timeline，并确保逐帧渲染为 MP4 时每次都产生完全相同的画面。

Hukum #3 — Gaya lahir dari tema, bukan dari starter, bukan dari referensi

规则 #3 — 风格源于主题，而非 starter 或参考素材

Kegagalan yang umum: opener untuk produk lain keluar dengan kulit PERSIS opener produk sebelumnya — gelap, aksen biru, glow, nebula, font yang sama — karena model mengambil gayanya dari starter. Animasinya bisa bagus, tetap gagal: opener adalah wajah produk, dan dua produk tidak boleh berwajah sama.

Style brief dulu, kode belakangan. Sebelum menyentuh starter, tulis enam baris ini dan tunjukkan ke user bersama rundown adegan:
- tema/produk + tiga kata sifat perasaan yang ingin ditinggalkan;
- konsep & sidik jari struktur (opener/promo): tiga kandidat konsep dari
```
references/opener-konsep.md
```
  , satu dipilih dengan alasan dari produk, lalu
```
konsep · jumlah adegan · objek utama tiap adegan · pembuka · penutup
```
  ;
- palet: satu warna utama DARI brand/tema (logo, ikon aplikasi, situs, kemasan), satu warna latar, satu aksen — sebutkan hex DAN sumber tiap warna; warna yang bukan dari brand ditulis "turunan: alasan";
- font display yang punya karakter sesuai perasaan itu (bukan Poppins/Inter/Roboto/Montserrat/Arial) + font pendamping; pengecualian: konsep klaim → cara → hasil memakai font UI produk sendiri (
```
references/opener-konsep.md
```
  );
- penekanan teks: tanpa sorotan kata, atau satu bentuk sorotan (sebutkan) — sorotan kata OPSIONAL, bukan bawaan setiap opener;
- bahasa latar per segmen: satu arah dari tabel "Arah gaya" untuk semua, atau rencana pergantian (segmen mana ganti, ke apa, kenapa, dipicu apa);
- tanda tangan gerak: satu jenis gerak yang diulang sebagai identitas (wipe objek, roll 3D per kata, kertas terbang, garis yang menggambar, blok warna menabrak tepi…);
- gerak latar: satu bahasa dari menu
```
techniques.md
```
  §7c — bukan hal yang sama dengan tanda tangan gerak, dan bukan otomatis "benda melintas";
- permukaan latar: dari menu §7d (gradien/cahaya/tekstur/grainy gradient, ≥ 2 lapis) — bukan flat;
- gaya render objek: satu keluarga dari menu
```
techniques.md
```
  §7e (flat, clay, glossy, kaca, isometrik, realistis, garis neon…);
- aset foto (bila konsep memakai foto orang/tempat/produk): sumbernya — foto user, generate lewat MCP Higgsfield, atau stok berlisensi — DITANYAKAN ke user, plus daftar shot per babak (
```
references/opener-konsep.md
```
  "Foto dalam opener");
- transisi: tentukan batas mana yang memerlukan efek dan mana yang cukup cut; pilih dari menu §4c sesuai konteks, bukan wajib dua jenis atau wajib 3D;
- satu momen istimewa (di mana efek termahal dipakai, sekali).
Starter adalah arsitektur, bukan gaya. Warna abu-abu, font sistem, dan latar WebGL di
```
assets/starter-opener.html
```
adalah PLACEHOLDER. Kalau salah satunya masih terlihat di hasil, gaya belum diturunkan. Latar WebGL (nebula, debu, grid, bloom) hanya satu bahasa latar dari delapan; matikan bila arah gayanya lain.
Referensi = ritme, bukan kulit. Dari video referensi ambil: durasi per shot, jenis transisi, hierarki atensi, energi, bahasa gerak. JANGAN ambil: palet, font, tekstur, tata letak, bentuk ornamen, kalimat, urutan adegan, dan momen unik (pembuka/penutup khas, gimmick satu kali). "Buatkan seperti ini" berarti "seenergik ini", bukan "berwarna seperti ini"; "pakai style X" berarti kulit dan bahasa gerak X, bukan adegan X. Contoh urutan di
```
references/opener-konsep.md
```
diperlakukan sama: prinsip, bukan naskah (Hukum kerangka #7). Menjiplak kulit referensi = pelanggaran, walau user yang menyodorkannya — sebutkan itu satu kalimat lalu tawarkan versi yang lahir dari tema.
Berbeda dari proyek sebelumnya — kulit DAN kerangka. Dua produk berbeda harus berbeda di minimal tiga dari empat: palet, font, bahasa latar, tanda tangan gerak — termasuk bentuk sorotan kata bila dipakai (pill + bintang milik satu proyek tidak boleh muncul lagi di proyek lain). Kerangkanya juga: konsep berbeda, atau ≥ 3 dari 5 elemen sidik jari struktur berbeda (
```
references/opener-konsep.md
```
). Warna baru di atas urutan adegan lama tetap template. Jangan membuka folder proyek lama untuk "contoh" — yang boleh diwarisi hanya aturan di skill ini.
Latar tidak default gelap. Tanpa aturan ini semua opener cenderung keluar gelap dengan nebula karena starter dan contoh-contohnya gelap. Latar mengikuti tema: gradien terang, warna lembut, blok warna, kertas, foto, atau gelap — tabel "Arah gaya" punya sepuluh pilihan dan sebagian besar tidak gelap. Contoh-contoh di skill ini (kertas terang, nebula) hanya contoh, bukan templat yang dikunci. Latar tidak pernah statis. Selalu ada gerak latar (§7c), dan warna latar BOLEH berganti kapan pun dibutuhkan: mood/topik segmen berubah (masuk ke produk, masalah → solusi, klaim → CTA), brand warna-warni menuntut ritme warna, atau aksi di layar memang mengubahnya (toggle dinyalakan, benda menutup lensa, ikon membesar memenuhi frame). Yang dijaga hanya dua: pergantian punya pemicu yang terlihat (wipe, benda, aksi UI, push ke bidang warna, cut di ketukan) — bukan cross-fade tanpa sebab yang terasa "ganti slide" — dan latar tidak dibiarkan satu warna diam hanya karena tidak pernah dipertimbangkan. Rencananya ditulis di style brief.
Bebas berekspresi. Hukum-hukum di sini mengunci STRUKTUR (bukan slide), KONTRAS (teks terbaca), dan KEBARUAN (tidak mengulang proyek lain) — bukan ekspresi. Gradien kaya, cahaya, 3D, kedalaman, tekstur, warna berani dianjurkan bila cocok dengan tema. Yang dilarang hanya mengambil default termurah dan mengulanginya: balok datar menyapu, garis melintas, latar flat, kulit proyek lain. Kalau dua pilihan sama-sama memenuhi hukum, pilih yang lebih berani.
Yang boleh sama di semua pekerjaan: hukum anti-PPT, rig kamera, determinisme, ritme masuk-keluar asimetris, ukuran teks minimum.

常见失败是：另一个产品的 opener 仍与上一个产品完全相同的“皮肤”——深色、蓝色强调色、glow、星云和相同字体——因为模型直接继承了 starter 的风格。动画可能依然漂亮，但仍然失败：opener 是产品的面孔，不同产品不能拥有相同面孔。

先写 style brief，之后再写代码。 接触 starter 前，先写下以下六行，并与场景 rundown 一起展示给用户：
- 主题／产品 + 希望留下的三个感受形容词；
- 概念与结构指纹（opener／promo）：从
```
references/opener-konsep.md
```
  提出三个候选概念，依据产品选择一个并说明理由，然后列出
```
概念 · 场景数量 · 每个场景的主要对象 · 开场 · 收尾
```
  ；
- 色板：一个来自品牌／主题的主色（logo、应用图标、网站、包装），一个背景色，一个强调色——列出每种颜色的 hex AND 来源；非品牌来源的颜色标为“衍生色：原因”；
- 与目标感受相符的 display font（不能使用 Poppins／Inter／Roboto／Montserrat／Arial）+ 辅助字体；例外：使用“主张 → 方式 → 结果”概念时，应使用产品自身的 UI font（
```
references/opener-konsep.md
```
  ）；
- 文本强调：完全不使用单词强调，或指定一种强调形式——单词强调是可选项，不应成为每个 opener 的默认设置；
- 各段落的背景语言：全部采用“风格方向”表中的一种方向，或给出切换计划（哪一段切换、切换为什么、触发原因是什么）；
- 运动签名：一种反复出现、构成身份标识的运动（对象 wipe、逐词 3D roll、飞纸、绘制线条、撞击边缘的色块……）；
- 背景运动：从
```
techniques.md
```
  §7c 菜单选择一种语言——不能与运动签名相同，也不能自动使用“物体横向掠过”；
- 背景表面：从 §7d 菜单选择（渐变／光线／纹理／grainy gradient，≥ 2 层）——不能使用纯色平面；
- 对象渲染风格：从 §7d／§7e 菜单选择一个家族（flat、clay、glossy、玻璃、等距视角、真实感、霓虹线条……）；
- 照片资产（如果概念使用人物／地点／产品照片）：来源——用户照片、通过 MCP Higgsfield 生成，或授权图库——必须向用户确认，并提供每幕的 shot 列表（
```
references/opener-konsep.md
```
  “照片在 opener 中”）；
- 过渡：确定哪些边界需要特效、哪些只需 cut；根据上下文从 §4c 菜单选择，不要求必须使用两种效果，也不要求必须使用 3D；
- 一个特别时刻（最昂贵效果只在此使用一次）。
Starter 是架构，不是风格。
```
assets/starter-opener.html
```
中的灰色、系统字体和 WebGL 背景都是 PLACEHOLDER。如果最终结果中仍能看到其中任何一项，说明尚未推导出风格。WebGL 背景（星云、尘埃、网格、bloom）只是八种背景语言之一；如果风格方向不同，就应关闭。
参考素材 = 节奏，而不是皮肤。 从参考视频中获取：每个 shot 的时长、过渡类型、注意力层级、能量和运动语言。不要获取：色板、字体、纹理、布局、装饰形状、句子、场景顺序和独特时刻（特色开场／收尾、一次性 gimmick）。“做一个像这个的”是指“能量像这个”，而不是“配色像这个”；“使用风格 X”是指皮肤和运动语言采用 X，而不是照搬场景 X。
```
references/opener-konsep.md
```
中的示例顺序也应以同样方式处理：它是原则，不是脚本（骨架规则 #7）。
必须与上一个项目不同——皮肤和骨架都要不同。 两个不同产品至少在以下四项中的三项存在差异：色板、字体、背景语言、运动签名——如果使用单词强调，其形式也计算在内（pill + 星号属于某一个项目，不能再次出现在另一个项目中）。骨架也必须不同：概念不同，或五个结构指纹元素中至少有三个不同（
```
references/opener-konsep.md
```
）。仅在旧场景顺序上换一种新颜色仍然只是模板。不要打开旧项目文件夹作为“示例”——唯一可以继承的是此 skill 中的规则。
背景不能默认使用深色。 没有这条规则，所有 opener 都会因为 starter 和示例采用深色而最终呈现深色星云。背景应跟随主题：明亮渐变、柔和色彩、色块、纸张、照片，或深色——“风格方向”表提供十种选择，其中大多数不是深色。 Skill 中的示例（浅色纸张、星云）仅是示例，不是锁定的模板。 背景绝不能静止。 每个场景始终都要有背景运动（§7c），背景颜色也可以在任何需要的时候改变：段落 mood／主题变化（进入产品、问题 → 解决方案、主张 → CTA）、品牌要求多彩节奏，或屏幕中的动作确实改变了背景（切换开关、物体遮住镜头、图标放大并填满画框）。只需遵守两点：颜色切换必须具有可见触发因素（wipe、物体、UI 动作、推入色块、点击时 cut），不能毫无缘由地 cross-fade 而产生“切换 slide”的感觉；也不能仅仅因为从未考虑过背景方案，就让背景长期保持单一颜色。背景方案必须写入 style brief。
自由表达。 此处的规则只锁定结构（不能是 slide）、对比度（文字必须清晰可读）和新颖性（不能重复旧项目），不会限制表达。丰富渐变、光线、3D、深度、纹理和大胆配色都值得鼓励，只要与主题契合。唯一禁止的是采用最廉价的默认效果并不断重复：平面色块扫过、横向线条掠过、纯色平面、旧项目皮肤。如果两个方案都符合规则，应选择更大胆的那个。
**所有项目中都可以保持一致的内容：**反 PPT 规则、相机 rig、确定性、非对称的进入／退出节奏、最小文字尺寸。

Arah gaya (pilih satu; boleh memadukan dua dengan sadar)

风格方向（选择一种；可以有意识地组合两种）

Arah	Latar	Tipografi	Gerak khas	Cocok untuk
Sinematik gelap	gradasi nyaris hitam, partikel/nebula WebGL, bloom hanya di objek	grotesk tebal bersih	push-through, cahaya di depan lensa	alat kreatif, gaming, teknologi
Poster color-block	bidang warna solid besar berganti tiap adegan, tanpa gradasi	display sangat tebal, huruf raksasa terpotong tepi	wipe blok, teks menabrak tepi frame	app konsumen, musik, event
Editorial terang	putih/krem, ruang kosong luas, garis tipis	serif display + grotesk kecil	geser halus, garis menggambar, kamera tenang	produktivitas, finansial, SaaS
Kertas & cetak	tekstur kertas, potongan kolase, stempel, selotip	tulisan tangan + serif	benda terbang lalu mendarat, sudut miring	edukasi, komunitas, kuliner
Retro / analog	warna pudar, grain, garis scan, bingkai VHS	geometris 70–90-an	glitch terkendali, zoom kasar, freeze	nostalgia, musik, hiburan
Brutalis mono	hitam-putih, grid keras, kotak bergaris	monospace + kondensasi	cut keras, blok bergeser, kursor berkedip	developer tools, teknis
Pastel ceria	pastel bertumpuk, bentuk bulat besar	rounded sans tebal	mantul elastis, bentuk mekar	anak, kesehatan, lifestyle
Mewah gelap	hitam + emas/perunggu, bayangan lembut, kilau	serif tinggi berspasi lebar	gerak lambat, sinar menyapu, kedalaman	fashion, otomotif, properti
Flat pop berfoto	netral terang bergantian dengan medan warna brand user yang solid; bentuk flat dan stiker turunan geometri logo user + ilustrasi 3D lembut	sans geometris membulat tebal + kata raksasa terpotong tepi	foto orang potongan pop dari bawah, stiker meletup elastis, medan warna menyapu/snap di ketukan	app konsumen, fintech, e-commerce, brand anak muda
Grainy gradient	dasar gelap/warna dalam; bentuk bergradien jenuh 2–3 warna yang bercahaya dari dalam; butiran halus di seluruh frame	grotesk bersih kecil, atau display tebal minimal	lapisan bentuk membuka/berputar pelan, kamera menembus lubang bentuk, bola cahaya pemandu	tech, AI, musik, fintech, peluncuran kreatif

Dua opener berturut-turut memakai baris tabel yang sama = tanda bahaya; pilih baris lain atau padukan dua baris dengan cara yang belum dipakai.

方向	背景	字体	标志性运动	适合场景
电影感深色（Sinematik gelap）	近乎黑色的渐变、WebGL 粒子／星云、仅在对象上使用 bloom	干净厚重的 grotesk	push-through、镜头前方光线	创意工具、游戏、科技
色块海报（Poster color-block）	随场景切换的大面积纯色色块，无渐变	超厚重 display font、超大裁切文字	色块 wipe、文字撞击画框边缘	消费应用、音乐、活动
明亮编辑风（Editorial terang）	白色／奶油色、充足留白、细线	serif display + 小号 grotesk	平滑位移、绘制线条、平静相机	生产力、金融、SaaS
纸张与印刷（Kertas & cetak）	纸张纹理、拼贴切片、印章、胶带	手写体 + serif	物体飞来后落下、倾斜角落	教育、社区、餐饮
复古／模拟（Retro／analog）	褪色、grain、扫描线、VHS 边框	70–90 年代几何字体	受控 glitch、粗粝 zoom、freeze	怀旧、音乐、娱乐
粗野主义单色（Brutalis mono）	黑白、硬网格、描边方框	monospace + 压缩字体	hard cut、色块位移、光标闪烁	开发者工具、技术内容
欢快粉彩（Pastel ceria）	层叠粉彩、大型圆角形状	粗体 rounded sans	弹性回弹、形状绽放	儿童、健康、生活方式
奢华深色（Mewah gelap）	黑色 + 金色／青铜色、柔和阴影、微光	高字距高对比 serif	缓慢运动、扫光、深度	时尚、汽车、地产
照片扁平潮流（Flat pop berfoto）	中性明亮背景与用户品牌纯色区域交替；扁平形状、由用户 logo 几何形状衍生的贴纸，以及柔和 3D 插画	粗体圆润几何 sans + 被裁切的巨型文字	人物 cutout 照片从下方弹出、贴纸弹性弹出、节拍上色区扫过／snap	消费应用、fintech、电商、年轻品牌
颗粒渐变（Grainy gradient）	深色／深浓色基础；2–3 种高饱和渐变形状从内部发光；全画面细颗粒	干净的小号 grotesk，或极简厚重 display	形状层展开／缓慢旋转、相机穿过形状孔洞、光球引导	科技、AI、音乐、fintech、创意发布

连续两个 opener 使用表格中的同一行就是危险信号；应选择其他行，或以前所未有的方式组合两行。

Hukum #4 — Teks hidup, latar tunduk

规则 #4 — 文字有生命，背景服从文字

Dua opener dengan rig yang sama bisa berakhir sangat baik atau sangat buruk hanya karena tipografi dan kontrasnya. Yang buruk: setiap judul KAPITAL SEMUA bobot 800 di tengah, masuk dengan cara yang sama, di atas ladang cahaya putih yang lebih terang daripada hurufnya. Yang baik: sentence case bobot 500, penekanan pada kata kunci (mis. pill + bintang — itu tanda tangan satu proyek, bukan aturan; sorotan kata sendiri opsional), tanda baca hanya bila perlu, ukuran/arah/ posisi bergantian, latar tenang di bawah teks, latar berganti mengikuti segmen. Resep lengkap dengan kode:

techniques.md

bagian 1 dan 1b. Ringkasnya:

Sentence case bobot 500–600. Kapital-tebal hanya untuk satu adegan penekanan.
Judul, klaim, dan frase pendek DEFAULT TANPA TITIK — terutama frase ≤ 4 kata dan kalimat satu baris. Tanda baca hanya bila mengubah arti atau irama:
```
?
```
untuk pertanyaan sungguhan, titik untuk gaya dua kalimat pendek berturut-turut yang disengaja,
```
!
```
sangat jarang. Gaya tanda baca diputuskan sekali di style brief dan konsisten; bila dipakai, ia elemen terpisah yang muncul terakhir.
Sorotan kata (pill, garis bawah, marker, kotak, warna, coret) OPSIONAL dan diputuskan di style brief. Tanpa sorotan pun kalimat tetap punya penekanan: kata per kata dari redup ke penuh, ukuran/bobot, jeda, atau objek (ikon, UI) yang berdiri di samping kata. Bila dipakai: satu bentuk per video, tidak wajib di setiap kalimat, berbeda dari proyek lain; ornamen hanya bila diturunkan dari bentuk brand.
Dua adegan berturut-turut tidak boleh sama dalam ukuran, arah masuk, dan posisi teks.
Di KANTONG TEKS (bukan seluruh frame), latar harus GELAP (≤ 25 % luminance) atau TERANG (≥ 80 %), tidak pernah "ramai sedang". Di luar kantong, latar justru harus kaya: gradien, cahaya, tekstur (§7d) — flat satu warna ditolak. Elemen latar apa pun (partikel, bentuk, tekstur, garis): warna dari sisi gelap palet, opacity ≤ .35 di kantong teks, ≤ 40 elemen terang terlihat.
Pertimbangkan selang-seling gelap–terang bila segmennya memang berganti mood; bukan kewajiban mekanis.

两个使用同一 rig 的 opener 可能一个效果极佳，另一个却非常糟糕，差别在于字体和对比度。糟糕的情况：每个标题都使用全大写、800 字重、居中排列，并以相同方式进入，背景还是比文字更亮的白色光场。良好的情况：采用 weight 500 的 sentence case，重点落在关键词上（例如 pill + 星号——这是单个项目的标志，不是通用规则）；仅在必要时使用标点；文字尺寸／方向／位置不断变化；文字下方背景保持平静，并随段落改变背景。完整配方及代码见

techniques.md

第 1 和 1b 节。简而言之：

使用 weight 500–600 的 sentence case。全大写粗体只用于一个强调场景。
标题、主张和短句默认不加句号，尤其是 ≤ 4 个词的短语和单行句子。只有标点会改变含义或节奏时才使用：真正的疑问句用
```
?
```
；刻意连续使用两个短句时用句号；
```
!
```
极少使用。标点风格在 style brief 中一次性决定并保持一致；如果使用，它应作为独立元素最后出现。
单词强调（pill、下划线、marker、方框、颜色、删除线）是可选项，必须在 style brief 中决定。即使没有强调，句子仍然可以通过从暗淡到饱满的逐词变化、尺寸／字重、停顿或旁边的对象（图标、UI）来形成重点。如果使用：每个视频只用一种形式，不必出现在每个句子中，也必须与之前的项目不同；装饰只能从品牌形状衍生。
连续两个场景不得在文字尺寸、进入方向和位置上完全相同。
在文字区域内（不是整个画框），背景必须为暗色（luminance ≤ 25%）或亮色（≥ 80%），绝不能处于“适中且繁忙”的状态。在文字区域之外，背景反而应丰富：渐变、光线、纹理（§7d）——拒绝单一纯色。文字区域中的任何背景元素（粒子、形状、纹理、线条）都应使用色板中的深色侧，opacity ≤ .35，并且最多可见 40 个亮色元素。
如果段落 mood 确实发生变化，可以考虑明暗交替；这不是机械式硬性要求。

Alur kerja

工作流

Kenali jenisnya (tabel "Jenis pekerjaan"). Explainer → buka
```
references/explainer.md
```
dan ikuti "Langkah nol" di sana: SATU pertanyaan berisi gaya (lima pilihan + rekomendasi), rasio, durasi, suara, plus pagar durasi. Jenis lain → lanjut; tanya hanya hal yang benar-benar tidak bisa diturunkan dari brief (rasio, durasi, ada musik/VO atau tidak), dalam satu pertanyaan. 0b. Tulis style brief (Hukum #3) dan tunjukkan bersama rundown. Tanpa style brief yang disetujui, jangan menyentuh kode.
Serap referensi & sumber brand. Minta screenshot/potongan video referensi bila ada; petakan per shot (durasi, gerakan, jenis transisi, urutan atensi) — hanya RITMENYA, bukan kulitnya (Hukum #3). Warna, logo (path vektor ASLI, jangan digambar ulang), font, dan klaim fitur diambil dari sumber resmi PRODUK yang sedang dibuat — bukan dari referensi, bukan dari proyek lain, bukan karangan.
Tulis rundown dari konsep yang dipilih — tabel
```
detik | adegan | kalimat | visual
```
. Jumlah dan jenis adegan mengikuti konsep (
```
references/opener-konsep.md
```
), bukan pola hook → fitur → fitur → janji → logo → CTA. Total 25–40 detik. Minta persetujuan user atas rundown ini sebelum menulis kode; merombak rundown murah, merombak kode mahal.
Scaffold arsitektur. Opener/promo/bumper/typography: salin
```
assets/starter-opener.html
```
(stage 1920×1080, rig kamera
```
#world
```
, scene Three.js ber-state, helper timeline) lalu SEGERA ganti token warna, font, dan bahasa latarnya sesuai style brief — starter sengaja abu-abu. Explainer: salin starter sesuai gaya —
```
starter-explainer-kartun/-jurnalisme/-katalog/-sketsa.html
```
(mode kolase: kamera into/settle/look/home di atas cutout/foto, say/unsay per kata, draw anotasi, push-through antar adegan) atau
```
starter-explainer.html
```
(aksi kontinu: dunia mengalir, hero, objek dunia, view peta, whip). Semua sudah autoplay + loop tanpa player. Struktur multi-file dan penjelasan tiap keputusan ada di
```
references/architecture.md
```
.
Bangun adegan satu per satu dengan resep di
```
references/techniques.md
```
(split per huruf + motion blur berarah, pan 3D per kata, menu transisi, mockup UI). Resep adalah perkakas, bukan daftar belanja: pakai hanya yang dituntut konsep.
Verifikasi VISUAL, bukan cuma "kode jalan". Kamu tidak bisa menonton video; kamu hanya bisa melihat FRAME. Potret 6–20 detik kunci (awal tiap adegan, saat teks muncul, transisi) dengan
```
scripts/snap.mjs
```
(puppeteer, buka
```
file://
```
, tanpa server), susun jadi lembar kontak, dan nilai seperti sutradara: teks kepotong? tumpang tindih? teks muncul sebelum kamera selesai? masih terasa slide? Perbaiki, potret lagi. JANGAN merender semua frame untuk mengecek — itu ribuan gambar dan bukan verifikasi; render penuh hanya untuk export MP4 (langkah 6) bila user memintanya. Tanpa Node: buka
```
?debug=1
```
, scrub manual, screenshot.
Serahkan sebagai SATU
index.html
yang bisa diklik dua kali. Output akhir tidak boleh butuh server/Node: CSS dan JS ditulis INLINE di dalam berkas (module lokal
```
<script type="module" src="…">
```
diblokir CORS saat dibuka lewat
```
file://
```
, module inline tidak), library dari CDN, aset (ikon/gambar) relatif di folder yang sama. Server no-cache (
```
scripts/serve.py
```
) hanya alat KERJA saat mengedit, bukan syarat menonton. Tanpa player di layar (lihat "Player"); sebutkan
```
?debug=1
```
untuk scrub. Export MP4 hanya bila user memintanya:
```
scripts/ export-frames.mjs
```
merender tiap frame (60 fps) ke PNG lalu ffmpeg menggabungkannya — cara ini bebas frame drop, tapi mahal, jadi bukan langkah rutin dan bukan alat pengecekan.
Khusus explainer: naskah VO + ajakan merekam — pesan penutup wajib memuat naskah VO lengkap dan meminta user merekam/generate lalu mengirim ulang audionya untuk disinkronkan. Detail bentuk naskah, petunjuk rekam, dan retime di
```
references/explainer.md
```
→ "Penyerahan".

识别类型（参见“工作类型”表）。Explainer → 打开
```
references/explainer.md
```
并遵循其中的“第零步”：只问一个问题，内容包括风格（五种选项 + 推荐）、比例、时长、是否有声音，以及时长上限。其他类型 → 继续执行；只询问 brief 中确实无法推导的信息（比例、时长、是否有音乐／VO），并合并成一个问题。 0b. 编写 style brief（规则 #3），并与 rundown 一起展示。没有获得用户对 style brief 的认可，不要编写代码。
吸收参考素材和品牌来源。 如果存在，要求用户提供参考 screenshot／视频片段；按 shot 映射（时长、运动、过渡类型、注意力顺序）——只提取节奏，不提取皮肤。颜色、logo（使用原始矢量路径，不要重新绘制）、字体和功能主张应来自当前产品的官方来源——不能来自参考素材、旧项目或凭空编造。
根据选定概念编写 rundown — 表格格式为
```
秒数 | 场景 | 句子 | 视觉
```
。场景数量和类型由概念决定（
```
references/opener-konsep.md
```
），不能套用 hook → 功能 → 功能 → 承诺 → logo → CTA 的模式。总时长 25–40 秒。写代码前先取得用户对 rundown 的认可；修改 rundown 成本低，修改代码成本高。
搭建架构。 Opener／promo／bumper／typography：复制
```
assets/starter-opener.html
```
（1920×1080 stage、相机 rig
```
#world
```
、具有状态的 Three.js scene、timeline helper），随后立即按照 style brief 替换颜色、字体和背景语言——starter 有意采用灰色。Explainer：根据风格复制对应 starter——
```
starter-explainer-kartun/-jurnalisme/-katalog/-sketsa.html
```
（拼贴模式：基于 cutout／照片执行相机 into/settle/look/home、逐词 say/unsay、绘制标注、场景间 push-through），或
```
starter-explainer.html
```
（连续动作：世界流动、hero、世界对象、地图 view、whip）。全部默认 autoplay + loop 且无 player。多文件结构及每项决策的说明见
```
references/architecture.md
```
。
逐个构建场景，使用
```
references/techniques.md
```
中的配方（逐字母 split + 方向性 motion blur、逐词 3D pan、转场菜单、UI mockup）。配方是工具，而不是购物清单：只使用概念真正需要的部分。
验证视觉效果，而不只是确认“代码能运行”。 你无法观看视频，只能查看 FRAME。使用
```
scripts/snap.mjs
```
（puppeteer，打开
```
file://
```
，无需服务器）在 6–20 个关键秒数截图（每个场景开始时、文字出现时、转场时），组合成 contact sheet，并像导演一样评估：文字是否被裁切？是否重叠？文字是否在相机运动完成前出现？是否仍像 slide？发现问题后修复并重新截图。不要渲染所有帧进行检查——那会产生数千张图片，而且不能算作验证；只有用户要求导出 MP4 时才进行完整渲染（步骤 6）。没有 Node 时：打开
```
?debug=1
```
，手动 scrub 并截图。
以单个可通过双击打开的
index.html
交付。最终输出不能依赖 server／Node：CSS 和 JS 必须以内联方式写在文件中（通过
```
file://
```
打开时，本地
```
<script type="module" src="…">
```
会因 CORS 被阻止，内联 module 则不会），库通过 CDN 加载，资产（图标／图片）使用同一文件夹中的相对路径。no-cache server（
```
scripts/serve.py
```
）仅是编辑期间的工作工具，不是观看条件。屏幕上不显示 player（参见“Player”）；说明可使用
```
?debug=1
```
进行 scrub。仅在用户要求时导出 MP4：
```
scripts/export-frames.mjs
```
会逐帧渲染（60 fps）生成 PNG，再由 ffmpeg 合并——这种方式不会丢帧，但成本很高，因此不应作为常规步骤或检查工具。
Explainer 专属：VO 脚本 + 录制邀请 — 最终消息必须包含完整 VO 脚本，并请用户录制／生成后重新发送音频以便同步。脚本形式、录制说明和 retime 方式见
```
references/explainer.md
```
→“交付”。

Checklist sebelum menyerahkan

交付前检查清单

Style brief (tema, palet dari brand, font display berkarakter, satu bahasa latar, tanda tangan gerak, momen istimewa) ditulis dan disetujui SEBELUM kode
Tidak ada sisa placeholder starter (abu-abu, font sistem, nebula bila arah gayanya lain) dan tidak ada kulit referensi yang disalin (palet, font, tekstur, tata letak, kalimat)
Berbeda dari opener/promo sebelumnya: minimal tiga dari palet, font, bahasa latar, tanda tangan gerak
Opener/promo: tiga kandidat konsep ditulis dan satu dipilih; sidik jari struktur tertulis dan berbeda dari opener sebelumnya; paling banyak dua komponen kanonik (teks zoom → keluar kiri, tiga tile, input diketik, push-through, light leak, logo + CTA di tengah), masing-masing dituntut konsep (
```
references/opener-konsep.md
```
); tidak menyalin contoh konsep (pembuka/penutup berbeda dari contohnya, ≤ 1 momen ✦ yang ditransformasi, palet dan bentuk dari brand user)
App/SaaS: minimal satu babak UI hidup — dirakit, dipakai, menghasilkan — dari komponen produk user, bukan screenshot diam yang di-zoom (
```
references/opener-konsep.md
```
bagian animasi UI); bila demo terasa statis, klik penting diikuti kamera (dekat → klik → mundur/geser), tidak di setiap klik (
```
techniques.md
```
§8)
Teks hidup (Hukum #4): sentence case bobot 500–600, penekanan jelas, tanpa titik otomatis (tanda baca hanya bila mengubah arti/irama), ukuran/arah/posisi bergantian antar adegan; kapital-tebal hanya di satu adegan. Sorotan kata hanya bila style brief memilihnya (bukan otomatis di setiap kalimat, bukan pill + bintang warisan proyek lain)
Latar tunduk (Hukum #4): di bawah teks luminance ≤ 25 % atau ≥ 80 %, elemen latar redup dan berwarna gelap di kantong teks; uji grayscale — tidak ada latar seterang huruf
Transisi dipilih pada batas yang membutuhkan; tidak otomatis semua batas diberi efek atau semua efek dihapus. Objek penyapu punya makna dalam adegan; kecepatan, amplitudo, dan jeda sudah diperiksa.
Permukaan latar dari menu §7d: ≥ 2 lapis (dasar + cahaya/tekstur/ blob), warna dari palet — tidak flat satu warna, bukan hitam/putih murni
Gaya render objek satu keluarga (§7e), atau pergantiannya dijadikan momen
Opener berfoto: sumber foto disepakati user (foto user / generate MCP / stok berlisensi), wajah fiktif bila di-generate, logo/teks brand ditambahkan di kode, foto dianimasikan (pop, parallax, wadah) — bukan Ken Burns saja
Bila memakai grainy gradient/butiran: butiran masih terlihat di MP4 hasil encode dan gradien tidak banding
Bila memakai video: klip dipasang lewat
```
clip()
```
(tanpa
```
autoplay
```
/
```
loop
```
), dibungkus elemen yang dianimasikan, sumbernya disepakati user, folder
```
assets/
```
disebutkan saat penyerahan, dan detik yang berisi klip sudah dipotret (
```
snap.mjs
```
)
Gerak latar dipilih dari menu §7c dan BERBEDA dari proyek sebelumnya; tidak ada batang/garis melintas ke samping kecuali tema kecepatan/ aliran dan belum dipakai di proyek sebelumnya
Latar bergerak di setiap adegan (tidak ada latar diam); pergantian warna latar boleh kapan dibutuhkan asal punya pemicu terlihat
Lolos 6 poin "Larangan struktural" (bukan section yang di-fade, ada benang merah visual, ≤ 2 tingkat teks, gerak tiap detik, transisi bervariasi, starter yang benar)
Tanpa player di layar; autoplay; loop;
```
?debug=1
```
untuk scrub
Opener: satu gagasan utama tanpa tumpukan badge; explainer: satu peristiwa dapat memuat beberapa beat dan objek yang saling berhubungan.
Kamera, cut, dan gerak objek dipilih sesuai konteks; tidak ada keharusan menggerakkan kamera di tiap segmen. Saat kamera bergerak, seluruh dunia ikut.
Tidak ada hold panjang yang mati: babak tanpa aksi objek yang besar mendapat perubahan ukuran shot ke elemen (wide ↔ medium close-up ↔ close-up) atau push pelan; napas kamera saja tidak dihitung. Label layar di luar rig, tidak terpotong zoom
Motion blur berarah pada semua teks masuk/keluar
Latar lahir dari tema (tidak otomatis gelap; terang bisa gradien, warna lembut, blok warna, kertas), punya kedalaman (bukan satu warna flat), TIDAK lebih ramai daripada subjek; pergantian latar diputuskan per segmen di style brief dan, bila ada, terjadi di balik wipe/cut
Glow dipakai pada objek (tile, bar, ikon dekor) — judul teks BERSIH (putih penuh + drop shadow tipis), kecuali user minta sebaliknya
Font display ≠ font mockup UI; mockup memakai font produk aslinya (konsep klaim → cara → hasil: seluruh teks memakai font UI produk)
Nol pemakaian
```
Date.now()
```
/
```
Math.random()
```
di jalur render
Sudah dipotret di detik kunci (snap.mjs / ?debug=1) dan dilihat dengan mata — bukan render penuh; MP4 hanya bila diminta
Ada suara? Halaman menahan di frame awal bila autoplay diblokir dan mulai bersama suara pada gestur pertama — tidak pernah mulai tanpa suara; tanpa file peluncur (
```
.cmd
```
/
```
.bat
```
)
Explainer kolase: kamera punya koreografi (close-up → meluncur → zoom out), bukan hanya elemen in/out — lihat explainer.md "Kamera explainer". Kartun panggung: tidak ada frame dengan zoom < 1,08; kamera hanya bergerak di dalam panggung; antar panggung cut atau geser 96/72 px
Kartun panggung: sendi diputar lewat proxy transform manual (tidak ada
```
transformOrigin
```
/
```
rotation
```
GSAP pada sendi, tidak ada tween
```
x/y
```
pada grup ber-
```
translate
```
); tiap panggung ≥10 benda bergerak; nol caption; kepala raster punya varian kedip + ekspresi
Build lewat bridge AE: CAM di-nol-kan sebelum parenting, semua layer dunia ber-parent ke CAM, layer dibuat belakang → depan, keyframe bagian tubuh dalam ruang induk, contact sheet tiap panggung + master sudah dilihat, pesan penutup memuat Ctrl+S + hapus comp uji + perintah aerender (
```
references/ae-bridge-higgsfield.md
```
)
Explainer: pesan penutup memuat naskah VO lengkap + ajakan merekam / generate sendiri dan mengirim ulang audionya untuk disinkronkan;
```
vo-script.md
```
tersimpan di folder proyek
Explainer: gaya, rasio, durasi, dan suara sudah ditanya dalam SATU pertanyaan (kecuali yang sudah disebut user) sebelum menulis kode; durasi mengikuti brief/VO; jumlah adegan mengikuti konteks, bukan durasi ÷ 6
Rasio default 16:9 / mengikuti layar; 9:16 hanya bila diminta. Tanpa subtitle/caption kecuali diminta. Tata letak referensi (panel, subtitle) tidak disalin — hanya prinsipnya
Explainer topik aksi/kecepatan: satu subjek hadir dari awal sampai akhir, latar terus mengalir, angka hidup di dalam dunia (subjek melintas di depannya) — lihat explainer.md "Gaya kelima: aksi kontinu"
Sudut pandang berganti: tidak ada tiga adegan berturut-turut dengan sudut yang sama; tiap fakta dapat instrumennya (speedometer, peta, profil ketinggian, balapan peta, interior, tampak depan) — lihat explainer.md "Sudut pandang WAJIB berganti"; kamera bernapas
Tidak ada teks di bawah 30 px pada panggung 1080 (body ≥ 44, label ≥ 34, kredit ≥ 30) — ditonton di HP; teks hantu & anotasi bervariasi, bukan selalu outline / lingkaran putus-putus
Explainer: tiap orang/perusahaan/tempat/produk yang DISEBUT tampil fotonya di adegan itu (lihat explainer.md → "Entitas yang disebut")
```
index.html
```
terbuka langsung lewat
```
file://
```
(klik dua kali) tanpa server — CSS/JS inline, tidak ada
```
src
```
module lokal
Angka yang berubah tiap frame (jam, counter) memakai
```
font-variant-numeric:tabular-nums
```
+
```
min-width
```
supaya wadahnya tidak berubah lebar

已在写代码之前编写并获得用户认可 style brief（主题、来自品牌的色板、有个性的 display font、单一背景语言、运动签名、特别时刻）
没有残留 starter placeholder（灰色、系统字体、与风格方向不符的星云），也没有复制参考素材的皮肤（色板、字体、纹理、布局、句子）
与上一个 opener／promo 不同：色板、字体、背景语言、运动签名中至少三项有差异
Opener／promo：已提出三个候选概念并选定一个；已写明结构指纹且与上一个 opener 不同；最多使用两个 canonical 组件（放大后向左退出的文字、三个 tile、输入框打字、push-through、light leak、居中的 logo + CTA），且每个组件都必须由概念要求（
```
references/opener-konsep.md
```
）；未复制示例概念（开场／收尾与示例不同，≤ 1 个被变换的 ✦ 时刻，色板和形状来自用户品牌）
App／SaaS：至少一幕包含活的 UI 行为——从用户产品组件中组装、使用并产生结果——而不是放大静态 screenshot（
```
references/opener-konsep.md
```
“UI 动画”）；如果演示显得静态，重要点击动作应配合相机（靠近 → 点击 → 后退／平移），而不是每次点击都这样做（
```
techniques.md
```
§8）
文字有生命（规则 #4）：sentence case weight 500–600，重点清晰，不自动添加句号（标点只在改变含义／节奏时使用），场景间尺寸／方向／位置有变化；全大写粗体只用于一个场景。只有 style brief 选择了单词强调时才使用（不是每个句子自动使用，也不是沿用 pill + 星号）
背景服从文字（规则 #4）：文字下方 luminance ≤ 25% 或 ≥ 80%，文字区域中的元素颜色暗淡；通过灰度测试——背景不能比文字更亮
仅在需要效果的边界使用过渡；不能自动给所有边界加效果，也不能删除所有效果。扫过的对象必须在场景中有意义；速度、幅度和停顿均已检查
背景表面来自 §7d 菜单：≥ 2 层（基础 + 光线／纹理／blob），使用色板颜色——不能是单一纯色平面，也不能是纯黑／纯白
对象渲染风格统一为 §7e 中的一个家族；如果发生切换，应将其设计为一个特别时刻
照片类 opener：照片来源已与用户确认（用户照片／MCP 生成／授权图库），生成的人脸为虚构人物，logo／品牌文字在代码中添加，照片有动画（弹出、parallax、容器效果）——不能只有 Ken Burns
如果使用 grainy gradient／颗粒：颗粒在 MP4 编码后仍然可见，渐变没有 banding
如果使用视频：片段通过
```
clip()
```
设置（不使用
```
autoplay
```
／
```
loop
```
），包裹在带动画的元素中，来源已与用户确认，交付时说明
```
assets/
```
文件夹，并且包含该片段的秒数已经通过
```
snap.mjs
```
截图检查
背景运动选自 §7c 菜单，且与上一个项目不同；除非主题确实是速度／流动且此前项目未连续使用，否则不使用横向掠过的杆／线
每个场景的背景都在运动（不存在静止背景）；背景颜色可在需要时改变，但必须具有可见触发因素
通过“结构性禁令”中的 6 个要点（不是淡入淡出的 section，存在贯穿始终的视觉线索，≤ 2 个文本层级，每秒都有运动，转场有变化，使用正确 starter）
屏幕上无 player；autoplay；loop；使用
```
?debug=1
```
进行 scrub
Opener：一个主要思想，不堆叠 badge；Explainer：一个事件可以包含多个 beat 和相互关联的对象
根据上下文选择相机、cut 和对象运动；不要求每个段落都移动相机。相机移动时，整个世界一起运动
没有冗长停滞：缺少大型对象动作的段落必须改变 shot 尺寸（wide ↔ medium close-up ↔ close-up）或进行缓慢 push；仅有相机呼吸不算数。屏幕标签位于 rig 外部，不被 zoom 裁切
所有进入／退出的文字都带有方向性 motion blur
背景源于主题（不自动使用深色；可以使用明亮渐变、柔和色彩、色块、纸张），具有深度（不能是单一纯色平面），且不比主体更繁忙；背景变化在 style brief 中逐段决定，并发生在 wipe／cut 之后
Glow 用于对象（tile、bar、装饰图标）— 文字标题保持干净（纯白 + 轻微 drop shadow），除非用户另有要求
Display font ≠ UI mockup 字体；mockup 使用产品原有字体（使用“主张 → 方式 → 结果”概念时：全部文字使用产品 UI 字体）
渲染路径中完全不使用
```
Date.now()
```
／
```
Math.random()
```
已在关键秒数通过
```
snap.mjs
```
／
```
?debug=1
```
截图并用肉眼检查——而不是完整渲染；仅在用户要求时生成 MP4
如果有声音：autoplay 被阻止时页面停留在初始帧，并在首次手势时与声音一同开始——绝不在没有声音时开始；不提供启动文件（
```
.cmd
```
／
```
.bat
```
）
Explainer 拼贴：相机具有编排（close-up → 滑行 → zoom out），而不只是元素进入／退出——参见 explainer.md“Explainer 相机”
舞台卡通：不存在 zoom < 1.08 的画面；相机只在舞台内部移动；舞台之间使用 cut 或平移 96／72 px
舞台卡通：关节通过手动 transform proxy 旋转（关节上不使用
```
transformOrigin
```
／GSAP
```
rotation
```
，带
```
translate
```
的组上不使用
```
x/y
```
tween）；每个舞台 ≥ 10 个运动物体；无 caption；raster 头部具有眨眼 + 表情变体
通过 AE bridge 构建：CAM 在 parenting 前归零，所有世界图层均 parent 到 CAM，图层按从后到前的顺序创建，身体部位在父级空间中制作 keyframe，每个舞台的 contact sheet + master 均已查看，最终消息包含 Ctrl+S + 删除测试 comp +
```
aerender
```
命令（
```
references/ae-bridge-higgsfield.md
```
）
Explainer：最终消息包含完整 VO 脚本，以及录制／自行生成并重新发送音频以便同步的邀请；
```
vo-script.md
```
已保存在项目文件夹中
Explainer：风格、比例、时长和声音已在写代码前通过一个问题询问（除非用户已说明）；时长遵循 brief／VO；场景数量取决于上下文，而不是时长 ÷ 6
默认比例 16:9／跟随屏幕；仅在明确要求时使用 9:16。除非用户要求，不添加 subtitle／caption。不复制参考布局（面板、字幕），只借鉴原则
Explainer 动作／速度主题：一个主体从开始到结束始终存在，背景持续流动，数字活在世界内部（主体从其前方经过）——参见 explainer.md“风格五：连续动作”
视角发生变化：不能连续三个场景采用相同角度；每个事实都可以拥有自己的视觉工具（速度计、地图、海拔剖面、地图比赛、车内、前视图）——参见 explainer.md“视角必须变化”；相机需有呼吸感
1080 stage 中没有小于 30 px 的文字（body ≥ 44、label ≥ 34、credit ≥ 30）——保证在手机上可读；幽灵文字和标注应有变化，不能始终使用 outline／虚线圆圈
Explainer：每个被提及的人物／公司／地点／产品都在对应场景中展示其照片（参见 explainer.md →“被提及的实体”）
```
index.html
```
可通过
```
file://
```
直接打开（双击），无需 server——CSS／JS 内联，不使用本地 module
```
src
```
每帧变化的数字（时钟、counter）使用
```
font-variant-numeric:tabular-nums
```
+
```
min-width
```
，避免容器宽度变化

Jebakan yang sudah memakan korban

已造成损失的陷阱

Detail dan perbaikannya di

references/techniques.md

bagian "Jebakan": bloom threshold rendah → layar putih; nebula additive → menumpuk lewat bloom; selector CSS lebih spesifik mengalahkan state awal

opacity:0

→ elemen muncul mendahului animasinya; module JS di-cache browser → edit "tidak ngefek" (pakai server

Cache-Control: no-store

); objek 3D pipih diputar penuh di sumbu Y → jadi sebatang garis (goyangkan, jangan putar penuh); kotak filter SVG default memotong ekor blur (lebarkan

x/y/width/height

修复方式详见

references/techniques.md

的“陷阱”部分： bloom threshold 过低 → 屏幕发白；星云使用 additive 混合 → 通过 bloom 叠加； CSS selector 更具体 → 覆盖初始

opacity:0

状态 → 元素早于动画出现；浏览器缓存 module JS → 修改不生效（使用带

Cache-Control: no-store

的 server）；扁平 3D 对象绕 Y 轴完整旋转 → 变成一条线（应摇摆，不要完整旋转）； SVG filter 框默认裁掉 blur 尾部（加宽

x/y/width/height

）。

After Effects — langsung lewat bridge Higgsfield

After Effects — 通过 Higgsfield bridge 直接构建

Bila After Effects sudah terbuka, MCP bridge

ae_*

Higgsfield tersambung, dan user meminta animasi/explainer dibangun di AE, bangun langsung lewat perintah bridge. Baca

references/ae-bridge-higgsfield.md

: kerangka comp lewat satu Lottie kecil, null

CAM

per panggung (anchor & position di-nol-kan SEBELUM parenting), ilustrasi dari SVG-kode → PNG 2× (

scripts/ae/bridge/aset-svg.py

svg2png.cjs

), karakter sebagai shape asli AE bersendi (

scripts/ae/bridge/rig-tokoh.py

, ±90 op per tokoh), keyframe bagian tubuh dalam ruang induk, verifikasi lewat contact sheet (relay bila r2.dev diblokir). Hukum kartun panggung tetap berlaku penuh. Bridge tidak bisa menyimpan/merender dan tidak bisa menyusun ulang urutan layer — sebutkan itu dan buat layer dari belakang ke depan. Build 10 panggung ≈ 1 jam, 0 kredit.

如果 After Effects 已经打开、MCP bridge

ae_*

Higgsfield 已连接，并且用户要求在 AE 中构建动画／explainer，则直接通过 bridge 命令构建。阅读

references/ae-bridge-higgsfield.md

：使用小型 Lottie 作为 comp 骨架，每个舞台设置一个 null

CAM

（在 parenting 之前将 anchor 和 position 归零），将 SVG 代码中的插图转换为 2× PNG（

scripts/ae/bridge/aset-svg.py

svg2png.cjs

），角色使用 AE 原生 shape 制作关节结构（

scripts/ae/bridge/rig-tokoh.py

，每个角色 ±90 个操作），在父级空间中为身体部位制作 keyframe，通过 contact sheet 进行验证（如果 r2.dev 被阻止则使用 relay）。舞台卡通的全部规则仍然完整适用。Bridge 无法保存／渲染，也无法重新排列图层顺序——需要明确说明，并按从后到前的顺序创建图层。构建 10 个舞台约需 1 小时，消耗 0 积分。

Isi paket

软件包内容

Berkas	Kapan dibaca
`references/kartun-panggung.md`	KARTUN PANGGUNG: satu panggung per adegan, kamera ≥1,08, cut/geser 96 px, rig sendi + transform manual, kepala raster + ekspresi lokal, nol caption, palet flat
`assets/starter-explainer-panggung.html`	EXPLAINER kartun panggung: sistem panggung + kamera per panggung, `J()` sendi, `character()` (kepala vektor atau raster), whoosh 96 px, contoh dua panggung
`scripts/kepala-ekspresi.py`	kepala hasil generate → varian senang/cemas/kaget + kedip, dibuat lokal (deteksi pupil & mulut)
`references/ae-bridge-higgsfield.md`	BRIDGE: membangun kartun panggung langsung di AE lewat MCP Higgsfield — batas bridge, jebakan (null 960,540; parent ke CAM berkeyframe; reorder rusak), arsitektur CAM per panggung, rig native, relay contact sheet, penyerahan
`scripts/ae/bridge/aset-svg.py` , `svg2png.cjs` , `rig-tokoh.py`	BRIDGE: aset ilustrasi dari kode → SVG + manifest → PNG 2× (puppeteer); generator ±90 op `ae_batch` untuk satu karakter bersendi
`references/anti-ppt.md`	sebelum mendesain adegan
`references/opener-konsep.md`	OPENER/PROMO sebelum rundown: tiga kandidat konsep, menu 19 konsep (termasuk estafet benda, pamer sistem brand, klaim → cara → hasil, ekosistem UI hidup, pop flat berfoto, menembus bentuk bergradien, dan tur produk berselang klaim, semuanya diturunkan dari layanan/aset/produk brand), panduan layout-warna-ritme, panduan animasi UI untuk app/SaaS, panduan foto dalam opener (input user / generate via MCP), menu fitur, pembuka, penutup, transisi tanpa cut yang dibawa objek, sidik jari struktur — mencegah kerangka template
`references/explainer.md`	bila yang diminta explainer/video penjelasan (kartun+VO, jurnalisme visual foto, katalog putih, sketsa vintage, atau aksi kontinu; default 16:9, 9:16 hanya bila diminta)
`references/architecture.md`	saat scaffold / butuh alasan di balik struktur
`references/techniques.md`	saat membangun adegan & efek (termasuk ukuran shot §3b, grainy gradient §7d, menu gaya render objek §7e, dan video sebagai layer footage §9b)
`references/roadmap.md`	saat mengembangkan skill ini lebih lanjut
`assets/starter-opener.html`	titik awal OPENER/promo — arsitektur + perkakas (8 pintu teks, transisi opsional); SENGAJA tanpa urutan adegan contoh, kerangka dari `opener-konsep.md`
`assets/starter-explainer.html`	EXPLAINER gaya aksi kontinu (vektor): mode aliran (strip + hero + objek dunia) + view peta + whip + contoh mode kolase
`assets/starter-explainer-kartun.html`	EXPLAINER kartun kolase: kertas krem + grain + noda, cutout ilustrasi, Bricolage + Caveat, pill warna
`assets/starter-explainer-jurnalisme.html`	EXPLAINER jurnalisme visual: hitam + grain, foto asli + tag sumber, Barlow Condensed + Plex Mono, highlighter kuning/merah, anotasi putus
`assets/starter-explainer-katalog.html`	EXPLAINER katalog putih: grid samar, cutout foto, Archivo Black + Caveat + Inter, highlighter kuning
`assets/starter-explainer-sketsa.html`	EXPLAINER sketsa vintage: kertas sepia (tekstur CSS), cutout ukiran multiply, Playfair + Garamond + Cinzel, karat & emas
`scripts/serve.py`	dev server no-cache (opsional, butuh Python; hanya bila memakai module lokal)
`scripts/snap.mjs`	VERIFIKASI: potret detik kunci → lembar kontak (opsional, butuh Node + puppeteer)
`scripts/vo-pauses.html`	deteksi jeda VO di browser (pengganti ffmpeg silencedetect, tanpa instal)
`scripts/export-frames.mjs`	EXPORT: render semua frame → MP4, hanya bila diminta (opsional, butuh Node + puppeteer + ffmpeg)

文件	何时阅读
`references/kartun-panggung.md`	舞台卡通：每个场景一个舞台、相机 ≥ 1.08、cut／平移 96 px、关节 rig + 手动 transform、raster 头部 + 局部表情、无 caption、平面色板
`assets/starter-explainer-panggung.html`	舞台卡通 EXPLAINER：舞台系统 + 相机 per 舞台、 `J()` 关节、 `character()` （矢量或 raster 头部）、96 px whoosh、两个舞台示例
`scripts/kepala-ekspresi.py`	将生成的头部转换为开心／焦虑／惊讶 + 眨眼变体，在本地创建（检测瞳孔和嘴巴）
`references/ae-bridge-higgsfield.md`	BRIDGE：通过 MCP Higgsfield 直接构建舞台卡通 — bridge 限制、陷阱（null 960,540；parent 到带 keyframe 的 CAM；reorder 损坏）、per 舞台 CAM 架构、原生 rig、relay contact sheet、交付
`scripts/ae/bridge/aset-svg.py` 、 `svg2png.cjs` 、 `rig-tokoh.py`	BRIDGE：将代码中的 SVG 资产转换为 SVG + manifest + PNG 2×（puppeteer）；每个角色生成 ±90 op 的 `ae_batch` 关节结构
`references/anti-ppt.md`	设计场景前阅读
`references/opener-konsep.md`	OPENER／PROMO 编写 rundown 前：三个候选概念、19 种概念菜单（包括物体接力、品牌系统展示、主张 → 方式 → 结果、活的 UI 生态、照片扁平潮流、穿透渐变形状，以及按主张间隔展示产品，所有内容均从品牌服务／资产／产品推导）、布局—颜色—节奏指南、App／SaaS UI 动画指南、opener 中照片的输入方式（用户输入／通过 MCP 生成）、功能菜单、开场、收尾、对象携场过渡、结构指纹——防止模板骨架
`references/explainer.md`	请求 explainer／解说视频时（卡通 + VO、视觉新闻摄影、白色目录、复古草图或连续动作；默认 16:9，仅在要求时使用 9:16）
`references/architecture.md`	搭建 scaffold／需要了解结构背后的原因时
`references/techniques.md`	构建场景与特效时（包括 shot 尺寸 §3b、grainy gradient §7d、渲染风格菜单 §7e，以及将视频作为 footage 图层 §9b）
`references/roadmap.md`	进一步开发此 skill 时
`assets/starter-opener.html`	OPENER／promo 起点——架构 + 工具（8 个文字入口、可选转场）；有意不包含示例场景顺序，骨架来自 `opener-konsep.md`
`assets/starter-explainer.html`	连续动作 EXPLAINER（矢量）：流动模式（strip + hero + 世界对象）+ 地图 view + whip + 拼贴模式示例
`assets/starter-explainer-kartun.html`	卡通拼贴 EXPLAINER：奶油色纸张 + grain + 污渍、插画 cutout、Bricolage + Caveat、彩色 pill
`assets/starter-explainer-jurnalisme.html`	视觉新闻 EXPLAINER：黑色 + grain、原始照片 + 来源标签、Barlow Condensed + Plex Mono、黄色／红色荧光笔、断续标注
`assets/starter-explainer-katalog.html`	白色目录 EXPLAINER：淡网格、照片 cutout、Archivo Black + Caveat + Inter、黄色荧光笔
`assets/starter-explainer-sketsa.html`	复古草图 EXPLAINER：棕褐色纸张（CSS 纹理）、版画 cutout multiply、Playfair + Garamond + Cinzel、锈迹与金色
`scripts/serve.py`	no-cache 开发 server（可选，需要 Python；仅在使用本地 module 时使用）
`scripts/snap.mjs`	验证：关键秒数截图 → contact sheet（可选，需要 Node + puppeteer）
`scripts/vo-pauses.html`	浏览器中的 VO 停顿检测（替代 ffmpeg silencedetect，无需安装）
`scripts/export-frames.mjs`	导出：渲染全部帧 → MP4，仅在要求时使用（可选，需要 Node + puppeteer + ffmpeg）