1. Remotion คืออะไรและทำอะไรได้
Remotion คือระบบสร้างวิดีโอด้วย React และโค้ด ทำให้ควบคุมทุกเฟรม ข้อความ ภาพ เสียง กราฟ และข้อมูลได้อย่างแม่นยำ รวมถึงผลิตวิดีโอหลายเวอร์ชันจาก Template เดียวได้
ปลั๊กอิน Remotion ใน ChatGPT
ใช้สนทนา วางแผน สร้างหรือแก้ Source Code เปิด Preview และสั่ง Render ผ่านข้อความ
โปรเจกต์ Remotion บนเครื่อง
เป็น Source Project จริง เปิดใน Remotion Studio แก้ไขต่อ และ Render เป็น MP4, WebM หรือภาพนิ่งได้
2. ขั้นตอนเปิดใช้ปลั๊กอิน Remotion ใน ChatGPT
ชื่อเมนูอาจแสดงเป็น Plugins, Apps, Apps & Connectors หรือ Explore แตกต่างกันตามบัญชีและเวอร์ชัน หากพิมพ์ @Remotion แล้วเลือกได้ แสดงว่าพร้อมใช้งานและไม่ต้องติดตั้งซ้ำ
เข้าสู่ ChatGPT
เปิด chatgpt.com และเข้าสู่บัญชีที่ต้องการใช้งาน
เปิดส่วนจัดการปลั๊กอินหรือแอป
เปิดเมนูโปรไฟล์หรือ Settings แล้วมองหา Plugins, Apps, Apps & Connectors หรือ Explore plugins
ค้นหา Remotion
พิมพ์ “Remotion” ตรวจชื่อ คำอธิบาย สิทธิ์ และ Dependencies ก่อนติดตั้ง
กด Install หรือ Add
ยืนยันการเพิ่ม หากเป็น Workspace องค์กร อาจต้องให้ผู้ดูแลอนุญาตก่อน
เริ่มแชตใหม่
พิมพ์ @Remotion หรือเลือก Remotion จากเมนู Tools/Plugins แล้วแนบไฟล์ที่ต้องใช้
ทดสอบด้วยโปรเจกต์สั้น
ใช้คำสั่งต่อไปนี้เพื่อตรวจว่าระบบสามารถสร้าง Composition และ Preview ได้
@Remotion สร้างโปรเจกต์ทดสอบวิดีโอแนวตั้ง 9:16 ความยาว 5 วินาที พื้นหลังสี Navy มีข้อความ “Hello Remotion” ให้ข้อความปรากฏด้วย Fade In และ Slide Up เปิด Preview ใน Remotion Studio ให้ตรวจสอบก่อน ยังไม่ต้อง Render
3. ขั้นตอนติดตั้ง Remotion บนเครื่อง
ใช้ส่วนนี้เมื่อดาวน์โหลดโปรเจกต์ไปแก้เอง ต้องการเปิด Studio หรือ Render บนคอมพิวเตอร์ของตนเอง
3.1 ติดตั้งโปรแกรมพื้นฐาน
- Node.js รุ่น LTS และ npm
- Git
- Visual Studio Code หรือโปรแกรมแก้โค้ด
3.2 ตรวจสอบการติดตั้ง
node --version npm --version git --version
3.3 สร้างโปรเจกต์ใหม่
npx create-video@latest --yes --blank --no-tailwind my-remotion-video cd my-remotion-video npm install
3.4 เปิด Remotion Studio
npx remotion studio --no-open
เปิด URL ที่ Terminal แสดง เช่น http://localhost:3000
3.5 กรณีพบปัญหา File Watcher
npx remotion studio --no-open --webpack-poll 1000
4. Workflow การสร้างวิดีโอที่แนะนำ
กำหนดเป้าหมาย
ระบุหัวข้อ ผู้ชม แพลตฟอร์ม ความยาว และ Action ที่ต้องการ
เตรียมเสียงและสคริปต์
แนบ Voice Over พร้อมสคริปต์ที่ตรวจแล้ว
เลือก Visual Style
เลือกสไตล์หลักหนึ่งแบบ สไตล์รองไม่เกินหนึ่งแบบ พร้อม Mood, Color และ Font
วิเคราะห์และแบ่ง Scene
เปลี่ยน Scene เมื่อใจความเปลี่ยน ไม่ต้องล็อกเวลาแบบตายตัว
สร้าง Composition
ประกอบข้อความ ภาพ ตัวละคร กราฟ เพลง และ Sound Effect
เปิด Preview
ตรวจ Text Overflow, Safe Area, Timing และความตรงกับเสียง
แก้ไขและ Render
แก้รายการที่พบแล้วจึง Render เมื่อพร้อม
ส่งมอบ Source Project
เก็บ Source Code, Asset, Font และเสียง เพื่อแก้ไขในอนาคต
5. ไฟล์และข้อมูลที่ควรเตรียม
เนื้อหา
- สคริปต์ที่ตรวจแล้ว
- Hook และ CTA
- ตัวเลขและแหล่งข้อมูล
ภาพและแบรนด์
- โลโก้ PNG/SVG
- ภาพสินค้า/บุคคล
- Storyboard หรือ Character Sheet
- สีและ Brand Guideline
เสียง
- Voice Over ชัดเจน
- เพลงที่มีสิทธิ์ใช้งาน
- Sound Effect
ข้อกำหนด
- 9:16, 16:9, 4:5 หรือ 1:1
- Resolution และ fps
- ความยาวและรูปแบบไฟล์
6. Master Prompt พร้อมใช้งาน
@Remotion สร้างวิดีโอจาก Voice Over และ Asset ที่แนบมา PROJECT - ชื่อ: [ชื่อโปรเจกต์] - เป้าหมาย: [ต้องการให้ผู้ชมเข้าใจ/เชื่อ/สมัคร/ซื้ออะไร] - กลุ่มเป้าหมาย: [ระบุ] FORMAT - Vertical 9:16 - Resolution 1080×1920 - 30 fps - ความยาวตาม Voice Over จริง STYLE - สไตล์หลัก: [เลือก] - สไตล์รอง: [เลือกได้หนึ่งแบบ] - Mood: [ทันสมัย/อบอุ่น/พรีเมียม/สนุก] - สี: [ระบุ] - Font: IBM Plex Sans Thai SCENE DIRECTION - วิเคราะห์เสียงและแบ่ง Scene ตามการเปลี่ยนใจความ - ภาพและข้อความต้องตรงกับสิ่งที่กำลังพูด - แสดงเฉพาะประโยคหรือ Keyword สำคัญ - ไม่ทำ Subtitle ด้านล่างตลอดเวลา - ข้อความไม่เกิน 3 บรรทัดและอยู่ใน Safe Area MOTION - ใช้ Mask Reveal, Slide Up, Word-by-Word และ Keyword Punch - เคลื่อนไหวนุ่มนวลและหยุดให้อ่านทัน - ห้ามหมุนเร็ว เด้งแรง หรือใส่ Element รบกวนสายตา - ขับเคลื่อน Animation ด้วย Frame ของ Remotion WORKFLOW - สร้าง Source Project ให้แก้ไขต่อได้ - เปิด Preview ใน Remotion Studio - ตรวจความตรงกับ Voice Over - ยังไม่ต้อง Render จนกว่าจะได้รับคำสั่ง
7. 30 สไตล์คลิปที่ Remotion ทำได้
1. Kinetic Typography
ข้อความเคลื่อนตามเสียง
ใช้ Mask Reveal, Slide Up และ Keyword Punch
2. Bold Typography
ตัวอักษรใหญ่และทรงพลัง
เปิดด้วย Hook ใหญ่และสีตัดกัน
3. Minimal Typography
เรียบ สะอาด มีพื้นที่ว่าง
ใช้สีไม่เกินสามสีและ Motion ระยะสั้น
4. Word-by-Word
ขึ้นทีละคำตามเสียง
ขยายและเปลี่ยนสีคำที่กำลังพูด
5. Typewriter
พิมพ์ทีละตัวอักษร
เพิ่ม Cursor เฉพาะระหว่างพิมพ์
6. Quote Video
เน้นประโยคสำคัญ
วาง Quote กึ่งกลางพร้อม Blur-to-Focus
7. Stickman Story
ตัวละครลายเส้นดำ
ให้ตัวละครดำเนินเรื่องตาม Voice Over
8. Doodle Animation
ภาพวาดมือและลูกศร
วาด Element ขึ้นตามลำดับเนื้อหา
9. Whiteboard Explainer
อธิบายเหมือนบนกระดาน
วาด Diagram และเส้นเชื่อมตามเสียง
10. Flat Vector Explainer
ภาพเวกเตอร์เรียบง่าย
ใช้สี Pastel และ Movement เล็กน้อย
11. Mascot Presenter
มาสคอตเป็นพิธีกร
ใช้ท่าชี้ คิด เตือน และสรุป
12. Paper Cutout
ภาพตัดกระดาษ
เพิ่ม Texture เงา และการวางซ้อน
13. Animated Infographic
ตัวเลขและไอคอน
ใช้ Number Counter และ Icon
14. Data Storytelling
เล่า Insight จากข้อมูล
Question → Evidence → Insight → Action
15. Dashboard Animation
KPI Card และ Chart
เน้น Metric ที่กำลังอธิบาย
16. Workflow Diagram
แสดงกระบวนการ
Animate ทีละ Node พร้อมเส้นทิศทาง
17. Timeline
เหตุการณ์ตามเวลา
แสดงปี เหตุการณ์ และจุดเปลี่ยน
18. Comparison
เปรียบเทียบสองทางเลือก
ใช้ Split Screen และ Highlight จุดต่าง
19. Corporate Presentation
สุภาพและน่าเชื่อถือ
ใช้ Navy, White, Cyan และ Grid
20. Product Commercial
โฆษณาสินค้าพรีเมียม
Product Reveal, Slow Zoom, Light Sweep
21. Social Media Ad
โฆษณาสั้นกระชับ
Pain → Benefit → Proof → Offer → CTA
22. Course Promotion
โปรโมตหลักสูตร
Pain → Module → Outcome → Price → CTA
23. Event Promotion
โปรโมตกิจกรรม
ชื่องาน วิทยากร วันเวลา และ CTA
24. Testimonial Video
รีวิวและหลักฐาน
เน้นคำพูดจริงและผลลัพธ์ตรวจสอบได้
25. UGC Style
ดูเป็นธรรมชาติ
ใช้ Hook, Jump Cut, Caption และ Sticker
26. Product Feature List
คุณสมบัติทีละข้อ
Product Shot, Feature Icon และข้อความสั้น
27. Futuristic AI
เทคโนโลยีอนาคต
Navy/Black, Cyan/Purple และ Glow จำกัด
28. App Demo
สาธิตโปรแกรม
Cursor Highlight, Click Pulse และ Zoom
29. Glassmorphism UI
การ์ดกระจกโปร่งใส
UI Card ลอยเข้าทีละชั้นพร้อม Blur
30. Code Animation
นำเสนอ Code หรือ Prompt
Syntax Highlight, Typewriter และ Line Highlight
8. 20 รูปแบบการเคลื่อนไหวของ Text
1. Fade In
Opacity 0% → 100% ภายใน 12–18 เฟรม
2. Slide Up
เลื่อนขึ้น 60–100px พร้อม Fade
3. Slide From Side
เข้าจากด้านข้างและชะลอก่อนหยุด
4. Scale Pop
Scale 80% → 105% → 100%
5. Blur to Focus
เริ่มเบลอแล้วค่อย ๆ ชัด
6. Mask Reveal
เปิดจากซ้ายไปขวาโดยข้อความไม่เลื่อน
7. Vertical Mask
เปิดจากล่างขึ้นบนผ่านกรอบ
8. Word-by-Word
แสดงทีละคำและเน้นคำที่กำลังพูด
9. Line-by-Line
แสดงทีละบรรทัด ห่าง 4–8 เฟรม
10. Typewriter
พิมพ์ทีละตัวอักษรตามจังหวะ
11. Keyword Punch
ขยาย 115% แล้วกลับ 100% พร้อมเปลี่ยนสี
12. Highlight Marker
แถบสีวิ่งด้านหลัง Keyword
13. Animated Underline
วาดเส้นใต้จากซ้ายไปขวา
14. Color Sweep
สี Accent วิ่งผ่านตัวอักษรหนึ่งครั้ง
15. Number Counter
นับจาก 0 ไปค่าจริงพร้อมหน่วย
16. Tracking Expansion
ค่อย ๆ ขยาย Letter Spacing
17. Staggered Letters
ตัวอักษรปรากฏต่อกันห่าง 1–2 เฟรม
18. Text Wave
ขยับเป็นคลื่นเล็กน้อยเพียงหนึ่งรอบ
19. Perspective Flip
หมุนตามแกน Y จากมุมเอียงสู่ด้านหน้า
20. Text Replacement
คำเดิมเลื่อนออกและคำใหม่เข้าตำแหน่งเดิม
9. 20 สูตร Prompt ตามประเภทงาน
1. Premium Kinetic
แสดง Keyword ตามเสียงด้วย Mask Reveal และ Slide Up
2. Minimal Text
พื้นที่ว่างมาก สีไม่เกินสามสี ใช้ Fade นุ่มนวล
3. Bold Social
Hook ใหญ่ Jump Cut และ CTA ชัดเจน
4. Stickman Education
Stickman เส้นดำ สี Pastel เล่าเรื่องตามเสียง
5. Mascot Presenter
ให้ Mascot เปลี่ยนท่าตามเนื้อหา
6. Emotional Story
Situation → Turning Point → Solution → Outcome
7. Paper Collage
กระดาษตัดแปะ เทป เงา และ Layer
8. Corporate
Navy, White, Cyan พร้อม Data Card
9. Course Promo
Pain → Course → Modules → Outcomes → CTA
10. Whiteboard
วาดข้อความ Diagram และลูกศรตามเสียง
11. Process Flow
แยกสี Manual, AI, Automation และ Human
12. Data Infographic
Chart, Number Counter และ Insight สำคัญ
13. Futuristic AI
Dark UI และ Cyan/Purple โดยไม่ใส่วงหมุนรก
14. Software Demo
Crop หน้าจอ Cursor Highlight และ Zoom
15. News Update
Headline → Summary → Impact → Watch พร้อม Source
16. Podcast Audiogram
Waveform ตามเสียงจริงและ Caption เฉพาะคำสำคัญ
17. Cinematic
Slow Zoom, Parallax และ Film Dissolve
18. Product Commercial
Reveal → Features → Experience → Offer → CTA
19. Event Promo
ชื่องาน วิทยากร วันเวลา และ CTA จังหวะมีพลัง
20. Data Template
รับ JSON/CSV เพื่อเปลี่ยนภาพ สี ราคา และ CTA
10. Preview, ตรวจสอบ และ Render
เปิด Studio
npx remotion studio --no-open
ตรวจภาพนิ่งหนึ่งเฟรม
npx remotion still [composition-id] --scale=0.25 --frame=30
Render วิดีโอหรือภาพนิ่ง
npx remotion render npx remotion still
11. ข้อจำกัดและจุดที่ต้องระวัง
การถอดเสียง
อาจผิดเมื่อเสียงไม่ชัด พูดเร็ว หรือมีศัพท์เฉพาะ ควรแนบสคริปต์ที่ตรวจแล้ว
การ Sync ละเอียด
ระดับคำหรือพยางค์ต้องมี Timestamp และตรวจแบบเฟรมต่อเฟรม
ตัวละคร AI
หลายท่าอาจไม่สม่ำเสมอ ควรใช้ Character Sheet, PNG, SVG หรือ Sprite Sheet
ฟอนต์
ต้องโหลดให้ถูกต้องและมีสิทธิ์ใช้ โดยเฉพาะฟอนต์แบรนด์
Asset ภายนอก
URL อาจหมดอายุ ควรวางไฟล์จำเป็นในโฟลเดอร์ public
ลิขสิทธิ์
ภาพ เพลง วิดีโอ และฟอนต์ต้องมีสิทธิ์ใช้งาน
ประสิทธิภาพ
Blur, 3D, Shader และวิดีโอหลายชั้นเพิ่มเวลา Render
การตรวจงาน
ควรดูไฟล์ Render จริงตั้งแต่ต้นจนจบก่อนเผยแพร่
12. Checklist ก่อนเริ่มและก่อนส่งงาน
ก่อนเริ่มสร้าง
- ระบุเป้าหมายและผู้ชม
- แนบ Voice Over และสคริปต์
- ระบุ Ratio, Resolution และ fps
- เลือกสไตล์หลักและ Font
- แนบ Brand Asset
- ระบุว่า Preview หรือ Render
ก่อน Render
- ภาพและข้อความตรงกับ Voice Over
- คำไทยไม่ตัดผิดและข้อความไม่ล้น
- อยู่ใน Safe Area
- ไม่มี Motion รบกวนสายตา
- เพลงไม่กลบเสียงพูด
- ชื่อ ตัวเลข วันที่ และ CTA ถูกต้อง
- Asset โหลดครบ
หลัง Render
- ดูไฟล์จริงครบทั้งภาพและเสียง
- ตรวจ Ratio และ Resolution
- ตรวจเฟรมแรกและเฟรมสุดท้าย
- เก็บ Source Project, Asset และ Font
- ตั้งชื่อไฟล์และเวอร์ชันชัดเจน