Hướng dẫn làm motion video bằng Claude Opus 5.5

Nguồn: Bài này tóm tắt và diễn giải lại từ How to build motion design studio with Opus 5.5 (Full-course) của Movez (@null(https://x.com/0xMovez)), đăng ngày 27/09/2026. Code và prompt template là của tác giả. Danh sách nguồn đầy đủ ở cuối bài.

Sau khi Claude Opus 5.5 ra mắt ngày 22/09/2026, trên X xuất hiện rất nhiều video motion design (đồ họa chuyển động) được quảng cáo là "chỉ cần một prompt". Thực tế, phần lớn video đẹp nhất đi kèm một bản yêu cầu rất dài (brief), các gói hướng dẫn cài thêm cho Claude (skill), API key và nhiều vòng chỉnh sửa. Như Thariq (team Claude Code) nhận xét: "the post: 'Claude one-shot this' - the prompt: 10k characters with good takes plus skills, examples and API keys".

Bài này hướng dẫn từng bước để bạn tự làm được một video như vậy.

Bạn sẽ làm được gì

• Hiểu cách Claude biến code thành một file video MP4

• Làm video đầu tiên chỉ với một câu prompt

• Làm chuyển động trông tự nhiên, khớp hình với nhịp nhạc

• Cho Claude tự xem lại và sửa video của chính nó

• Viết prompt cho video sản phẩm, video dài, và đóng gói thành lệnh dùng lại được

Yêu cầu

• Claude Code (bản chạy trong terminal), dùng model Opus 5.5. Bản chat trên web không làm được, lý do ở mục 1.

• Máy macOS hoặc Linux, có Node 22+, Python 3, ffmpeg.

• Biết JavaScript cơ bản và dùng được terminal.

• Chi phí: video 15 giây ở mức effort cao tốn một lượng token đáng kể. Video dài vài phút có thể chạy hàng giờ. Nên thử với video ngắn trước.

1. Ý tưởng cốt lõi: video là một hàm của thời gian

Claude không tạo video, Claude viết chương trình vẽ ra video

Claude chỉ trả về text, không xuất được file MP4. Vì vậy mọi video trong trào lưu này đều là một chương trình do Claude viết, sau đó các công cụ khác chạy chương trình đó để ra video.

Hãy hình dung video là một tập giấy lật (flipbook). Claude không vẽ từng trang. Nó viết một hàm tên seek(t): đưa vào thời điểm t (tính bằng giây), hàm vẽ ra đúng trang ở thời điểm đó.

Hàm này tất định (deterministic): cùng một t thì luôn vẽ ra cùng một hình, bất kể máy nhanh hay chậm, chạy lần thứ mấy.

Từ code thành MP4

Có hai công cụ tham gia:

• Playwright: thư viện điều khiển trình duyệt Chrome bằng code, chạy ngầm không hiện cửa sổ (gọi là headless browser).

• ffmpeg: công cụ dòng lệnh để cắt, ghép, chuyển đổi video và âm thanh.

Quy trình render:

index.html (chứa hàm seek(t), vẽ lên canvas)
   → Playwright mở trang, gọi seek(t) cho từng khung hình
     (video 15 giây × 60 khung hình/giây = 900 lần)
   → chụp mỗi khung hình thành ảnh PNG
   → ffmpeg ghép các ảnh thành file MP4

Tại sao phải làm vậy? Animation trên web thông thường chạy theo đồng hồ thật (setTimeout, requestAnimationFrame). Máy lag là hình giật, và mỗi lần quay màn hình lại ra một kết quả khác. Ở đây thời gian do chương trình render tự "tua" tới, nên lần render nào cũng giống hệt nhau. Muốn sửa một chi tiết, chỉ cần sửa code rồi render lại.

Vì sao bắt buộc dùng Claude Code

Claude Code chạy được lệnh trên máy bạn. Nhờ vậy nó tự render video, tự cắt video thành ảnh để xem lại, tự đo nhịp nhạc, rồi tự sửa lỗi. Bản chat trên web chỉ viết được code, không làm được vòng kiểm tra này. Đây chính là khác biệt giữa video "tạm được" và video đẹp.

Lưu ý khi chọn công cụ

Tommy Rossi phát hiện: nếu không được chỉ định, Opus mặc định dùng đúng cách trên (một file HTML, không cài thư viện ngoài) và bỏ qua các framework làm video bằng code như Remotion hay HyperFrames (xem mục 8.4). Muốn dùng framework thì phải nói rõ trong prompt.

2. Setup

2.1. Cài đặt bắt buộc

# macOS (Linux: cài node, ffmpeg, python3 qua trình quản lý gói của distro)
brew install node ffmpeg python

# Tạo project và cài Playwright + trình duyệt Chromium
mkdir motion-studio && cd motion-studio && npm init -y
npm i -D playwright && npx playwright install chromium

2.2. Cài đặt tùy chọn

Chỉ cài khi cần dùng tới:

# Để đo nhịp từ file nhạc có sẵn (mục 5.2)
pip install numpy librosa soundfile

# Để dùng framework Remotion hoặc HyperFrames (mục 8.4)
npx skills add remotion-dev/skills
npx skills add heygen-com/hyperframes

# Để làm video phong cách vẽ tay
claude plugin marketplace add buildwithhanif/claude-animation-skill
claude plugin install claude-animation@claude-animation-skill

2.3. Cấu trúc thư mục

Đây là toàn bộ các file sẽ xuất hiện trong bài. Bạn chưa cần tạo hết ngay, mỗi file sẽ được giới thiệu ở mục tương ứng.

motion-studio/
├── CLAUDE.md          ← bạn tạo (mục 2.5): luật chung cho Claude
├── index.html         ← Claude viết: chứa seek(t), vẽ video (mục 4.1)
├── render.mjs         ← Claude viết hoặc bạn copy: xuất MP4 (mục 4.2)
├── lib/motion.js      ← hàm spring cho chuyển động (mục 4.3)
├── beats.py           ← đo nhịp nhạc (mục 5.2)
├── sfx.mjs            ← tạo hiệu ứng âm thanh (mục 5.3)
├── .env               ← API key (nếu có)
├── audio/             ← file nhạc
├── refs/              ← video/ảnh mẫu để tham khảo
├── docs/              ← Claude ghi style guide, danh sách cảnh
├── prompts/           ← các prompt dùng lại (mục 6.2)
└── out/               ← video và ảnh xuất ra

2.4. Chọn mức effort

Effort là mức "suy nghĩ kỹ" của model. Mức càng cao thì Claude lập kế hoạch và tự kiểm tra càng nhiều, đổi lại chạy chậm hơn và tốn token hơn. Opus 5.5 mặc định chạy medium, còn các video nổi bật đều chạy xhigh hoặc max.

Chạy Claude Code:

claude --model claude-opus-5-5

Sau đó gõ /model trong Claude Code, chọn Opus 5.5 và chỉnh effort.

2.5. Tạo file CLAUDE.md

Claude Code tự đọc file CLAUDE.md ở thư mục gốc project mỗi lần chạy. Đặt luật chung ở đây để không phải nhắc lại trong từng prompt.

Nội dung file gồm 4 phần:

Bạn chưa cần hiểu hết từng dòng, các thuật ngữ sẽ được giải thích ở những mục sau. Tạo motion-studio/CLAUDE.md:

# Motion studio rules

## Render contract
- Every film is a pure function of time: `window.seek(t)` paints frame t.
- No CSS transitions, no setTimeout, no requestAnimationFrame in render mode,
  no state carried between frames. Seeded noise only (mulberry32), never Math.random.
- Render with `node render.mjs`, encode H.264 yuv420p, CRF 16.

## Look
- Banned defaults: centered title on gradient, everything fading in,
  corner labels and frame borders, glow on UI chrome, generic particle bursts.
- One display face, one UI face. One accent color unless the brief says otherwise.
- Every 2 to 4 seconds something new must happen on screen.

## Sound
- Score and SFX are synthesized in code unless a track is supplied.
- Place hits on the measured beat grid (beats.json). Loudness -14 LUFS.

## Loop before you show me anything
1. Render one frame per beat as a contact sheet and LOOK at it.
2. Score it 1-10 on: hook in first 2s, readability at phone size,
   motion quality, variety, brand accuracy, sound sync.
3. Fix the 3 worst problems. Repeat until every score is 8+.
4. Only then do the full render.

3. Làm video đầu tiên

Mục này đi trọn một vòng từ prompt tới file MP4. Các mục sau sẽ giải thích chi tiết từng phần.

Bước 1: Mở Claude Code

cd motion-studio
claude --model claude-opus-5-5

Gõ /model và đặt effort xhigh.

Bước 2: Dán prompt

Đây là prompt được nhiều người dùng nhất, ví dụ Stephan Livera (effort max) và Rob Hallam (effort xhigh, ra luôn cả âm thanh):

make a dynamic 15-second motion graphics video that shows what an
incredible motion designer you are, like it's your showreel for a résumé.
go all out.

Vì sao một câu ngắn lại hiệu quả:

• "showreel for a résumé": showreel là video ngắn dân motion dùng để khoe tay nghề, giống portfolio dạng video. Thể loại này có sẵn quy tắc (cắt cảnh nhanh, mỗi cảnh một kỹ thuật), Claude đã biết nó trông thế nào.

• "what an incredible motion designer you are": video nói về chính Claude, nên nó không cần hiểu sản phẩm hay thông điệp nào của bạn. Nó chỉ cần khoe kỹ thuật, vì vậy khó làm sai.

• "15-second": đủ ngắn để làm xong trong một lượt, đủ dài cho 6–8 cảnh.

• "go all out" ("chơi hết mình"): câu khích để Claude làm công phu hơn. Nó không thay được việc đặt effort ở bước 1.

Bước 3: Chờ Claude làm việc

Claude sẽ tự viết index.html (chứa hàm seek(t)) và một script render (thường là render.mjs, như quy định trong CLAUDE.md), sau đó tự render, tự xem lại và sửa.

Trong lúc chờ, bạn có thể mở index.html bằng trình duyệt để xem bản chạy thử.

Bước 4: Xem kết quả

Khi xong, video nằm trong thư mục out/. Nếu muốn tự render lại nhanh để xem:

node render.mjs --sub 1

Kết quả là out/silent.mp4 (chưa có tiếng, phần âm thanh xem mục 5).

Nhược điểm của prompt này

Vì hàng trăm người dùng đúng prompt này, video ra trông na ná nhau. Repo tổng hợp của athemeroy gọi hiện tượng này là brief contagion ("lây prompt"). Chỉ nên dùng prompt này để kiểm tra setup đã chạy được chưa. Để làm video thật, xem mục 7.

4. Bên trong engine render

Bạn không cần tự gõ phần này, vì Claude sẽ tự viết một phiên bản tương tự. Hãy đọc để hiểu Claude đang làm gì và biết sửa ở đâu khi cần. Muốn chủ động hơn, bạn có thể lưu các file này vào project làm khung sẵn, rồi bảo Claude dùng lại.

4.1. index.html: hàm seek(t)

Một vài khái niệm trong code:

• canvas: thẻ HTML cho phép vẽ hình bằng JavaScript.

• spring(): công thức lò xo để tạo chuyển động tự nhiên (giải thích ở mục 4.3).

• rng(seed): hàm random có "hạt giống". Math.random mỗi lần cho số khác, nên hai lần render sẽ ra hai video khác nhau. rng(7) thì lúc nào cũng cho cùng một dãy số. mulberry32 (nhắc tới trong CLAUDE.md) là tên thuật toán này.

• SCENES: danh sách các cảnh. Mỗi cảnh là một object { from, to, draw(t) }, thêm cảnh thì thêm object.

<style>html,body{margin:0;background:#141413}canvas{display:block}</style>
<canvas id="c" width="1080" height="1920"></canvas>
<script>
const W = 1080, H = 1920, DUR = 15;
const g = document.getElementById('c').getContext('2d');
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));

// Closed-form damped spring, 0 → 1. Pure function of time.
function spring(t, k = 170, d = 26) {
  if (t <= 0) return 0;
  const w0 = Math.sqrt(k), z = d / (2 * w0);
  if (z < 1) {
    const wd = w0 * Math.sqrt(1 - z * z);
    return 1 - Math.exp(-z * w0 * t) * (Math.cos(wd * t) + (z * w0 / wd) * Math.sin(wd * t));
  }
  return 1 - Math.exp(-w0 * t) * (1 + w0 * t);      // z >= 1 treated as critical
}

// Seeded noise, never Math.random: the render must be identical every run
function rng(seed) { return () => { seed |= 0; seed = seed + 0x6D2B79F5 | 0;
  let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
  t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; return ((t ^ t >>> 14) >>> 0) / 4294967296; }; }

const SCENES = [
  { from: 0, to: 3, draw(t) {                        // kinetic title
      const s = spring(t - 0.1, 220, 22);
      g.save(); g.translate(W / 2, H / 2); g.scale(0.6 + 0.4 * s, 0.6 + 0.4 * s);
      g.globalAlpha = clamp(t * 4);
      g.fillStyle = '#F0EEE6'; g.font = '700 190px "Source Serif 4", serif';
      g.textAlign = 'center'; g.fillText('MOTION', 0, 0);
      g.fillStyle = '#D97757'; g.fillRect(-320 * s, 50, 640 * s, 18);
      g.restore();
  }},
  { from: 3, to: 6, draw(t) {                        // grid of squares on a stagger
      const r = rng(7);
      for (let i = 0; i < 48; i++) {
        const x = (i % 6) * 170 + 115, y = Math.floor(i / 6) * 170 + 360;
        const s = spring(t - i * 0.03 - r() * 0.1, 260, 20);
        g.fillStyle = i % 7 ? '#F0EEE6' : '#D97757';
        g.fillRect(x - 60 * s, y - 60 * s, 120 * s, 120 * s);
      }
  }},
  // ... more scenes: one object per shot
];

function draw(t) {
  g.fillStyle = '#141413'; g.fillRect(0, 0, W, H);
  for (const s of SCENES) if (t >= s.from && t < s.to) s.draw(t - s.from);
}
window.seek = (t) => { draw(t); return true; };

// Live preview in a normal browser, off during headless render
if (!navigator.webdriver) {
  const t0 = performance.now();
  (function loop() { draw(((performance.now() - t0) / 1000) % DUR); requestAnimationFrame(loop); })();
}
</script>

Cách hoạt động:

• draw(t) xóa nền, tìm cảnh đang chiếu tại thời điểm t rồi gọi hàm vẽ của cảnh đó.

• window.seek là "cổng" để Playwright gọi từ bên ngoài.

• Đoạn cuối dùng để xem thử: mở file bằng trình duyệt thường thì animation tự chạy. Khi Playwright điều khiển, navigator.webdriver bằng true nên phần này tắt đi, để Playwright tự gọi seek.

4.2. render.mjs: xuất video

Lưu cạnh index.html, chạy node render.mjs --sub 1 để render nhanh. Kết quả ra out/silent.mp4.

// node render.mjs --fps 60 --dur 15 --sub 4
import { chromium } from 'playwright';
import { spawn } from 'node:child_process';
import { mkdirSync } from 'node:fs';

const arg = (k, d) => { const i = process.argv.indexOf('--' + k); return i > 0 ? Number(process.argv[i + 1]) : d; };
const FPS = arg('fps', 60), DUR = arg('dur', 15), SUB = arg('sub', 4);
mkdirSync('out', { recursive: true });

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1080, height: 1920 }, deviceScaleFactor: 1 });
await page.goto('file://' + process.cwd() + '/index.html');
await page.evaluate(() => document.fonts.ready);       // canvas text needs loaded fonts

