HTML과 Opus 5.5로 모션 그래픽 영상 만들기

import { mkdir, writeFile } from "node:fs/promises";
import Anthropic from "@anthropic-ai/sdk";

const SYSTEM = `You write a single, self-contained HTML video scene.
Requirements:
- 1080x1920 (or 1920x1080), no external assets, system fonts only.
- set window.DURATION = <seconds>.
- expose async window.seek(t) that draws the frame for time t.
- no Date.now(), no requestAnimationFrame(), no CSS transitions, no timers.
- seed every random value; the same t must always produce the same frame.
- return only the HTML file, no markdown fences.`;

const brief = `12-second vertical motion graphic about [idea].
Beats: [0-3s hook], [3-7s point], [7-10s proof], [10-12s CTA].
Palette: [colors]. Type: system sans. Keep text inside a 64px safe area.`;

const anthropic = new Anthropic({
  apiKey: process.env.FELO_API_KEY,
  baseURL: "https://openapi.felo.ai/api",
});

const message = await anthropic.messages.create({
  model: "claude-opus-5-5",
  max_tokens: 32000,
  system: SYSTEM,
  messages: [{ role: "user", content: brief }],
});

const raw = message.content
  .filter((block) => block.type === "text")
  .map((block) => block.text)
  .join("");

const html = raw.replace(/^```(?:html)?\s*/i, "").replace(/```\s*$/, "").trim();
await mkdir("video", { recursive: true });
await writeFile("video/scene.html", html);
console.log(`scene.html: ${html.length} bytes`);

import { chromium } from "playwright";
import { pathToFileURL } from "node:url";

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 1080, height: 1920 },
  deviceScaleFactor: 1,
});

await page.goto(pathToFileURL("video/scene.html").href);
await page.waitForFunction(() => typeof (window as any).seek === "function");

const duration = await page.evaluate(() => (window as any).DURATION as number);
for (const t of [0, duration * 0.25, duration * 0.5, duration * 0.75]) {
  await page.evaluate(async (time) => {
    await (window as any).seek(time);
  }, t);
  await page.screenshot({ path: `video/preview-${Math.round(t * 1000)}ms.png` });
}

await browser.close();
console.log(`duration ${duration}s`);

import { spawn } from "node:child_process";
import { mkdir, rm } from "node:fs/promises";
import { pathToFileURL } from "node:url";
import { chromium } from "playwright";

const FPS = 30;

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 1080, height: 1920 },
  deviceScaleFactor: 1,
});
await page.goto(pathToFileURL("video/scene.html").href);
await page.waitForFunction(() => typeof (window as any).seek === "function");

const duration = await page.evaluate(() => (window as any).DURATION as number);
const frames = Math.ceil(duration * FPS);

await rm("video/frames", { recursive: true, force: true });
await mkdir("video/frames", { recursive: true });

for (let frame = 0; frame < frames; frame++) {
  await page.evaluate(async (time) => {
    await (window as any).seek(time);
  }, frame / FPS);
  await page.screenshot({
    path: `video/frames/${String(frame).padStart(5, "0")}.png`,
  });
}
await browser.close();

const ffmpeg = spawn("ffmpeg", [
  "-y",
  "-framerate", String(FPS),
  "-i", "video/frames/%05d.png",
  "-c:v", "libx264",
  "-pix_fmt", "yuv420p",
  "-movflags", "+faststart",
  "video/video.mp4",
], { stdio: "inherit" });

await new Promise<void>((resolve, reject) => {
  ffmpeg.on("exit", (code) => {
    if (code === 0) resolve();
    else reject(new Error(`ffmpeg exited with ${code}`));
  });
});

console.log(`${frames} frames -> video/video.mp4`);

ffmpeg -i video/video.mp4 -i video/audio.wav \
  -c:v copy -c:a aac -b:a 192k -shortest \
  video/final.mp4

ffprobe -v error -show_entries format=duration \
  -of default=nw=1:nk=1 video/final.mp4