awesome-opus5-5-videos คลังรวมคลิปไวรัลที่สร้างด้วยโมเดล AI อย่าง Claude Opus 5.5 เพิ่งคัดงานออกจากคลังไป 150 ชิ้น โดยลบเฉพาะผลงานที่ไม่ได้เกิดจาก prompt ของ Opus 5.5 ล้วนๆ

ตอนนี้ในคลังเหลือ 703 รายการ โดยระบุว่าทุกคลิปเกิดจากการสั่งให้ Opus 5.5 เขียนแอนิเมชันเป็นโค้ด คลังนี้อยู่บน GitHub เว็บที่นักพัฒนาใช้เก็บโค้ด เปิดให้ทุกคนเข้าดูได้ และมีคนกดดาวให้แล้วกว่า 12,700 ดาว

ถ้าเคยเห็นคลิปแนวนี้บนฟีดแล้วเดาว่าเบื้องหลังต้องมีเครื่องมือสร้างวิดีโอด้วย AI ตัวท็อป คลังนี้ชวนให้คิดใหม่ เพราะแต่ละรายการมี prompt ที่ผู้สร้างแชร์ไว้ หรือมีลิงก์ไปโพสต์ต้นฉบับถ้าผู้สร้างไม่ได้เผยแพร่ prompt ชอบงานชิ้นไหนก็คัดลอกไปลองกับตัวช่วยทำงานอย่าง AI agent ของตัวเองได้ทันที

โมเดลวิดีโอส่งภาพกลับมา แต่ Opus 5.5 ส่งผลลัพธ์เป็นโค้ด

แม้สุดท้ายจะได้ภาพเคลื่อนไหวเหมือนกัน แต่สิ่งที่โมเดลส่งกลับมาให้เรานั้นต่างกันชัดเจน

โมเดลสร้างวิดีโอทั่วไปจะส่งไฟล์วิดีโอสำเร็จรูปกลับมา ซึ่งข้างในคือภาพนิ่งที่เรียงต่อกันทีละเฟรม ถ้าเราอยากเปลี่ยนข้อความแค่คำเดียวบนจอ ก็ต้องสั่งสร้างคลิปใหม่ทั้งคลิป หรือไม่ก็นำไฟล์ไปตัดต่อแก้ไขเอง

แต่วิธีของคลังนี้ต่างออกไป เพราะ Opus 5.5 จะเขียนโค้ดออกมาเป็นข้อความล้วนๆ จากนั้นเบราว์เซอร์อย่าง Chrome จะอ่านโค้ดแล้ววาดแอนิเมชันให้เราดูตอนเปิดไฟล์

ตัวอย่างเล็กๆ ที่เขียนขึ้นให้เห็นภาพ หน้าตาแบบนี้

<svg viewBox="0 0 400 100">
  <circle cy="50" r="20" fill="orange">
    <animate attributeName="cx" from="20" to="380" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

โค้ดสั้นๆ ชุดนี้วาดวงกลมสีส้มหนึ่งวง แล้วสั่งให้เลื่อนจากซ้ายไปขวาภายในเวลา 2 วินาทีแบบวนซ้ำไปเรื่อยๆ ถ้าคุณลองคัดลอกโค้ดนี้ไปวางใน Notepad บันทึกเป็นไฟล์ test.html แล้วดับเบิลคลิกเปิด เบราว์เซอร์ก็จะเล่นภาพเคลื่อนไหวให้ดูทันที

จุดเด่นคือแก้ไขง่ายมาก ถ้าอยากให้วงกลมวิ่งช้าลง ก็แค่แก้ตัวเลขจาก dur="2s" เป็น dur="5s" หรือถ้าอยากเปลี่ยนสี ก็แก้คำว่า orange ตรง fill ซึ่งไฟล์วิดีโอทั่วไปแก้แบบนี้ไม่ได้ เพราะไฟล์วิดีโอมีแต่พิกเซลภาพ ไม่มีบรรทัดโค้ดให้เราเข้าไปปรับแต่ง

ตัวอย่างนี้ไม่ได้มาจากคลัง แต่หลักคิดเหมือนกัน คือแอนิเมชันเกิดจากโค้ด งานในคลังเขียนด้วยภาษาและเครื่องมือสร้างภาพบนเว็บอย่าง HTML, Canvas, SVG และ Three.js รวมไปถึงเครื่องมืออื่นๆ หน้าที่ของคนสั่งคือบอกให้ชัดว่าอยากเห็นอะไร ส่วนการเขียนโค้ดเป็นงานของโมเดล

งานบางชิ้นในคลังไม่ใช่แค่วิดีโอ