// tmix averages SUB consecutive subframes; select keeps the last of each group
const vf = `tmix=frames=${SUB},select='eq(mod(n\\,${SUB})\\,${SUB - 1})',setpts=N/${FPS}/TB`;
const ff = spawn('ffmpeg', ['-y', '-f', 'image2pipe', '-framerate', String(FPS * SUB), '-i', '-',
  '-vf', vf, '-r', String(FPS), '-c:v', 'libx264', '-crf', '16', '-pix_fmt', 'yuv420p', 'out/silent.mp4'],
  { stdio: ['pipe', 'inherit', 'inherit'] });

const total = Math.round(DUR * FPS * SUB);
for (let i = 0; i < total; i++) {
  await page.evaluate((t) => window.seek(t), i / (FPS * SUB));
  const png = await page.locator('#c').screenshot({ type: 'png' });
  if (!ff.stdin.write(png)) await new Promise((r) => ff.stdin.once('drain', r));
  if (i % (FPS * SUB) === 0) console.log(`rendered ${i / (FPS * SUB)}s / ${DUR}s`);
}
ff.stdin.end();
await new Promise((r) => ff.on('close', r));
await browser.close();

Các điểm cần hiểu:

• Tham số: --fps là số khung hình mỗi giây, --dur là độ dài (giây), --sub là số khung phụ (xem ngay dưới).

