by: adminPosted on:

สอนใช้ Remotion Skills ติดปีก AI เสกคลิป Kinetic Typography & Before/After (EP.2)

🔥 คอร์สจับมือทำ EP.2⚡ คลังสกิลแท้จากทีมผู้สร้าง Remotion (remotion-dev/skills)

สอนติดปีก AI ด้วย Remotion Skills เสกคลิป Kinetic Typography & Before/After ระดับโปร!

ทำไมบางคนสั่ง AI ทำคลิปแล้วโค้ดพัง แต่คนรู้ความลับนี้สั่งครั้งเดียวได้คลิปโฆษณาตัวหนังสือเด้งตามจังหวะหัวใจ + ฉากแบ่งครึ่งจอ Before/After พร้อมเสียงเอฟเฟกต์ครบ? คำตอบอยู่ในคลังสกิล remotion-dev/skills บทเรียนนี้ครับ!

💡 แนะนำ: เปิดดูคลิปควบคู่ไปกับการกดปุ่ม คัดลอกคำสั่ง ด้านล่างเพื่อทำตามทีละขั้นได้เลยครับ⬇️ ดูคำสั่งทั้งหมดด้านล่าง

❌ สั่ง AI ทำคลิปแบบไม่ติด Skills

  • AI มักเดาคำสั่งผิด ใช้ CSS Animation ที่เรนเดอร์ไม่ติด
  • จังหวะตัวหนังสือเด้งแข็งทื่อ ไม่สมูทเหมือนมืออาชีพ
  • ใส่เสียงเอฟเฟกต์และเปลี่ยนฉาก Transition แล้วมักเจอ Error

⚡ ติดตั้ง remotion-dev/skills (วิธีในคลิปนี้)

  • ปลดล็อกกฎเหล็กของทีมผู้สร้าง Remotion ให้ AI รู้จักฟิสิกส์ Spring แท้
  • เสกฉาก Kinetic Typography เด้งตามจังหวะหัวใจเต้น + แบ่งจอ Before/After อัตโนมัติ
  • รองรับทั้งการเปลี่ยนขนาด 16:9 (YouTube) และ 9:16 (TikTok/Reels) ในคำสั่งเดียว!

💰 เอาไปต่อยอดทำเงินยังไงได้บ้าง?

  • ทำคลิป Launch เปิดตัวคอร์สเรียน สินค้า หรือโปรโมชันแบรนด์
  • รับทำคลิปโฆษณาเปรียบเทียบ Before vs After ให้คลินิกและแบรนด์สินค้า (คลิปละ 2,000–5,000฿)
  • ทำ Hype Reel / VSL เปิดหัวคลิปหยุดนิ้วคนดูใน 3 วินาทีแรก
STEP-BY-STEP

ขั้นตอนการทำตามคลิป (จับมือทำทีละคลิก)

ขั้นตอนที่ 1 คัดลอกลิงก์คลังสกิล remotion-dev/skills จาก GitHub
⏱️ ดูในคลิปนาทีที่ 00:08

คลังลับตัวที่ 2 ของเราคือ remotion-dev/skills ซึ่งเป็นชุดคู่มือทักษะทางการจากทีมพัฒนา Remotion ที่ช่วยสอนให้ AI Agent เขียนแอนิเมชัน ฟิสิกส์ เสียง และซับไตเติลได้ถูกต้อง 100% กดปุ่มคัดลอกลิงก์ด้านล่างนี้ได้เลยครับ:

🔗 ลิงก์ GitHub ของ Remotion Skills
https://github.com/remotion-dev/skills
ขั้นตอนที่ 2 เปิด Antigravity แล้วสั่งติดตั้ง Skills พร้อมรันหน้าเว็บพรีวิว
⏱️ ดูในคลิปนาทีที่ 00:20

เปิดโปรแกรม Antigravity แล้ววางคำสั่งด้านล่างนี้ลงในช่องแชท AI จะทำการโคลนโปรเจกต์ รันคำสั่ง npx skills add remotion-dev/skills เพื่อติดตั้งทักษะทั้งหมด และเปิดหน้าต่าง Remotion Studio ขึ้นมาให้พร้อมใช้งานทันทีครับ:

💬 คำสั่งติดตั้ง Remotion Skills (วางในช่องแชท AI)
ช่วยโคลนโปรเจกต์จากลิงก์ https://github.com/remotion-dev/skills.git ลงในโฟลเดอร์นี้ ติดตั้งแพ็กเกจและเครื่องมือที่จำเป็นทั้งหมดตามขั้นตอน (npx skills add remotion-dev/skills) จากนั้นรันเซิร์ฟเวอร์เปิดหน้าโปรแกรม/หน้าเว็บขึ้นมาให้ผมใช้งานพร้อมบอกลิงก์ Localhost ที่ต้องกดเปิดด้วยครับ
ขั้นตอนที่ 3 สั่ง AI สร้างคลิป Kinetic Typography + Before/After 20 วินาที
⏱️ ดูในคลิปนาทีที่ 00:46

เมื่อติดตั้งสกิลเสร็จแล้ว ให้คัดลอกคำสั่งจริงที่คุณต้นใช้ในคลิปด้านล่างนี้ไปวางในช่องแชท AI ได้เลยครับ AI จะอ่านกฎจาก @remotion-dev/skills แล้วเสกคลิปเปิดตัวคอร์สเรียน AI ที่มีจังหวะหัวใจเต้น ฉากเปรียบเทียบ Before/After และเสียงเอฟเฟกต์ให้อัตโนมัติ:

🎬 คำสั่งสร้างคลิป Kinetic Typography + Before/After (คำสั่งจริงในคลิป)
ใช้สกิลใน @remotion-dev/skills สร้างวิดีโอ Kinetic Typography ความยาว 20 วินาที สำหรับเปิดตัวคอร์สเรียน AI โดยให้ตัวหนังสือเด้งเข้ากลางจอพร้อมจังหวะหัวใจเต้น มีฉากแบ่งครึ่งจอเปรียบเทียบ Before/After และใส่เสียงเอฟเฟกต์ Whoosh ตอนเปลี่ยนฉาก
ขั้นตอนที่ 4 พรีวิวผลงานบน Remotion Studio และสั่งเรนเดอร์เป็นไฟล์ .MP4
⏱️ ดูในคลิปนาทีที่ 02:35

กดเปิดลิงก์ Localhost เพื่อชมตัวอย่างคลิปแบบ 60fps บนหน้าเว็บ Remotion Studio เมื่อถูกใจแล้ว สามารถสั่ง AI เรนเดอร์ออกมาเป็นไฟล์ .mp4 พร้อมนำไปอัปโหลดลง YouTube, Facebook หรือ TikTok ได้ทันทีครับ:

📦 คำสั่งให้ AI เรนเดอร์เป็นไฟล์ MP4
ช่วยเรนเดอร์คลิป KineticPromo นี้เป็นไฟล์วิดีโอ .mp4 ความละเอียด Full HD 1080p ลงในโฟลเดอร์ out ให้หน่อย
PROMPT LIBRARY

แจกฟรี! 8 ตัวอย่าง Prompt พร้อมใช้สำหรับ @remotion-dev/skills (ก๊อปปี้ไปสั่ง AI ได้เลย)

🚀 หมวดเปิดตัวสินค้า & คอร์สเรียน

1. คลิป Hype Trailer เปิดตัวสินค้าใหม่ 15 วินาที

ตัวหนังสือเด้งกระแทกจังหวะดนตรี สไตล์โฆษณา Apple / Nike ดึงสายตาคนดูตั้งแต่วินาทีแรก

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills สร้างคลิป Kinetic Typography แนวตั้ง 9:16 ความยาว 15 วินาที สำหรับเปิดตัวสินค้าใหม่ โดยให้คำสำคัญเด้งเข้ากลางจอด้วยฟิสิกส์ Spring แบบกระชับ มีเอฟเฟกต์แสงแฟลชเบาๆ ตอนเปลี่ยนประโยค และปิดท้ายด้วยป้ายโปรโมชันสีทอง
⚡ หมวดเปรียบเทียบ Before / After

2. เทียบผลลัพธ์ก่อนใช้ vs หลังใช้บริการ (Split Screen)

แบ่งครึ่งจอซ้าย-ขวา หรือบน-ล่าง เหมาะมากสำหรับคลินิก บ้านรีโนเวท หรือซอฟต์แวร์

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills สร้างวิดีโอเปรียบเทียบ Before vs After ความยาว 20 วินาที ครึ่งซ้ายโทนสีแดงหม่นแสดงปัญหาการทำธุรกิจแบบเดิม 3 ข้อ ครึ่งขวาโทนสีเขียวมรกตเรืองแสงแสดงผลลัพธ์หลังใช้ระบบ AI ช่วยทำงาน พร้อมตัวเลขเปรียบเทียบเวลาที่ประหยัดไปได้
🎙️ หมวดซับไตเติลเด้งตามเสียงพูด

