สร้างและตัดต่อคลิปด้วย Claude
ตั้งแต่ศูนย์ถึง MP4

ฉันจะทำคลิปอธิบายแนวตั้ง 1080x1920 ความยาว 45 วินาที เรื่อง "ขั้นตอนทำงาน 3 ขั้นด้วย AI"
ช่วยแนะนำว่าแต่ละฉากควรใช้เทคนิคไหน (HTML/CSS, SVG, Canvas, WebGL) และเพราะอะไร
แล้วสรุปเป็นตาราง ฉากที่ | เทคนิค | เหตุผล

<canvas id="c" width="1080" height="1920"></canvas>
<script>
const FPS = 30, DURATION = 45;
const ctx = document.getElementById('c').getContext('2d');

// วาดภาพของวินาทีที่ t (ต้องให้ผลเหมือนเดิมทุกครั้ง)
function render(t) {
  ctx.clearRect(0, 0, 1080, 1920);
  // ... วาดพื้นหลัง ข้อความ ตัวนับ โดยคำนวณจาก t เท่านั้น
}

// ให้โปรแกรมเรนเดอร์เรียกใช้เพื่อไปที่เฟรมที่ต้องการ
window.seekTo = (t) => render(t);
</script>

สร้างหน้า HTML ขนาด 1080x1920 สำหรับคลิป 45 วินาที 30 fps
ให้ทุกภาพคำนวณจากฟังก์ชัน render(t) หรือ GSAP timeline ที่ seek ได้เท่านั้น
ห้ามใช้ Date.now หรือ requestAnimationFrame ที่พึ่งเวลาจริง
เตรียม window.seekTo(t) ไว้ให้โปรแกรมเรนเดอร์เรียก

const tl = gsap.timeline({ paused: true });

// ฉาก 1: หัวข้อเด้งเข้า (0-3 วินาที)
tl.from('#title', { y: 120, opacity: 0, duration: 0.6, ease: 'back.out(1.7)' }, 0);

// ฉาก 2: ตัวเลขนับขึ้น (3-6 วินาที)
const counter = { v: 0 };
tl.to(counter, {
  v: 20, duration: 2, ease: 'power2.out',
  onUpdate: () => document.getElementById('num').textContent = Math.round(counter.v)
}, 3);

window.seekTo = (t) => tl.time(t);

ใช้ GSAP สร้าง timeline ตาม Storyboard ฉาก 1-5 โดยใช้เวลาเริ่มของแต่ละฉากจากความยาวไฟล์เสียง vo_01-vo_05
ใส่แอนิเมชัน: หัวข้อเด้งเข้า ตัวเลขนับขึ้น ลูกศรวาดเส้นด้วย stroke-dashoffset และการ์ดสไลด์ซ้อนกัน
ตั้ง timeline เป็น paused และเปิด window.seekTo(t) ให้ใช้เรนเดอร์

// ใช้ t คำนวณตรง ๆ ไม่สะสมค่าเอง
function render(t) {
  mesh.rotation.y = t * 0.4;
  mesh.position.y = Math.sin(t * 1.2) * 0.2;
  renderer.render(scene, camera);
}
const renderer = new THREE.WebGLRenderer({ canvas, preserveDrawingBuffer: true });

uniform float uTime; uniform vec2 uRes;
void main() {
  vec2 uv = gl_FragCoord.xy / uRes;
  float w = sin(uv.x * 6.0 + uTime) * 0.5 + 0.5;
  gl_FragColor = vec4(mix(vec3(0.05,0.12,0.30), vec3(0.15,0.45,0.85), w * uv.y), 1.0);
}

เพิ่มพื้นหลังด้วย WebGL fragment shader เป็นไล่สีน้ำเงินกรมท่าไหลช้า ๆ ใช้ uniform uTime ที่รับค่าจาก t
เพิ่มอนุภาค 80 จุดลอยขึ้นด้วย Canvas โดยใช้ seeded random เพื่อให้เรนเดอร์ซ้ำแล้วภาพเหมือนเดิม
ตั้ง preserveDrawingBuffer: true