• Motion blur với --sub 4: motion blur là vệt nhòe tự nhiên khi vật chuyển động nhanh, giống trong ảnh chụp. Để giả lập, mỗi khung hình được chụp thành 4 ảnh ở các thời điểm lệch nhau một chút (gọi là subframe), rồi ffmpeg chồng 4 ảnh lại lấy trung bình. Đổi lại, render lâu gấp 4 lần (15 giây video = 3.600 ảnh). Khi xem thử, hãy dùng --sub 1.

• Định dạng xuất: H.264/yuv420p là định dạng MP4 mà điện thoại và mạng xã hội nào cũng phát được. CRF 16 là mức nén nhẹ, cho chất lượng cao.

4.3. Spring: chuyển động trông tự nhiên

Easing và spring khác nhau thế nào. Cách làm animation quen thuộc là easing: vật đi từ A tới B trong đúng X giây theo một đường cong định sẵn (ví dụ ease-in-out trong CSS). Spring thì giả lập một lò xo: vật lao tới, vượt quá đích một chút (overshoot) rồi nảy về vị trí. Chuyển động kiểu này trông "có trọng lượng" và tự nhiên hơn.

Tại sao phải dùng công thức (closed-form). Có hai cách tính lò xo:

• Mô phỏng: tính từng bước, khung sau dựa vào khung trước. Muốn biết khung 812 thì phải chạy lại từ khung 0.