3. ซับไตเติล TikTok / Reels ไฮไลท์ทีละคำสีเหลืองทอง

ใช้สกิล remotion-captions สร้างซับไตเติลเด้งทีละคำแบบครีเอเตอร์ระดับโลก

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills สร้างฉากซับไตเติลสไตล์ TikTok แนวตั้ง 9:16 โดยให้ข้อความเด้งขึ้นมาทีละบรรทัดและไฮไลท์คำสำคัญเป็นสีเหลืองทอง (#FACC15) ขยายใหญ่ขึ้นเล็กน้อยด้วย Spring animation อ่านง่ายบนมือถือ
📊 หมวดกราฟข้อมูล & ยอดขาย

4. กราฟแท่งเปรียบเทียบการเติบโต 10X พร้อมตัวเลขวิ่ง

โชว์สถิติความสำเร็จหรือผลตอบแทนการลงทุนแบบเคลื่อนไหวสมูท 60fps

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills สร้างคลิปแสดงกราฟแท่งเปรียบเทียบรายได้ก่อนและหลังใช้ AI ความยาว 15 วินาที ให้แท่งกราฟค่อยๆ พุ่งสูงขึ้นด้วยฟิสิกส์ Spring พร้อมตัวเลขเปอร์เซ็นต์วิ่งจาก 0% ไปถึง +350% และมีป้ายสรุปไฮไลท์ด้านบน
⏱️ หมวดโปรโมชัน Flash Sale

5. นาฬิกานับถอยหลัง Flash Sale เร่งการตัดสินใจ

สร้างความตื่นเต้นให้โปรโมชันจำกัดเวลา หรือปิดรับสมัครคอร์สเรียน

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills สร้างคลิปโปรโมชัน Flash Sale ความยาว 15 วินาที มีการ์ดราคาปกติถูกขีดฆ่าแล้วเด้งราคาพิเศษสีทองขึ้นมาแทน พร้อมนาฬิกาดิจิทัลนับถอยหลังและเอฟเฟกต์คลื่นหัวใจเต้นกระตุ้นให้กดสั่งซื้อทันที
⭐ หมวดรีวิวลูกค้า (Social Proof)

6. สไลด์โชว์รีวิวลูกค้า 5 ดาวแบบการ์ด 3 มิติ

รวมคอมเมนต์ลูกค้าจริงมาทำเป็นคลิปเพิ่มความน่าเชื่อถือให้เพจ

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills สร้างคลิปโชว์รีวิวลูกค้า 5 ดาว จำนวน 3 การ์ด ความยาว 18 วินาที ให้การ์ดแต่ละใบเด้งขึ้นมาพร้อมดาวสีทองเรียงกัน 5 ดวง และไฮไลท์ประโยคประทับใจของลูกค้าด้วยแถบสีเหลืองอ่านง่าย
📱 หมวดจำลองแชท LINE / Messenger

7. แอนิเมชันบทสนทนาแชทลูกค้าทักมาสั่งซื้อรัวๆ

เล่าเรื่องผ่านหน้าจอแชทเด้งโต้ตอบกัน คนดูชอบดูจนจบคลิป

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills สร้างคลิปจำลองหน้าจอแชทแนวตั้ง 9:16 ความยาว 15 วินาที แสดงข้อความลูกค้าทักเข้ามาถามปัญหา แล้วระบบ AI ตอบกลับทันทีอย่างมืออาชีพพร้อมปิดการขายอัตโนมัติ มีเสียงป๊อปตอนข้อความเด้งขึ้น
🎬 หมวดเปลี่ยนขนาดคลิปอัตโนมัติ

8. แปลงคลิปแนวนอน 16:9 เป็นแนวตั้ง 9:16 ในคำสั่งเดียว

ทำคลิปครั้งเดียว ได้ครบทั้งขนาดลง YouTube และขนาดลง TikTok / Reels

Prompt พร้อมใช้
ใช้สกิลใน @remotion-dev/skills ช่วยเพิ่ม Composition ใหม่ในโปรเจกต์นี้ โดยนำฉากจากคลิปแนวนอน 1920×1080 มาจัดวางใหม่ให้เป็นขนาดแนวตั้ง 1080×1920 (9:16) ปรับขนาดฟอนต์และการ์ด Before/After ให้เรียงบน-ล่างอ่านง่ายบนมือถือ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *