เรียนจบเด็คนี้แล้วจะเข้าใจว่า Remotion คืออะไร ต่างจากโปรแกรมตัดต่อทั่วไปยังไง เริ่มใช้งานได้ทีละขั้น และรู้ว่างานแบบไหนควรใช้ Remotion จริง ๆ
Composition, Sequence, useCurrentFrame, interpolateเฟรมเวิร์กที่ให้เขียนวิดีโอด้วย React แล้วเรนเดอร์ออกมาเป็นไฟล์วิดีโอจริง
คำศัพท์และ API หลักที่ต้องรู้ก่อนเริ่มเขียนวิดีโอแรก
<Composition> — ประกาศไว้ใน src/Root.tsx ผ่าน registerRoot() กำหนด component หลัก, id, durationInFrames, ขนาด และ fps ของวิดีโอ<Sequence> — ใช้เลื่อนเวลา/ซ้อนชั้น component ต่าง ๆ บนไทม์ไลน์เดียวกัน (มี <Series> และ <TransitionSeries> ช่วยจัดฉากต่อกันหรือใส่ทรานซิชันด้วย)useCurrentFrame() — hook ที่คืนค่าเฟรมปัจจุบัน (เริ่มที่ 0) ใช้แทน CSS transition เพราะแอนิเมชันต้องขับด้วยเลขเฟรมเท่านั้นinterpolate() — แปลงค่าเฟรม/ตัวเลขให้เป็นค่าคุณสมบัติที่แอนิเมตได้ เช่น ตำแหน่ง สี ขนาดspring() สำหรับแอนิเมชันแบบสปริง, <AbsoluteFill> จัดวางเลเยอร์เต็มจอ, useVideoConfig() อ่านค่าความกว้าง/สูง/fps/ความยาววิดีโอตั้งแต่สร้างโปรเจกต์แรกจนถึงเรนเดอร์ไฟล์วิดีโอออกมา
npx create-video@latest (ต้องมี Node.js 16+ หรือ Bun 1.0.3+) เลือกเทมเพลตที่ต้องการ หรือใช้ --blank เริ่มจากโปรเจกต์เปล่าsrc/index.ts คือจุดเริ่มต้นที่เรียก registerRoot() ส่วน src/Root.tsx คือที่ประกาศ <Composition> ทั้งหมดnpm run dev เพื่อพรีวิววิดีโอสด แก้โค้ดแล้วเห็นผลทันทีแบบ hot reloadnpx remotion render <entry-point> <composition-id> <output-location> เช่น npx remotion render src/index.ts MyComp out.mp4ฟรีสำหรับทีมเล็ก จ่ายเมื่อบริษัทโตขึ้น
Remotion รองรับ Claude Code, Cursor, Codex อย่างเป็นทางการ
remotion.dev/docs/ai สอนใช้งานร่วมกับ Claude Code, Codex, OpenCode โดยตรง — สร้างโปรเจกต์ด้วย npx create-video@latest แล้วรัน npm run dev คู่กับเปิดเอเจนต์อีกเทอร์มินัลหนึ่งเพื่อสั่งให้ช่วยสร้างวิดีโอremotion.dev/llms.txt ตามมาตรฐาน llms.txtnpx skills add remotion-dev/skills รองรับ Claude Code, Codex และ Cursor@remotion/mcp ให้เอเจนต์ค้นเอกสาร Remotion ได้โดยตรงในเครื่องมืออย่าง Cursor/VS Code (ปัจจุบันยังอยู่ในสถานะทดสอบ)งานแบบไหนที่ Remotion เหมาะที่สุด และทำไม
งานนี้คืออะไร: สร้างวิดีโอที่ใส่ชื่อ/ข้อมูล/รูปเฉพาะของแต่ละคนเป็นพัน ๆ ตัว เช่น วิดีโอสรุปยอดขายส่งลูกค้าแต่ละราย
ทำไม Remotion เหมาะ: วิดีโอคือ component ที่รับ props เป็นข้อมูลจริง สั่งเรนเดอร์วนซ้ำด้วยโค้ดได้เป็นชุด ไม่ต้องลากวางทีละไฟล์ในโปรแกรมตัดต่อ
งานนี้คืออะไร: เอาข้อมูลตัวเลขจริง (ยอดขาย, การเติบโต, สถิติ) มาทำเป็นวิดีโอกราฟที่ขยับตามค่าจริง
ทำไม Remotion เหมาะ: เพราะเป็น React component ธรรมดา จะดึงข้อมูลจาก API/ไฟล์ CSV มาคำนวณตำแหน่งกราฟด้วย interpolate() ได้ตรง ๆ ผลลัพธ์แม่นยำและตรวจสอบย้อนกลับได้เหมือนโค้ดทั่วไป
งานนี้คืออะไร: ทำวิดีโอ social เป็นชุดที่หน้าตาเหมือนกันแต่เปลี่ยนข้อความ/สินค้า/แคมเปญ เช่น โปรโมชันรายสัปดาห์
ทำไม Remotion เหมาะ: เทมเพลตคือโค้ดที่ เก็บใน git และ version-control ได้เหมือนซอฟต์แวร์ทั่วไป แก้ทีเดียวใช้ได้กับทุกวิดีโอที่ผลิตต่อจากเทมเพลตนั้น
งานนี้คืออะไร: ทำวิดีโอสรุปผลงาน/ตัวเลขทีมทุกสัปดาห์ โดยไม่ต้องมีคนตัดต่อใหม่ทุกครั้ง
ทำไม Remotion เหมาะ: ต่อ pipeline อัตโนมัติให้ดึงข้อมูลล่าสุดแล้วสั่ง npx remotion render เป็น cron job ได้ ผลลัพธ์ทำซ้ำได้เหมือนเดิมทุกครั้ง (deterministic) ไม่ต้องพึ่งคนตัดต่อ
Remotion อยู่ตรงไหนเมื่อเทียบกับโปรแกรมตัดต่อและ AI video generator
| ประเด็น | Premiere / CapCut | AI video generator (เช่น Sora, Runway) | Remotion |
|---|---|---|---|
| วิธีทำงาน | ลากวางไทม์ไลน์ด้วยมือ | พิมพ์ prompt ให้ AI สร้างภาพ/คลิปให้ | เขียนโค้ด React กำหนดทุกเฟรม |
| ผลลัพธ์ | ควบคุมได้ละเอียดแต่ทำซ้ำเองทีละไฟล์ | ได้ไว แต่ควบคุมรายละเอียด/ทำซ้ำเป๊ะ ๆ ยาก | แม่นยำ ทำซ้ำได้เป๊ะทุกครั้ง (deterministic) |
| ผูกกับข้อมูลจริง | ทำได้ยาก ต้องแก้มือ | ยังไม่ใช่จุดเด่น | ผูกกับข้อมูล/API ผ่านโค้ดได้ตรง ๆ |
| ทำจำนวนมากอัตโนมัติ | ต้องทำทีละไฟล์ | จำกัดตามโควตา/เครดิต | สั่ง render เป็นชุดผ่านสคริปต์/cron ได้ |
| ต้องเขียนโค้ดไหม | ไม่ต้อง | ไม่ต้อง | ต้องพอเขียน React/JS ได้บ้าง |
เวิร์กช็อปสด 1 วัน (10:00–16:00) ลงมือสร้าง AI Agent + Workflow ใช้งานจริง กลับไปใช้ได้ทันที ไม่ต้องมีพื้นฐานโค้ด
รอบเชียงใหม่ 17–18 และ 24–25 ก.ค. 2026 · Early Bird เริ่ม 7,599 บาท · รอบกรุงเทพฯ ส.ค. 2026
เรียนได้ทุกที่ทุกเวลา — Vibe Code (Basic → Builder → Advanced), Prompt Mastery, OpenClaw DIY และ n8n Zero To Hero