• Công thức: đưa t vào là ra vị trí ngay, giống tra bảng.

Renderer nhảy thẳng tới từng t, nên bắt buộc dùng cách thứ hai. Hàm spring() ở mục 4.1 chính là công thức này.

Khi một giá trị đổi đích nhiều lần (ví dụ con trỏ chuột di chuyển qua nhiều điểm), đừng tính lại spring từ đầu cho mỗi đích mới, vì vật sẽ khựng lại rồi mới chạy tiếp. Thay vào đó, cộng dồn một spring cho mỗi lần đổi đích. Vật đang bay dở vẫn đổi hướng mượt sang đích mới.

Lưu đoạn code sau vào lib/motion.js, chép kèm hai hàm spring() và clamp() từ mục 4.1. Nếu muốn import file này vào index.html, đổi thẻ <script> thành <script type="module">.

// keys: [[time, value], ...] sorted by time. Returns the value at t.
export function track(t, keys, k = 170, d = 26) {
  let v = keys[0][1];
  for (let i = 1; i < keys.length; i++)
    v += (keys[i][1] - keys[i - 1][1]) * spring(t - keys[i][0], k, d);
  return v;
}

// Tab indicator that stretches: leading edge is stiffer than trailing edge
export function indicator(t, stops) {             // stops: [[time, x], ...]
  const lead  = track(t, stops, 320, 30);
  const trail = track(t, stops, 140, 22);
  return { left: Math.min(lead, trail), right: Math.max(lead, trail) + 120 };
}

// Text inside a morphing box: in after the morph starts, out before the next one
export function swapAlpha(t, tIn, tOut) {
  return Math.min(clamp((t - tIn - 0.08) / 0.12), clamp((tOut - 0.1 - t) / 0.1));
}

// Seamless loop: pin the last frame to the first
export const loopT = (t, dur) => ((t % dur) + dur) % dur;

Chỉnh độ nảy bằng k và d. k là độ cứng của lò xo: càng lớn thì chuyển động càng nhanh, càng gắt. d là độ giảm chấn: càng nhỏ thì càng nảy nhiều. Code mặc định dùng k = 170, d = 26. Tác giả gợi ý 4 nhóm (bài gốc không ghi số cụ thể):

Nếu video đã có mà chuyển động còn cứng, dán prompt này để Claude đổi toàn bộ sang spring:

Replace every easing curve with closed-form springs from lib/motion.js. Tiny overshoot on UI,
none on type. Any value with more than one target uses track().

5. Âm thanh

5.1. Vài khái niệm

• Beat: nhịp phách của bài nhạc, chỗ bạn hay gõ chân theo.

• BPM: số beat mỗi phút. 120 BPM nghĩa là cứ 0,5 giây có một beat.

• Downbeat: phách mạnh ở đầu mỗi ô nhịp, thường cứ 4 beat có một.

• Beat grid: lưới thời gian các beat, dùng để canh lúc nào hình thay đổi.

• SFX: hiệu ứng âm thanh như tiếng click, tiếng vút (whoosh).

Để hình khớp nhạc có hai cách. Nếu có file nhạc, dùng script đo xem beat rơi vào giây nào (mục 5.2). Nếu không có, bảo Claude tự tạo âm thanh bằng code, tức là tạo sóng âm từ công thức toán học, nên biết chính xác từng âm nằm ở đâu (mục 5.3).

Ví dụ: phim Steve Jobs của @oozn tạo nhạc bằng Node, mọi lần chuyển cảnh khớp đúng 120 BPM. Vox tạo nhạc bằng Python rồi chỉnh video theo từng giây.

5.2. Đo beat từ file nhạc

Cần numpy và librosa (mục 2.2). Đặt nhạc vào audio/track.wav, lưu script dưới thành beats.py, rồi chạy:

python beats.py audio/track.wav > beats.json

# python beats.py song.wav > beats.json
import sys, json, numpy as np, librosa

y, sr = librosa.load(sys.argv[1], sr=None, mono=True)
tempo, frames = librosa.beat.beat_track(y=y, sr=sr, units="frames")
beats = librosa.frames_to_time(frames, sr=sr).round(3).tolist()

onset = librosa.onset.onset_strength(y=y, sr=sr)
peaks = librosa.util.peak_pick(onset, pre_max=3, post_max=3, pre_avg=3,
                               post_avg=5, delta=0.5, wait=10)
json.dump({
    "bpm": float(np.atleast_1d(tempo)[0]),
    "beats": beats,                                   # state changes go here
    "downbeats": beats[::4],                          # big moments go here
    "hits": librosa.frames_to_time(peaks, sr=sr).round(3).tolist(),  # SFX go here
}, sys.stdout, indent=1)

File beats.json có 3 danh sách mốc thời gian:

5.3. Tạo hiệu ứng âm thanh bằng code

Mỗi âm là một sóng âm tắt dần theo thời gian:

• click: âm cao, tắt rất nhanh

• pop: âm cao dần, tắt nhanh

• thump: âm trầm, tắt chậm

• whoosh: tiếng xè xè to dần rồi nhỏ dần

Script đọc file cues.json, là danh sách "giây nào phát tiếng gì", ví dụ [{"t": 0.5, "type": "click"}]. Claude sẽ tạo file này từ beats.json hoặc từ các mốc chuyển cảnh. Kết quả ghi ra file WAV, không cần thư viện ngoài.

// node sfx.mjs cues.json out/sfx.wav     cues: [{"t":0.5,"type":"click"}, ...]
import { readFileSync, writeFileSync } from 'node:fs';
const SR = 48000, cues = JSON.parse(readFileSync(process.argv[2], 'utf8'));
const buf = new Float32Array(Math.ceil((Math.max(...cues.map(c => c.t)) + 2) * SR));

let s = 42; const noise = () => (s = (s * 1664525 + 1013904223) >>> 0) / 2147483648 - 1;
const VOICES = {
  click:  [0.05, t => Math.sin(2 * Math.PI * 1800 * t) * Math.exp(-t * 90) * 0.5],
  pop:    [0.15, t => Math.sin(2 * Math.PI * (600 + 900 * t) * t) * Math.exp(-t * 30) * 0.4],
  thump:  [0.50, t => Math.sin(2 * Math.PI * (90 - 60 * t) * t) * Math.exp(-t * 9) * 0.9],
  whoosh: [0.35, t => noise() * Math.sin(Math.PI * Math.min(1, t / 0.35)) * 0.25],
};
for (const c of cues) {
  const [len, fn] = VOICES[c.type], start = Math.floor(c.t * SR);
  for (let i = 0; i < len * SR && start + i < buf.length; i++) buf[start + i] += fn(i / SR);
}