เมื่อผลลัพธ์ออกมาเป็นโค้ด ผลงานในคลังนี้จึงไม่ได้มีแค่คลิปให้นั่งดูเฉยๆ

อย่างในหมวด Games & interactive จะมีผลงานติดแท็ก Playable ที่คลิกหรือกดเล่นได้จริง บางชิ้นใช้ Web Audio ของเบราว์เซอร์ทำให้มีเสียงประกอบด้วย ส่วนหมวด Explainers จะเป็นคลิปอธิบายเนื้อหาและความรู้ต่างๆ ผ่านภาพเคลื่อนไหว

คำว่า videos ในชื่อคลังจึงต้องอ่านให้ดี ขั้นตอนที่คลังแนะนำคือให้โมเดลส่งผลลัพธ์เป็นไฟล์ HTML ก่อน แล้วค่อยอัดหน้าเว็บนั้นถ้าต้องการวิดีโอ

703, 418 และ 100 นับคนละอย่าง

เมื่อเปิดหน้าคลังโปรเจกต์หรือ repo นี้บน GitHub ครั้งแรก คุณจะเจอตัวเลข 3 ตัวที่ชวนสับสน เพราะดูเหมือนนับของชุดเดียวกัน แต่จริงๆ นับคนละอย่าง

• 703 คือจำนวน prompt ทั้งหมดในคลัง ซึ่งเก็บอยู่ในโฟลเดอร์ prompts/ และไฟล์ data/videos.json
• 418 คือจำนวนรายการที่มี live remake หรือคลิปทำซ้ำให้ดูบน Skillry เว็บที่วางคลิปต้นฉบับคู่กับคลิปทำซ้ำ
• 100 คือจำนวนคลิปทำซ้ำที่คัดมาแสดงบนหน้าแรกของคลัง โดยแต่ละคลิปมาจากคนละ prompt ไม่ซ้ำกันเลย

แปลว่างาน 100 ชิ้นบนหน้าแรกเป็นเพียงตัวอย่างประมาณ 1 ใน 7 ของทั้งหมดเท่านั้น ทั้ง 100 ชิ้นนี้แบ่งเป็น Motion graphics 58 ชิ้น, Explainers 16 ชิ้น, 3D scenes 14 ชิ้น และ Games & interactive 12 ชิ้น

นอกจากนี้ หมวด Latest prompts บนหน้าแรกยังดึง prompt ใหม่มาแสดงให้ดูอีก 30 รายการ จากทั้งหมด 285 รายการที่เพิ่งเพิ่มเข้ามาเมื่อ 12 ตุลาคม 2026 ชื่องานในหมวดนี้บอกลักษณะงานได้ตรงๆ เช่น Saturn V Rocket Interactive 3D Model หรือ Cinematic F1 Pit Stop Animation ส่วน prompt ที่เหลือทั้งหมด เข้าไปเปิดดูเองได้ในโฟลเดอร์ prompts/

ถ้าไม่รู้ว่าจะเริ่มจากตรงไหน แนะนำให้เลือกดูจากกลุ่ม 418 รายการที่มีคลิปทำซ้ำก่อน เพราะเปิดดูคลิปเปรียบเทียบบน Skillry ได้ทันที เห็นภาพจริงแล้วเลือกได้ง่ายขึ้นว่าอยากลองทำชิ้นไหน

สังเกตแท็กเทคโนโลยีก่อนเลือก prompt

งาน 100 ชิ้นบนหน้าแรกมีแท็กบอกเทคโนโลยีที่ใช้ แท็กเหล่านี้ช่วยบอกว่างานชิ้นนั้นเป็นแนวไหนก่อนที่คุณจะกดเข้าไปอ่าน prompt

ถ้าเพิ่งลองเป็นครั้งแรก แนะนำให้เริ่มจากแท็ก SVG ก่อน เพราะ SVG คือภาพชนิดเดียวกับวงกลมตัวอย่าง พอเปิดดูโค้ดก็ยังเดาได้ว่าบรรทัดไหนคุมอะไร

ส่วนแท็ก AI image ต้องดูเป็นพิเศษ เท่าที่อ่านจากชื่อแท็ก งานชิ้นนั้นมีภาพจาก AI ผสมอยู่ด้วย จึงควรเปิดไฟล์ prompt ดูก่อนว่าต้องเตรียมอะไรเพิ่มไหม

copy prompt ไปวาง แล้วสั่งให้ออกมาเป็น HTML ไฟล์เดียว

ทางคลังแนะนำไว้ 3 ขั้นตอน:

1. เปิดไฟล์ prompt แล้วคัดลอกข้อความในส่วนที่ขึ้นหัวข้อ Prompt
2. นำไปวางใน Claude Opus 5.5 จะใช้ Claude Code โปรแกรมช่วยเขียนโค้ด, แอป Claude หรือ AI agent ตัวไหนก็ได้ที่รันด้วย Opus 5.5
3. สั่งให้ส่งผลลัพธ์เป็นไฟล์ HTML เพียงไฟล์เดียว เช่น พิมพ์กำชับต่อท้ายว่า Render the result as a single HTML file. ถ้าต้องการไฟล์วิดีโอก็ค่อยอัดหน้าจอของหน้าเว็บนั้นอีกที

พอรวมเป็นไฟล์เดียวก็เปิดดูได้ง่ายแบบเดียวกับไฟล์วงกลมตัวอย่าง คือดับเบิลคลิกแล้วเล่นบนเบราว์เซอร์ได้ทันที

ตรงนี้คุณต้องเลือกเอง เพราะไฟล์ HTML กับวิดีโอให้ผลลัพธ์คนละแบบ ไฟล์ HTML ยังเปิดแก้โค้ดต่อได้ และงานแบบ Playable ก็ยังกดเล่นโต้ตอบได้จริง แต่ต้องเปิดดูผ่านเบราว์เซอร์ ส่วนวิดีโอที่อัดหน้าจอไว้นำไปโพสต์แชร์ได้ทันที แต่จะเหลือเพียงภาพเคลื่อนไหวให้ดูอย่างเดียว

เราแนะนำให้เก็บไฟล์ HTML ต้นฉบับไว้เสมอ แม้จะอัดเป็นวิดีโอไปแล้วก็ตาม เผื่อวันข้างหน้าต้องการเปลี่ยนข้อความหรือปรับจังหวะ จะได้ไม่ต้องเริ่มสร้างใหม่ตั้งแต่ศูนย์

เมื่อได้ไฟล์มาแล้ว คุณสั่งให้ AI แก้ต่อเป็นจุดๆ ได้ทันที เช่น สั่งให้เคลื่อนไหวช้าลง เปลี่ยนโทนสี หรือแก้ข้อความให้เป็นชื่อสินค้าของคุณ ซึ่งก็คือการแก้โค้ดแบบเดียวกับที่เราแก้เลข 2s ในตัวอย่าง เพียงแต่ให้โมเดลแก้แทน

ใครสนใจสร้างผลงานแนวนี้เป็นประจำใน Claude Code ลองดูแนวทางเพิ่มเติมได้จากบทความ text-to-lottie ที่แนะนำวิธีเขียนโค้ดสร้างแอนิเมชันแทนการเรนเดอร์วิดีโอ หรือบทความ claude-motion-design ที่พูดถึงการสร้างคลิปโมชันดีไซน์ด้วยโค้ดล้วน

prompt บางตัวไม่ครบ และไม่ได้เป็นของคุณ

ผู้ดูแลคลังระบุข้อควรรู้ไว้ 2 เรื่อง ซึ่งควรอ่านให้เข้าใจก่อนนำไปใช้งานจริง:

เรื่องแรกคือ prompt บางตัวไม่ใช่เวอร์ชันเต็ม ผู้สร้างบางคนแชร์ prompt ไว้เพียงบางส่วน หรือแค่เล่าผลลัพธ์ในโพสต์ ซึ่งไฟล์ของรายการนั้นจะมีหมายเหตุบอกไว้ ถ้าเจอแบบนี้ คุณต้องคิดต่อยอดหรือเติมรายละเอียดส่วนที่ขาดไปเอง จึงควรอ่านเนื้อหาในไฟล์ให้ครบก่อนคัดลอกไปใช้งาน

เรื่องที่สองคือ โปรเจกต์นี้ใช้สัญญาอนุญาตแบบเปิดกว้างอย่าง MIT License แต่จุดที่ต้องระวังคือ ทางคลังระบุไว้เช่นกันว่า ทุกคลิปและ prompt เป็นของผู้สร้างแต่ละคน โดยผู้สร้างเปิด issue บน GitHub เพื่อขอแก้หรือถอดรายการของตัวเองได้

ถ้าจะนำไปใช้กับงานลูกค้าหรือสินค้า เราแนะนำให้กดลิงก์ไปดูโพสต์ต้นฉบับของผู้สร้างก่อน ทุกรายการในคลังมีลิงก์นี้อยู่แล้ว

คลิปส่วนใหญ่จบตอนคนดูกดปิด แต่คลิปที่มี prompt แนบมาด้วย เพิ่งเริ่มนับหนึ่งตอนนั้น

ที่มา: โปรเจกต์ awesome-opus5-5-videos บน GitHub