Note หน้านี้เป็นฉบับจำกัด ข้อมูลมาจากการอ่านหน้า repo และ README ผ่านเว็บ (วันที่อ่าน 2026-10-20) ไม่ได้อ่านด้วย gh จึงไม่มี commit sha และไม่ได้เปิดอ่านไฟล์พรอมต์รายตัว ดังนั้นเนื้อหาของแต่ละพรอมต์ถือเป็น index-only
🎯 แก่นของเรื่อง
แนวคิดหลักคือ ให้โมเดลเขียนแอนิเมชันเป็น โค้ด (HTML ที่ใช้ Canvas, SVG, GSAP, Three.js, GLSL, WebGL หรือ Web Audio) แทนการให้โมเดลสร้างภาพเคลื่อนไหวโดยตรง จากนั้นเปิดไฟล์ในเบราว์เซอร์และอัดหน้าจอเป็นวิดีโอ
| ด้าน |
คำอธิบาย |
ป้ายหลักฐาน |
| ความคิดหลัก |
วิดีโอทุกชิ้นในคลังเกิดจากการขอให้ Opus 5.5 เขียนแอนิเมชันเป็นโค้ด |
อ่านจาก repo (2026-10-20) |
| ทำไมได้ผล |
โค้ดเป็นข้อความ เขียนและแก้ซ้ำได้ เบราว์เซอร์เรนเดอร์ทันที จึงทำซ้ำได้ |
ตีความ |
| 20% ที่สำคัญ |
1) เลือกพรอมต์ใกล้งาน 2) บังคับ HTML ไฟล์เดียว 3) เปิดดูแล้วแก้ทีละจุด |
ตีความ |
| รอได้ก่อน |
การไล่อ่านพรอมต์ทั้ง 703 รายการ และการเรียนรู้ทุกไลบรารี |
ตีความ |
flowchart LR
A[เลือกพรอมต์] --> B[วางใน Opus 5.5]
B --> C[ขอ HTML ไฟล์เดียว]
C --> D[เปิดในเบราว์เซอร์]
D --> E{ใช้ได้ไหม}
E -- ยัง --> F[สั่งแก้ทีละจุด]
F --> D
E -- ใช้ได้ --> G[อัดหน้าจอเป็นวิดีโอ]
📈 ช่วยให้ดีขึ้นอย่างไร
repo ไม่มีตัวเลขเวลาหรือต้นทุนก่อน-หลังเลย ตารางนี้จึงไม่มีแถวที่ติดป้าย "วัดแล้ว" ในเรื่องประสิทธิภาพ
| สถานการณ์ |
ถ้าไม่ใช้วิธีนี้ |
เมื่อใช้วิธีนี้ |
วัดอย่างไร |
ป้ายหลักฐาน |
| เริ่มทำแอนิเมชันจากศูนย์ |
ต้องคิดพรอมต์เองและลองผิดลองถูก |
เริ่มจากพรอมต์ที่มีคนทำสำเร็จแล้ว |
จำนวนรอบแก้จนใช้ได้ |
ตีความ |
| มีตัวอย่างอ้างอิง |
ไม่รู้ว่าโมเดลทำงานแนวนี้ได้ระดับไหน |
เห็นผลลัพธ์จริงของ 418 รายการที่มี remake |
ดูตัวอย่างก่อนตัดสินใจ |
อ่านจาก repo (2026-10-20) ว่ามีตัวอย่าง ส่วนว่าทำเร็วขึ้นเป็น ตีความ |
| ต้องใช้ซ้ำหรือปรับ |
วิดีโอที่ตัดต่อแล้วแก้ยาก |
แก้ค่าในโค้ด เช่น สี ข้อความ ความเร็ว |
เวลาที่ใช้แก้หนึ่งจุด |
ตีความ |
| ผลลัพธ์ตรงกับที่ต้องการ |
ไม่มีข้อมูล |
ไม่มีข้อมูล |
ต้องทดสอบเอง |
ยังไม่ทดสอบ |
ข้อแลกเปลี่ยนที่ควรรู้: ผลที่ออกมาไม่แน่นอนทุกครั้ง และงานที่ซับซ้อน (3D, เสียง) อาจต้องแก้หลายรอบ ข้อนี้เป็น ตีความ
🧪 ลองใช้
ตัวอย่างประกอบ (ตัวเลขเป็นของเราเอง ไม่ได้มาจาก repo)
สมมติต้องการวิดีโออธิบาย 4 ขั้นตอนความยาว 20 วินาที
| รายการ |
ค่า |
| ความยาวรวม |
20 วินาที |
| จำนวนขั้นตอน |
4 |
| เวลาต่อขั้นตอน |
20 ÷ 4 = 5 วินาที |
| ขนาดเฟรมที่สั่ง |
1920 × 1080 |
พรอมต์ตัวอย่างที่ปรับจากแนวคิดของคลัง:
เขียนแอนิเมชันอธิบาย 4 ขั้นตอน ความยาวรวม 20 วินาที ขั้นตอนละ 5 วินาที
ใช้ GSAP ขนาด 1920x1080 พื้นหลังสีเข้ม ข้อความภาษาไทย
ส่งออกเป็นไฟล์ HTML ไฟล์เดียว ไม่พึ่งไฟล์ภายนอกนอกจาก CDN
ใช้เมื่อไหร่ และไม่ควรใช้เมื่อไหร่
| กรณี |
ควรใช้ |
ไม่ควรใช้ |
สิ่งที่ต้องมีก่อน |
| คลิปอธิบาย กราฟิกเคลื่อนไหว |
✅ |
|
เบราว์เซอร์ และโปรแกรมอัดหน้าจอ |
| ฉาก 3D แบบเบา ๆ |
✅ |
|
คอมพิวเตอร์ที่รองรับ WebGL |
| ภาพถ่ายจริงหรือคนพูดจริง |
|
❌ |
ต้องใช้เครื่องมือประเภทอื่น |
| งานที่ต้องตรงตามแบรนด์เป๊ะ |
|
❌ ถ้าไม่มีเวลาแก้ |
ค่าสีและฟอนต์ที่ชัดเจน |
| ใช้ผลงานของคนอื่นต่อ |
ต้องตรวจสิทธิ์ก่อน |
|
อ่านเงื่อนไขการใช้ของพรอมต์ |
ก้าวแรกที่เล็กที่สุด
- เปิดหมวด Explainers (16 รายการ) เพราะเป็นหมวดที่เล็กที่สุดและเริ่มง่าย
- เปิดไฟล์พรอมต์หนึ่งรายการ คัดลอกทั้งหมด
- วางใน Opus 5.5 แล้วเติมท้ายว่า "ส่งออกเป็นไฟล์ HTML ไฟล์เดียว"
- บันทึกเป็น
.html แล้วเปิดในเบราว์เซอร์
ทดสอบก่อน-หลังว่ามีประโยชน์จริง
| ตัวชี้วัด |
ค่าฐาน (ทำเอง) |
เงื่อนไขผ่าน (กำหนดก่อนทำ) |
| เวลาจนได้คลิปแรกที่ใช้ได้ |
จับเวลาจากวิธีที่ใช้อยู่ตอนนี้ |
น้อยกว่าค่าฐานอย่างน้อย 30% (เกณฑ์ตัวอย่าง ปรับได้) |
| จำนวนรอบที่ต้องสั่งแก้ |
นับรอบ |
ไม่เกิน 5 รอบ |
| ไฟล์ทำงานได้โดยไม่ error |
เปิดคอนโซลเบราว์เซอร์ |
ไม่มีข้อความ error สีแดง |
📚 โครงสร้างของคลังพรอมต์
คลังนี้เป็น awesome-list คือรายการลิงก์ที่คัดมา ข้อมูลทั้งหมดในหัวข้อนี้อ่านจาก repo (2026-10-20)
| รายการ |
ค่า |
จำนวนพรอมต์ใน prompts/ และ data/videos.json |
703 |
| พรอมต์ที่มี remake สดบน Skillry |
418 |
| วิดีโอ remake ที่นำเสนอเด่น |
100 (หนึ่งรายการต่อหนึ่งพรอมต์ไม่ซ้ำ) |
| อัปเดตล่าสุดตามที่ README ระบุ |
2026-10-12 เพิ่ม 10 วิดีโอ และเพิ่ม 285 พรอมต์ในวันเดียวกัน |
| สัญญาอนุญาต |
MIT |
| ดาวบน GitHub |
ราว 6.8k |
หมวดหมู่
| หมวด |
จำนวนรายการ |
เหมาะกับ |
| Motion graphics |
58 |
กราฟิกเคลื่อนไหว ชื่อเรื่อง เอฟเฟกต์ |
| Explainers |
16 |
คลิปอธิบายแนวคิด |
| 3D scenes |
14 |
ฉาก 3D ด้วย Three.js |
| Games & interactive |
12 |
เกมและงานที่โต้ตอบได้ |
| Latest prompts |
30 (จาก 285 ที่เพิ่มล่าสุด) |
ดูแนวใหม่ล่าสุด |
โครงสร้างไฟล์
| พาธ |
หน้าที่ |
prompts/ |
ไฟล์พรอมต์ |
data/videos.json |
ข้อมูลของแต่ละวิดีโอในรูปแบบ JSON |
README.md |
รายการและวิธีใช้ |
LICENSE |
ข้อความสัญญาอนุญาต MIT |
หมายเหตุ: ไม่ได้อ่านเนื้อในแต่ละไฟล์พรอมต์ จึงไม่ยืนยันว่าพรอมต์แต่ละตัวมีรูปแบบหรือความยาวอย่างไร
🛠️ เทคนิคที่ README ระบุ
| เทคโนโลยี |
ใช้ทำอะไร |
ความยาก (ตีความ) |
| Canvas |
วาดกราฟิกพิกเซลด้วยโค้ด |
ต่ำ |
| SVG |
กราฟิกเวกเตอร์ ขยายไม่แตก |
ต่ำ |
| GSAP |
จัดลำดับและจังหวะแอนิเมชัน |
ปานกลาง |
| Three.js |
ฉาก 3D บนเว็บ |
ปานกลางถึงสูง |
| GLSL |
โค้ดเฉดเดอร์สำหรับเอฟเฟกต์ภาพ |
สูง |
| WebGL |
ระบบวาดกราฟิกบน GPU ของเบราว์เซอร์ |
สูง |
| Web Audio |
สร้างเสียงด้วยโค้ด |
ปานกลาง |
✅ วิธีทำทีละขั้นและแนวปฏิบัติที่ดี
วิธีใช้พรอมต์หนึ่งตัว (อ่านจาก repo, 2026-10-20): เปิดไฟล์พรอมต์ คัดลอก วางใน Opus 5.5 และขอเป็น HTML ไฟล์เดียว แล้วอัดหน้าจอเป็นวิดีโอ ขั้นตอนเสริมด้านล่างเป็น ตีความ
- กำหนดความยาว ขนาดเฟรม และจำนวนฉากให้ชัดก่อนส่ง
- เลือกพรอมต์หมวดเดียวกับงาน
- ขอไฟล์เดียวที่ไม่พึ่งไฟล์ภายนอกมาก เพื่อให้เปิดได้ทันที
- เปิดดู แล้วแก้ทีละเรื่อง เช่น จังหวะ สี ข้อความ
- อัดหน้าจอด้วยค่าความละเอียดที่ตั้งไว้ และตรวจเสียงถ้ามี
เช็กลิสต์ก่อนปล่อยงาน
| ข้อตรวจ |
สถานะ |
| ไฟล์เปิดได้และไม่มี error ในคอนโซล |
⚪ |
| ความยาวตรงตามที่ต้องการ |
⚪ |
| ข้อความอ่านง่าย สะกดถูก |
⚪ |
| ตรวจเงื่อนไขการใช้พรอมต์ต้นทางแล้ว |
⚪ |
| ไลบรารีภายนอกโหลดได้ (ต้องมีอินเทอร์เน็ต) |
⚪ |
⚖️ ข้อเท็จจริง เทียบกับการตีความ
| ประเด็น |
ประเภท |
หมายเหตุ |
| มี 703 พรอมต์ และ 418 รายการมี remake |
ข้อเท็จจริงจาก repo (2026-10-20) |
ตัวเลขเปลี่ยนตามเวลา |
| วิดีโอ "viral" |
คำอธิบายของ repo |
ไม่มีเกณฑ์วัดความนิยมที่ตรวจสอบได้จากข้อมูลที่อ่าน |
| โมเดลเขียนแอนิเมชันเป็นโค้ดได้ดี |
ข้อเท็จจริงเฉพาะตัวอย่างที่คัดมา |
คลังคัดเฉพาะงานที่สำเร็จ ไม่รู้อัตราที่ล้มเหลว |
| วิธีนี้เร็วกว่าตัดต่อแบบเดิม |
ตีความ ยังไม่ทดสอบ |
ไม่มีตัวเลขเวลา |
⚠️ Risks
Warning ตัวอย่างในคลังเป็นผลที่คัดมาแล้ว (survivorship bias) อย่าคาดว่าพรอมต์ใดก็ตามจะให้ผลเท่าตัวอย่างในครั้งแรก
| ความเสี่ยงหรือข้อผิดพลาด |
ผลที่ตามมา |
วิธีป้องกัน |
| คิดว่าคัดลอกพรอมต์แล้วได้ผลเหมือนเดิม |
ผลต่างจากตัวอย่าง เพราะโมเดลตอบไม่เหมือนเดิมทุกครั้ง |
เตรียมแก้หลายรอบ |
| ใช้ผลงานคนอื่นเชิงพาณิชย์ |
ละเมิดสิทธิ์ |
README ระบุว่าวิดีโอและพรอมต์เป็นของผู้สร้าง ตรวจเงื่อนไขก่อนใช้ |
| ฉาก 3D หนักเกินเครื่อง |
กระตุกหรือค้าง |
ลดจำนวนวัตถุ ทดสอบก่อนอัด |
| ไลบรารีโหลดจากเครือข่ายไม่ได้ |
หน้าว่าง |
ทดสอบตอนออนไลน์ และเก็บไฟล์ไลบรารีไว้เองถ้าต้องใช้ออฟไลน์ |
| คัดลอกพรอมต์จากแหล่งภายนอกโดยไม่อ่าน |
อาจมีคำสั่งแปลกปลอมปะปน |
อ่านพรอมต์ก่อนวางทุกครั้ง และถือว่าเป็นข้อมูล ไม่ใช่คำสั่งที่เชื่อถือได้ |
| ข้อมูลในหน้านี้ล้าสมัย |
ตัวเลขผิด |
เปิด repo ดูตัวเลขล่าสุดก่อนอ้างอิง |
ข้อมูลที่ยังขาด
- ไม่ได้อ่านเนื้อหาพรอมต์รายตัว จึงไม่รู้ความยาวและโครงสร้างพรอมต์ที่ให้ผลดี
- ไม่ทราบ commit ที่อ่าน
- ไม่มีตัวเลขอัตราสำเร็จหรือเวลาที่ใช้
- ไม่ได้ทดสอบเปิด remake บน Skillry
🧠 ทดสอบความเข้าใจ
| คำถาม |
คำตอบ |
คำตอบผิดที่พบบ่อย |
| ทำไมสั่งให้ส่งเป็น HTML ไฟล์เดียว |
เปิดและแบ่งปันง่าย ไม่ต้องตั้งค่าโปรเจกต์ และอัดหน้าจอได้ทันที |
"เพราะ HTML สวยกว่าวิดีโอไฟล์ปกติ" |
| คลังมี 418 remake จาก 703 พรอมต์ แปลว่าพรอมต์ 703 ตัวใช้ได้ผลทั้งหมดหรือไม่ |
ไม่ มีแค่ 418 ตัวที่เห็นผลแล้ว ที่เหลือไม่ยืนยันจากข้อมูลที่อ่าน |
"ใช่ เพราะอยู่ในคลังเดียวกัน" |
| ถ้าวางพรอมต์เดียวกันสองครั้งแล้วผลต่างกัน ควรสรุปอย่างไร |
เป็นเรื่องปกติของโมเดล ต้องสั่งแก้เป็นรอบ ๆ |
"พรอมต์พังหรือโมเดลมีบั๊ก" |
| งานคลิปเปิดตัวสินค้าที่ต้องใช้ภาพถ่ายสินค้าจริง วิธีนี้เหมาะหรือไม่ |
เหมาะเฉพาะส่วนกราฟิกและข้อความ ภาพถ่ายจริงต้องนำเข้าเอง หรือใช้เครื่องมืออื่น |
"เหมาะ เพราะ Opus 5.5 สร้างได้ทุกอย่าง" |
| ตัวเลข "6.8k stars" บอกอะไรเรา |
บอกความสนใจของคน ไม่ได้บอกคุณภาพหรือความเหมาะกับงานของเรา |
"ดาวเยอะ แปลว่าพรอมต์คุณภาพสูงทุกตัว" |
| ก่อนนำวิดีโอจากคลังไปเผยแพร่ ต้องทำอะไร |
ตรวจสิทธิ์ของผู้สร้างและเงื่อนไขการใช้ ทั้งที่ MIT ใช้กับ repo |
"ใบอนุญาต MIT ครอบคลุมทุกวิดีโอแน่นอน" |
🚀 Decision / next steps
Recommendation เริ่มด้วยพรอมต์หมวด Explainers หนึ่งรายการ ทำตามเช็กลิสต์ และวัดสามตัวชี้วัดในหัวข้อ "ลองใช้" ก่อนตัดสินใจลงทุนเวลากับหมวดที่ซับซ้อนกว่า
| ลำดับ |
สิ่งที่ทำ |
เกณฑ์ผ่าน |
| 1 |
ลองพรอมต์ Explainers หนึ่งรายการ |
ได้ HTML ที่เปิดได้ |
| 2 |
ปรับเป็นหัวข้อของตัวเอง |
ผ่านภายใน 5 รอบ |
| 3 |
อัดเป็นวิดีโอและตรวจเช็กลิสต์ |
ทุกข้อผ่าน |
| 4 |
เพิ่มความยากทีละระดับ (SVG, GSAP, Three.js) |
ทำได้โดยไม่ error |
📎 Sources
| รายการ |
ค่า |
| Repo |
yihui-dev/awesome-opus5-5-videos |
| ลิงก์ |
https://github.com/yihui-dev/awesome-opus5-5-videos |
| Commit |
ไม่ทราบ (อ่านผ่านหน้าเว็บ ไม่ได้ใช้ gh) |
| วันที่อ่าน |
2026-10-20 |
| ขอบเขตที่อ่าน |
หน้า repo และ README เท่านั้น ไม่ได้อ่านไฟล์ใน prompts/ หรือ data/videos.json |
| หน้าแสดง remake |
skillry.dev/ai-videos/opus-5-5 (README ระบุ ไม่ได้เปิดอ่าน) |
🔤 ตัวย่อที่ใช้ในหน้านี้
| ตัวย่อ |
ชื่อเต็ม |
คืออะไร |
อ่านค่าอย่างไร |
| HTML |
HyperText Markup Language |
ภาษาโครงสร้างหน้าเว็บ ไฟล์เดียวใส่โค้ดแอนิเมชันได้ |
.html เปิดในเบราว์เซอร์ได้ทันที |
| SVG |
Scalable Vector Graphics |
รูปแบบภาพเวกเตอร์ |
ขยายกี่เท่าก็ไม่แตก |
| GSAP |
GreenSock Animation Platform |
ไลบรารี JavaScript จัดแอนิเมชัน |
ตั้งเวลาให้แต่ละฉากเริ่มและจบ |
| GLSL |
OpenGL Shading Language |
ภาษาเขียนเฉดเดอร์ที่ทำงานบน GPU |
ใช้ทำเอฟเฟกต์ภาพ เช่น คลื่น แสง |
| WebGL |
Web Graphics Library |
ระบบกราฟิกบน GPU ในเบราว์เซอร์ |
เป็นฐานของ Three.js |
| 3D |
Three-dimensional |
ภาพที่มีมิติความลึก |
"ฉาก 3D" คือฉากหมุนดูรอบด้านได้ |
| JSON |
JavaScript Object Notation |
รูปแบบข้อมูลข้อความ |
data/videos.json เก็บข้อมูลวิดีโอ |
| MIT |
MIT License |
สัญญาอนุญาตซอฟต์แวร์แบบเปิดกว้าง |
ใช้ได้โดยคงข้อความลิขสิทธิ์ |
| AI |
Artificial Intelligence |
ปัญญาประดิษฐ์ |
ในหน้านี้หมายถึงโมเดลภาษา |
| k |
kilo (พัน) |
หน่วยย่อของจำนวน |
6.8k = ประมาณ 6,800 |
| CDN |
Content Delivery Network |
เครือข่ายเซิร์ฟเวอร์แจกจ่ายไฟล์ไลบรารี |
ใช้ในพรอมต์ตัวอย่างเพื่อโหลด GSAP |
| GPU |
Graphics Processing Unit |
ชิปประมวลผลกราฟิก |
ฉาก 3D หนักใช้ GPU มาก |
แถวที่มาจากความรู้ทั่วไป ไม่ใช่นิยามใน repo: HTML, SVG, GSAP, GLSL, WebGL, JSON, MIT, CDN, GPU, k, AI และ 3D
Summary
- แก่นคือให้ Opus 5.5 เขียนแอนิเมชันเป็นโค้ด HTML ไฟล์เดียว แล้วอัดหน้าจอเป็นวิดีโอ
- คลังมี 703 พรอมต์ ในนั้น 418 รายการมี remake และอัปเดตล่าสุดตาม README คือ 2026-10-12
- ยังไม่มีตัวเลขพิสูจน์ว่าเร็วหรือถูกกว่าเดิม ต้องวัดเองด้วยการทดสอบก่อน-หลัง
- ตัวอย่างในคลังถูกคัดมาแล้ว ควรเตรียมแก้หลายรอบ และตรวจสิทธิ์ก่อนเผยแพร่
- หน้านี้เป็นฉบับจำกัด เพราะอ่านได้เฉพาะหน้า repo และ README