const n = buf.length, b = Buffer.alloc(44 + n * 2);      // 16-bit mono WAV
b.write('RIFF', 0); b.writeUInt32LE(36 + n * 2, 4); b.write('WAVEfmt ', 8);
b.writeUInt32LE(16, 16); b.writeUInt16LE(1, 20); b.writeUInt16LE(1, 22);
b.writeUInt32LE(SR, 24); b.writeUInt32LE(SR * 2, 28); b.writeUInt16LE(2, 32); b.writeUInt16LE(16, 34);
b.write('data', 36); b.writeUInt32LE(n * 2, 40);
for (let i = 0; i < n; i++) b.writeInt16LE(Math.round(Math.max(-1, Math.min(1, buf[i])) * 32767), 44 + i * 2);
writeFileSync(process.argv[3], b);

Nhạc nền thì giao cho Claude viết theo cách tương tự, chỉ phức tạp hơn.

5.4. Ghép tiếng vào video

CLAUDE.md yêu cầu âm lượng -14 LUFS. LUFS là đơn vị đo độ to mà tai người cảm nhận. -14 LUFS là mức YouTube và Instagram dùng, để video không bị nền tảng tự vặn nhỏ đi.

Bài gốc không đưa lệnh cụ thể cho bước này. Đây là một lệnh ffmpeg thông dụng để ghép và chuẩn hóa âm lượng:

ffmpeg -i out/silent.mp4 -i out/sfx.wav \
  -af loudnorm=I=-14:TP=-1 -c:v copy -c:a aac -shortest out/final.mp4

Trong thực tế, Claude thường tự làm bước này nếu CLAUDE.md đã có yêu cầu.

6. Cho Claude tự xem lại video

Opus 5.5 đọc được ảnh nhưng không xem được video. Vì vậy ta dùng ffmpeg cắt video thành ảnh để Claude "xem", chấm điểm và sửa. Đây là bước tạo khác biệt lớn nhất về chất lượng.

Các video đẹp đều qua nhiều vòng như vậy, không phải "một prompt": phim màu nước của @mablesjoseph dùng 163 lần gọi model trong gần 7 tiếng, video của DreW (1,7 triệu view) cũng sửa nhiều vòng.

6.1. Tạo ảnh để review

Thường thì Claude tự chạy các lệnh này, bạn chỉ cần biết để hiểu nó đang làm gì. Nên review trên bản render nhanh (out/silent.mp4 với --sub 1) trước khi render bản cuối.

Contact sheet là một ảnh ghép nhiều khung hình nhỏ thành lưới, giống tờ ảnh thử của thợ ảnh phim, nhìn một lần là thấy cả video.

# Contact sheet: 2 khung hình mỗi giây, lưới 6 cột → nhìn tổng thể nhịp và bố cục
ffmpeg -i out/silent.mp4 -vf "fps=2,scale=270:-1,tile=6x5" -frames:v 1 out/contact.png

# 12 khung hình liên tiếp quanh giây 4.2 → bắt lỗi giật, chữ chồng lên nhau
ffmpeg -ss 4.1 -i out/silent.mp4 -vf "scale=320:-1,tile=12x1" -frames:v 1 out/strip.png

# Thu nhỏ còn 360px (cỡ màn hình điện thoại) → kiểm tra chữ có đọc được không
ffmpeg -i out/silent.mp4 -vf "fps=1,scale=360:-1,tile=5x3" -frames:v 1 out/phone.png

# Phát 2 lần liền nhau → kiểm tra chỗ nối khi video lặp lại có bị giật không
ffmpeg -stream_loop 1 -i out/silent.mp4 -c copy out/loop_check.mp4

Kiểm tra tính tất định: render hai lần rồi so mã hash (mã "vân tay" của file). Hai mã giống nhau nghĩa là hai file giống hệt nhau.

node render.mjs --dur 5 --fps 60 --sub 1 && md5 out/silent.mp4   # Linux: md5sum
# chạy lại lần nữa, so sánh hai mã

6.2. Prompt review

Lưu thành prompts/critique-pass.txt để dùng lại (skill ở mục 8.2 sẽ gọi file này). Dán vào Claude Code sau mỗi lần render.

Prompt yêu cầu Claude đóng vai đạo diễn khó tính, chấm điểm 1–10 theo 7 tiêu chí:

Sau đó Claude liệt kê 3 lỗi lớn nhất kèm thời điểm, sửa, render lại và chấm lại. Lặp tới khi mọi tiêu chí đạt từ 8 điểm.

Open out/contact.png, out/strip.png and out/phone.png and look at them properly.
Be a harsh motion director, not a proud author.

Score 1-10: hook in first 2s · readability at phone size · motion quality (springs,
no dead frames) · variety (new thing every 2-4s) · composition · brand accuracy · sound sync.

List the 3 biggest problems with timestamps. Hunt specifically for: text overlapping during
swaps, anything sliding instead of easing, corner labels and frame borders, centered-on-gradient
shots, blurry scaled text, a dead beat with nothing happening, a stutter at the loop seam.

Fix them, re-render only the affected seconds, show me the new contact sheet and new scores.

7. Viết prompt cho video thật

Các prompt dưới đây dán vào ô chat của Claude Code. Thay các chỗ [...] bằng thông tin của bạn.

7.1. Video giới thiệu sản phẩm

Tony Dinh làm video launch trong chưa tới 30 phút (một năm trước anh ấy trả hơn $1.000 để thuê làm video tương tự). Anh ấy chỉ thêm ba thứ vào prompt: URL sản phẩm, yêu cầu dùng hình ảnh thật, và yêu cầu có nhạc.

Template dưới yêu cầu Claude:

1. Vào website, chụp màn hình, lấy logo, màu và font thật. Không tự vẽ lại giao diện.

2. Kể chuyện theo 5 nhịp: vấn đề → sản phẩm xuất hiện → 3 tính năng → một con số chứng minh → logo và lời kêu gọi hành động (CTA, ví dụ "Dùng thử miễn phí").

3. Nhạc 120 BPM tự tạo, tiếng click và whoosh khớp nhịp.

4. Xuất khung dọc 9:16 trước, sau đó vuông 1:1 và ngang 16:9.

5. Gửi contact sheet cho bạn duyệt trước khi render bản cuối.

Make a dynamic 20-second motion graphics video for [PRODUCT] ([URL]), with the energy
of a motion designer's showreel. Go all out.

Assets
- Visit the site. Use real screenshots (Playwright), the real logo, real colors and fonts.
  Save everything to ./assets and list what you found before you animate.
- Never redraw the product UI from imagination. Crop and animate the real thing.

Story (one beat each, 2 to 4 seconds)
1. Hook: the problem in 5 words of huge kinetic type.
2. The product appears, the UI assembles itself piece by piece.
3. Three features, each as a UI moment with a cursor doing a real action.
4. One number that proves it works: [METRIC].
5. Logo lockup + [CTA].

Sound
- Original music, 120 BPM, synthesized in code. UI clicks and whooshes on the beat.

Format: 1080x1920 (9:16) first, then 1:1 and 16:9 from the same timeline.
Before the full render, show me a contact sheet of one frame per beat.

(kinetic type: chữ chuyển động theo nhịp; logo lockup: logo đặt cạnh tên thương hiệu theo bố cục cố định)

Lưu ý:

• Mỗi thương hiệu làm trong một phiên Claude Code (không /clear, không mở phiên mới). Theo Rob Hallam, video thứ hai trong cùng phiên làm nhanh hơn vì Claude đã có sẵn renderer và phần âm thanh.

• API key để trong file .env, trong prompt chỉ ghi tên biến, ví dụ "the ElevenLabs key is ELEVENLABS_API_KEY in .env". Không dán key thật vào prompt, nhất là khi định chụp màn hình chia sẻ.

• Có thể thêm nhân vật biết nói bằng ElevenLabs (dịch vụ tạo giọng đọc bằng AI) như achxvi đã làm.

7.2. Dùng video hoặc ảnh mẫu

Không có mẫu tham khảo, Claude sẽ quay về style mặc định: chữ căn giữa, nền gradient, mọi thứ hiện dần.

Rexan Wong nhận thấy gọi đúng tên một phong cách (ví dụ "Swiss typography", "phong cách keynote của Apple") hiệu quả hơn tả dài dòng. Nếu có video hoặc ảnh mẫu thì càng tốt, vì Claude sẽ bắt chước được nhịp cắt cảnh, font và kiểu chuyển cảnh.

Tìm video mẫu ở: whatships.com (video launch sản phẩm), Dribbble mục motion, video launch của đối thủ.

Đặt video mẫu vào ./refs/launch.mp4 rồi dán prompt dưới. Claude sẽ tự cắt ảnh, viết bản mô tả phong cách (style_guide.md) và danh sách cảnh (shotlist.md), rồi dừng lại chờ bạn duyệt. Câu quan trọng nhất là "Take the grammar of the reference, never its content": học cách làm (nhịp, bố cục, chuyển cảnh), không chép nội dung (logo, nhân vật).