await document.fonts.ready;   // รอฟอนต์ไทย (เช่น Kanit) พร้อมใช้
await Promise.all([...document.images].map(i => i.decode()));
window.READY = true;          // บอกโปรแกรมเรนเดอร์ว่าเริ่มจับเฟรมได้

ฝังฟอนต์ Kanit ไว้ในโฟลเดอร์ fonts/ ผ่าน @font-face แล้วตั้ง window.READY = true หลังฟอนต์และรูปโหลดครบ
ตรวจว่าข้อความไทยไม่ถูกตัดหัวหางและตัดคำได้เหมาะสม

const puppeteer = require('puppeteer');
const FPS = 30, DURATION = 45, TOTAL = FPS * DURATION;

(async () => {
  const browser = await puppeteer.launch({
    args: ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader']
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1080, height: 1920 });
  await page.goto('file://' + __dirname + '/index.html');
  await page.waitForFunction('window.READY === true');

  for (let i = 0; i < TOTAL; i++) {
    await page.evaluate((t) => window.seekTo(t), i / FPS);
    await page.screenshot({ path: `frames/f_${String(i).padStart(5, '0')}.png` });
  }
  await browser.close();
})();

ffmpeg -framerate 30 -i frames/f_%05d.png -i voiceover.mp3 \
  -c:v libx264 -pix_fmt yuv420p -crf 18 -c:a aac -shortest clip_v1.mp4

เขียนสคริปต์ Puppeteer เรนเดอร์ index.html เป็น PNG ทีละเฟรม 30 fps 45 วินาที ลงโฟลเดอร์ frames/
รอ window.READY ก่อนเริ่ม แล้วใช้ ffmpeg รวมเฟรมกับ voiceover.mp3 เป็น clip_v1.mp4 (H.264, yuv420p, crf 18)
ก่อนเรนเดอร์เต็ม ให้ทดสอบ 5 วินาทีแรกก่อนเพื่อดูความเร็วและความถูกต้อง

เปรียบเทียบ 4 วิธีแปลงหน้าเว็บเป็น MP4: Puppeteer+FFmpeg, MediaRecorder, WebCodecs, Remotion
ในแง่ความแม่นยำ ความเร็ว ความยากในการตั้งค่า และความเหมาะกับคลิปอธิบาย 45 วินาที แล้วแนะนำวิธีที่เหมาะกับฉันที่สุด

// ในหน้าเว็บ: ตั้ง body { background: transparent } แล้วแคปด้วย
await page.screenshot({ path: `gfx/f_${String(i).padStart(5, '0')}.png`, omitBackground: true });

# ซ้อนกราฟิกบนฟุตเทจด้วย FFmpeg
ffmpeg -i footage/scene3.mp4 -framerate 30 -i gfx/f_%05d.png \
  -filter_complex "[0:v][1:v]overlay=0:0:shortest=1" \
  -c:v libx264 -pix_fmt yuv420p scene3_final.mp4

เรนเดอร์กราฟิกฉากที่ 3 (ตัวเลขนับขึ้นและกราฟแท่ง) เป็นภาพ PNG พื้นโปร่งใส 30 fps
แล้วใช้ ffmpeg overlay ซ้อนบนฟุตเทจ footage/scene3.mp4 ได้ไฟล์ scene3_final.mp4
ซับไตเติลให้ทำเป็น HTML ในหน้าเว็บ เน้นตัวเลขด้วยสีเหลือง

ก่อนเรนเดอร์เต็ม ให้จับภาพนิ่งที่วินาที 0, 3, 12, 30, 44 ส่งมาให้ดู
แล้วตรวจเช็กลิสต์: เฟรมแรกเต็มภาพ, ฟอนต์ไทยถูกต้อง, เรนเดอร์ซ้ำแล้วภาพเหมือนเดิม, ความยาวตรงเสียง

แยกโปรเจกต์นี้เป็นเทมเพลต: ส่วนคงที่ (render.js, styles, fonts) กับส่วนที่เปลี่ยนต่อคลิป (content.json: หัวข้อ บทพูด ตัวเลข ไฟล์เสียง)
แล้วสรุปเป็น Skill ชื่อ "คลิปโค้ด HTML สไตล์ที่ปรึกษา" พร้อมขั้นตอน ค่ามาตรฐาน และเช็กลิสต์ตรวจงาน