Reference: ./refs/launch.mp4 (and ./refs/frames/*.png)

1. Extract one frame every 0.5s with ffmpeg. Study them.
2. Write ./docs/style_guide.md: palette (hex), type (family, weight, tracking),
   shot lengths, transition types, camera moves, texture/grain, how text enters and exits.
3. Write ./docs/shotlist.md for a [DURATION]s video about [SUBJECT] in THAT style.
   Take the grammar of the reference, never its content, logos or characters.
4. Show me both files. Wait for my OK before any code.

Khi đã có mẫu, chỉ cần nói video phải trông thế nào và giới hạn gì (màu, font, độ dài), đừng chỉ định thư viện hay kỹ thuật vẽ. Pleometric từng gợi ý dùng p5.js (thư viện vẽ đồ họa), nhưng Claude tự viết renderer riêng và ra kết quả đẹp hơn.

7.3. Video giao diện biến hình (spec dạng danh sách trạng thái)

Nếu bạn mới làm video đầu tiên, có thể bỏ qua mục này và quay lại sau.

Prompt được lưu lại nhiều nhất tuần sau khi Opus 5.5 ra mắt là một bản spec dạng XML, dùng bởi @null(https://x.com/twoclipping/status/2103273003555402193) (907 nghìn view) và @null(https://x.com/verbove/status/2103483957266268381). Ý tưởng:

• Cả video chỉ có một khung hình chữ nhật, không cắt cảnh.

• Khung này liên tục biến hình (morph): đổi kích thước, độ bo góc, màu, lần lượt thành nút bấm → thanh loading → biểu đồ → ô tìm lệnh ⌘K...

• Mỗi lần biến hình đều do một con trỏ chuột "bấm" vào.

• Hình cuối trùng hình đầu nên video lặp liền mạch.

Dev sẽ thấy quen: đây là một state machine (chuỗi trạng thái), chỉ khác là mỗi lần đổi trạng thái được quay lại thành video.

Bản spec có 6 phần:

<inputs>
Ask me for: my product + URL, 8 to 12 UI states that tell its story, the real data shown in
each state, brand colors + fonts + one accent, a royalty-free track near 120 BPM, formats.
</inputs>

<direction>
Product-film UI motion. One container never cuts: every state is the same element changing
size, radius and fill while its content swaps behind a short blur. A cursor drives every change.
Warm neutral canvas, one accent. Springs with at most a tiny overshoot.
Banned: bouncy easing, glows, gradients on UI chrome, particle bursts, dead time.
</direction>

<structure>
120 BPM, 8 bars, something happens on every beat.
logo → CTA button → email field (typed) → loader → success check → dashboard card
→ chart draws itself → tooltip on hover → ⌘K palette → toast → logo.
</structure>

<build>
1. One HTML file, one canvas, window.seek(t). No CSS transitions, no timers, no carried state.
2. Closed-form springs. A value with many targets = sum of one spring per change.
3. Text inside a morphing container enters after the morph starts, leaves before the next one.
4. Tab indicators: leading and trailing edges on different springs so they stretch.
5. Beat grid from the track (numpy/librosa). Start on a downbeat. UI sounds on measured peaks.
6. Render in headless Chrome at 60 fps, 4 subframes per frame, blended for motion blur.
</build>

<gotchas>
Never use will-change on anything the camera scales (blurry text).
The last frame must equal the first, cursor position and velocity included.
</gotchas>

<start>
Ask for the inputs, then show me the state list on the beat grid before writing code.
</start>

8. Nâng cao

8.1. Xuất nhiều tỉ lệ khung hình

Ba tỉ lệ phổ biến: 9:16 (dọc, cho TikTok/Reels), 1:1 (vuông), 16:9 (ngang, cho YouTube).

Để một video xuất được nhiều tỉ lệ, hãy viết vị trí và kích thước theo tỉ lệ khung hình thay vì số pixel cố định. Ví dụ, thay vì x = 540 thì viết x = W / 2, thay vì cỡ chữ 190px thì viết H * 0.1. Khi đổi khung sang 1080×1080, bố cục tự co lại. Sau đó bảo Claude render song song ba tỉ lệ, và sắp xếp lại chữ, giao diện cho từng tỉ lệ thay vì cắt xén từ bản ngang.

8.2. Đóng gói thành skill

Skill là một file hướng dẫn mà Claude Code tự nạp khi bạn gõ /tên-skill. Nhờ đó bạn không phải dán lại prompt dài mỗi lần.

Lưu nội dung dưới vào .claude/skills/motion-reel/SKILL.md. Từ đó, làm video mới chỉ cần gõ:

/motion-reel for [URL], 20s, vertical, reference ./refs/frame.png

Skill này dùng lại các file đã tạo ở các mục trước: lib/motion.js (mục 4.3), beats.py và sfx.mjs (mục 5), prompts/critique-pass.txt (mục 6.2).

---
name: motion-reel
description: Make a product or showreel motion video rendered from code. Use when the
  user asks for a launch video, showreel, product reel, animated explainer or motion ad.
---

# Motion reel

## Inputs to collect first
Product + URL, duration, formats (9:16 / 1:1 / 16:9), brand colors + fonts,
a reference (frame, video or image folder), music (file or "synthesize").

## Pipeline
1. Gather assets from the URL with Playwright into ./assets. List them.
2. If a reference exists, write docs/style_guide.md from it.
3. Measure or synthesize music. beats.py → beats.json.
4. Write docs/shotlist.md on the beat grid. Show it and wait for OK.
5. Build index.html with window.seek(t) using lib/motion.js springs. Follow CLAUDE.md.
6. Contact sheet → critique-pass (see prompts/critique-pass.txt) → fix. 3 rounds minimum.
7. node render.mjs → sfx.mjs → mix to -14 LUFS → out/final.mp4, all formats.
8. Deliver final.mp4, contact.png, poster.png. Say what you'd improve next.

## Hard rules
- Real product UI only. Never invent screens.
- No Math.random, no timers, no CSS transitions in render mode.
- Banned: corner labels, centered title on gradient, everything fading in.

8.3. Video dài: viết brief như đạo diễn

Donald nói bằng giọng nói trong 5 phút để mô tả yêu cầu, Claude làm việc 12 tiếng, kết quả là một MV dài 142 giây đạt 2,1 triệu view. Prompt của anh ấy dài khoảng 9.500 ký tự. Điểm chung của các brief dài hiệu quả là chúng không mô tả một video, mà giao việc cho cả một ekip.

Một brief tốt gồm:

1. Logline: nội dung phim tóm trong một câu.

2. Tham khảo: video, nhạc, thư viện ảnh; giữ gì, bỏ gì.

3. Công cụ và key: skill, API (tạo ảnh, video, giọng nói), ngân sách.

4. Hồ sơ nhân vật (character bible): tỉ lệ, màu sắc, biểu cảm, giữ nhân vật nhất quán qua mọi cảnh.

5. Kịch bản theo thời gian (beat sheet): các đoạn có mốc thời gian, cứ 3–5 giây có một điểm nhấn, 2 giây đầu phải gây chú ý.

6. Chữ trên màn hình: khi nào chữ to chiếm màn hình, khi nào nhỏ như phụ đề.

7. Quy trình có điểm duyệt: lên kế hoạch → dựng khung nhân vật (rig) → ảnh tĩnh từng cảnh (stills) → bản chuyển động nháp để canh nhịp (animatic) → làm đầy đủ → trau chuốt → âm thanh → render. Không được bỏ bước.

8. Vòng tự review: chấm điểm và sửa tới khi đạt 8+.

9. Sản phẩm bàn giao: MP4, ảnh bìa, contact sheet, mã nguồn có README.

Kỹ thuật generate-then-trace. Donald dùng một AI tạo video (Seedance 2.5) làm bản nháp có nhân vật cử động tự nhiên. Sau đó Claude xem bản nháp và viết code vẽ lại từng cảnh theo style của phim, giống họa sĩ đồ lại theo ảnh mẫu. Phần chuyển động khó (người đi, vải bay) có AI video lo, còn code giữ cho style thống nhất.

Chia việc cho subagent. Subagent là các phiên Claude con chạy song song, mỗi phiên làm một đoạn phim. Repo PDoomVideo của John Heibel là ví dụ: Claude viết ANIMATION_GUIDE.md để mọi subagent code cùng một style, và STORYBOARD.md sau lượt làm đầu tiên.

Template (thay các chỗ [...]):

You are the director, animator, sound designer and render engineer for a [DURATION] film
made in code. Treat this as a multi-session production. Don't rush to a final render.

## The film in one line
[LOGLINE. What the viewer should feel at the end.]

## References and inputs
- ./refs/ : [video / frames / image library]. Take the grammar, never the content.
- ./audio/track.wav : use it unchanged. Measure beats with beats.py first.
- Skills available: [/remotion-best-practices | /hyperframes | /claude-animation].
- APIs in .env: [ELEVENLABS_API_KEY, FAL_KEY]. Budget: [$X]. Be economical.

## Look
[3-5 lines: palette, type, texture, camera language. Banned looks.]

## Beat sheet
0:00-0:02  hook: [the single most striking image]
0:02-0:10  [act 1]
...        a new visual payoff every 3-5 seconds
[END]      the last frame sets up the first frame (loop)

## Workflow, with gates
1. Write docs/style_guide.md and docs/shotlist.md (every shot: frames, camera, text, SFX).
   Show me the shot list. Then continue without waiting if I don't answer in 10 minutes.
2. Build stills for every shot. Contact sheet. Critique.
3. Animatic at 960x540 with placeholder audio. Fix pacing before polish.
4. Full animation, polish pass, sound pass, final render.
5. Split work across subagents per chapter. Write docs/ANIMATION_GUIDE.md first
   so every subagent codes in the same style.

## Critique loop (every shot, at least 3 rounds)
Render 3-5 stills, score 1-10 on: hook, readability at 360px wide, motion, composition,
depth, sound sync, polish. Log scores + 3 biggest problems in docs/review_log.md. Fix. Repeat
until all are 8+.

## Deliverables
out/final.mp4 · out/loop_check.mp4 · out/poster.png · out/contact.png · README.md

Lưu ý về dòng "continue without waiting if I don't answer in 10 minutes": đây là cách tác giả gốc dùng để Claude không dừng lại chờ duyệt. Tuy nhiên Claude không tự đếm thời gian được. Khi Claude đã dừng để hỏi thì nó sẽ chờ tới khi bạn trả lời. Nếu muốn để Claude chạy qua đêm, hãy viết thẳng là "không cần chờ duyệt, cứ làm tiếp".

8.4. Dùng framework Remotion hoặc HyperFrames

Remotion và HyperFrames là hai framework chuyên làm video bằng code, có sẵn giao diện xem trước và timeline.

Remotion. Chạy trong terminal:

npx create-video@latest launch-film && cd launch-film
npx skills add remotion-dev/skills
claude

Gõ trong Claude Code:

/remotion-create a 20s 9:16 launch film for [PRODUCT], springs only, one accent color

Xem trước và render:

npx remotion studio
npx remotion render Main out/launch.mp4

HyperFrames. Chạy trong terminal:

npx hyperframes init my-video && cd my-video
npx hyperframes skills update
claude

Gõ trong Claude Code:

Using /hyperframes, turn ./notes.md into a 45-second pitch video with kinetic captions

Xem trước và render:

npx hyperframes preview && npx hyperframes render

Hạn chế cần biết

• Chi phí: effort max và nhiều vòng review tốn khá nhiều token. Video dài nên ước tính ngân sách trước.

• Thời gian render: 60fps với 4 khung phụ khá chậm. Nên xem thử ở --sub 1.

• Không thay được cảnh quay thật: code làm tốt giao diện, chữ, hình khối, minh họa. Cảnh có người thật vẫn cần AI tạo video hoặc quay thật.

• Không phù hợp khi cần chỉnh tay từng chi tiết như After Effects, hoặc team không ai đọc được code.

• Video dễ bị giống nhau nếu chỉ copy prompt. Mẫu tham khảo và ý tưởng riêng mới tạo khác biệt.

Tóm tắt quy trình

1. Cài Node, ffmpeg, Playwright. Tạo CLAUDE.md.

2. Mở Claude Code, đặt effort xhigh, chạy prompt một dòng để kiểm tra setup.

3. Viết prompt cho video thật, kèm URL sản phẩm hoặc video mẫu.

4. Để Claude viết index.html, render nháp bằng --sub 1.

5. Thêm âm thanh: đo beat từ nhạc có sẵn hoặc để Claude tự tạo.

6. Cho Claude xem contact sheet, chấm điểm và sửa tới khi đạt 8+.

7. Render bản cuối, xuất nhiều tỉ lệ, đóng gói thành skill để dùng lại.

Thuật ngữ

Repo tham khảo

• MV hoàn chỉnh: JohnHeibel/PDoomVideo

• Khung dự án mẫu: JohnHeibel/ClaudeAnimationBase

• Style vẽ tay: buildwithhanif/claude-animation-skill

• Framework HTML: heygen-com/hyperframes

• Framework React: Remotion AI skills

• Phim dài: WinterArc21/Battle-of-Austerlitz-Film

• Thư viện prompt: guanmo-ai/awesome-ai-motion

• Tổng hợp video: athemeroy/awesome-opus-5-5-videos

Nguồn

Bài gốc: Movez (@null(https://x.com/0xMovez)), How to build motion design studio with Opus 5.5 (Full-course), 27/09/2026. Code, prompt template và cấu trúc quy trình là của tác giả. Theo dõi thêm tại movez.substack.com. Riêng lệnh ghép âm thanh ở mục 5.4 và các phần giải thích thuật ngữ là do người viết bổ sung.

Các bài được trích dẫn:

• @null(https://x.com/claudeai/status/2102435511222890900): ra mắt Claude Opus 5.5

• Thariq (@trq212): về prompt "one-shot" 10 nghìn ký tự

• Tommy D. Rossi (@__morse): phân tích cách Opus render mặc định

• Stephan Livera (@stephanlivera): prompt showreel, effort max

• Rob Hallam (@robj3d3): cùng prompt trên xhigh, có âm thanh

• Tony Dinh (@tdinh_me): video launch TypingMind

• Chain (@achxvi): nhân vật lồng tiếng ElevenLabs; video 38 giây trong 45 phút

• Rexan Wong (@rexan_wong): vai trò của video mẫu

• Pleometric (@pleometric): animation từ một khung hình mẫu; làm lại theo quy trình của Donald

• @null(https://x.com/twoclipping/status/2103273003555402193): video giao diện biến hình + template XML

• Martijn Verbove (@verbove): phim MakerMap

• @null(https://x.com/NFT_Chen/status/2102681172367323300): Opus tự code phần mềm dựng phim

• onur ozcan (@oozn): phim Steve Jobs, nhạc tạo bằng Node

• Vox (@Voxyz_ai): "small print", nhạc Python + HyperFrames

• donald (@donaldjewkes): MV "Claude Pop"; prompt đầy đủ

• DreW (@devteamdrew): video launch-day

• Mable Joseph (@mablesjoseph): phim màu nước, 163 lần gọi model