huashu-art-motion · ตุลาคม 2026

ให้ภาพวาดขยับ
ด้วยโค้ด

Skill ที่สอนให้ coding agent วาดงานศิลปะเป็นแอนิเมชัน มี 35 สไตล์ภาพ 9 รูปแบบวิดีโออธิบาย และด่านตรวจคุณภาพก่อนส่งมอบ ติดตั้งได้ด้วยคำสั่งเดียว

อ่าน 7 นาที ระดับกลาง Claude Code · Codex · Kimi
ใช้ฟรี MIT License
ติดตั้งด้วย คำสั่งเดียว
01 · ภาพ

35 สไตล์ศิลปะ

แวนโก๊ะ โมเนต์ เบาเฮาส์ ไปจนถึงภาพเขียนหมึกจีน

02 · เล่าเรื่อง

9 ไวยากรณ์อธิบาย

Kurzgesagt, Vox, ไวต์บอร์ด, 3Blue1Brown และอื่น ๆ

03 · ส่งมอบ

ด่านตรวจก่อนปล่อย

วัดความนิ่ง ความลื่น และกันหน้าตาเป็นสไลด์

สกิลนี้คืออะไร?

เปลี่ยนคำสั่งสั้น ๆ ให้เป็นภาพที่มีชีวิต ไม่ใช่ภาพนิ่งที่สลับกัน

huashu-art-motion สร้างโดยผู้เขียนที่ใช้ชื่อ 花叔 (Huashu) เปิดเป็นโอเพนซอร์สบน GitHub ตอนนี้มีดาวราว 3.7 พันดวง แนวคิดคือให้ agent เขียนโค้ดวาดภาพทีละชั้น แล้วทำให้ทุกชั้นเคลื่อนไหว แทนที่จะเอารูปมาต่อกันด้วยทรานซิชัน โดยฉากทั้งหมดวาดบน Canvas ในเบราว์เซอร์

ถอดแบบแล้วทำซ้ำ

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

ออกแบบเฟรมเดียวก่อน

เลือกสไตล์จากสูตร 35 ใบ ออกแบบภาพนิ่งหนึ่งเฟรมให้ถูกใจ แล้วจึงทำให้ขยับ

คลิปประกอบคำบรรยาย

ป้อนไฟล์ JSON หนึ่งไฟล์ ได้คลิปที่ความยาวเป๊ะระดับเฟรม ทั้งแนวนอน แนวตั้ง หรือพื้นหลังโปร่งใส

ตัวละครและมนุษย์

ฉากและสไตล์วาดด้วยโค้ด ส่วนคนให้โมเดลสร้างภาพเฟรม แล้วโค้ดจัดวางและสลับเฟรมให้

ดนตรีจากโค้ด

สังเคราะห์เพลงประกอบจากโค้ดล้วน ล็อกกับตารางบีต มีเทมเพลตให้ในโฟลเดอร์ scripts/audio

ตรวจก่อนส่งงาน

มีสคริปต์วัดคุณภาพ และด่านที่ไม่ปล่อยคลิปที่แทบไม่มีความเคลื่อนไหวในช็อต

มีอะไรให้เลือก?

35 สูตรสไตล์ และ 9 ไวยากรณ์วิดีโออธิบาย เป็นจุดเริ่มต้น ไม่ใช่กรอบบังคับ

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

จากภาพถ้ำ ถึงปี 2026

ชุดตัวอย่างไล่ตั้งแต่ภาพถ้ำเมื่อราว 40,000 ปีก่อนคริสตกาล ผ่านจิตรกรรมอียิปต์ แวนโก๊ะ คลิมต์ เบาเฮาส์ ไปจนถึงพิกเซล 8 บิต เวเปอร์เวฟ และงานสไตล์ชินไก ทุกสไตล์ต้องขยับได้จริง เช่น ท้องฟ้าหมุนวนในภาพแวนโก๊ะ

ศิลปินและยุคตะวันตก

แวนโก๊ะ โมเนต์ เซอราต์ มาติส เรมบรันต์ ปีกัสโซยุคสีน้ำเงิน ไปจนถึงเบาเฮาส์ ลิกเทนสไตน์ และคีธ แฮริง

ตะวันออกและอนิเมะ

หมึกจีน จิตรกรรมถ้ำตุนหวง ภาพเงาแบบจีน ฉากสีน้ำสไตล์จิบลิ และแสงแบบชินไก

ไวยากรณ์วิดีโออธิบาย 9 แบบ

Kurzgesagt, Vox, ไวต์บอร์ด, 3Blue1Brown, storytime, ตัวอักษรเคลื่อนไหว, UI แบบงานเปิดตัวสินค้า, กราฟการเงิน และแบบผู้บรรยายนำเสนอ

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

ตัวอย่างของทั้ง 35 สไตล์ พร้อมท่าเคลื่อนไหวและ Prompt ให้ลองสั่ง

เลขบนการ์ดตรงกับเลขสูตรในรีโป ซึ่งเรียงเลข 01 ถึง 36 โดยไม่มีเลข 07 จึงรวมเป็น 35 สไตล์ ส่วน "ยังต้องพัฒนา" คือจุดอ่อนที่ผู้เขียนจดไว้เองในแต่ละสูตร

ก. ยุคโบราณถึงยุคกลาง6 สไตล์

01

ภาพถ้ำก่อนประวัติศาสตร์

洞穴岩画 · Cave painting

ตัวอย่างการขยับ: สัตว์วิ่งสลับท่า มีแสงไฟและประกายถ่านลอย

ลองสั่ง: “ทำฉากสไตล์ภาพถ้ำก่อนประวัติศาสตร์ ฝูงสัตว์วิ่งรอบกองไฟ”

ยังต้องพัฒนา: ตัวมนุษย์ยังดูเป็นการ์ตูนเกินไป

02

จิตรกรรมสุสานอียิปต์

埃及墓室壁画 · Egyptian tomb mural

ตัวอย่างการขยับ: แมลงทับดันดวงอาทิตย์ รังสีเปิดปิด อักษรเฮียโรกลิฟเขียนใหม่ทีละเส้น

ลองสั่ง: “ทำฉากสไตล์จิตรกรรมสุสานอียิปต์ แมลงทับกลิ้งดวงอาทิตย์ข้ามผนังสุสาน”

ยังต้องพัฒนา: ข้อศอกตอนถือถ้วยยังแข็ง

03

ลายดำแบบแอตติก (กรีก)

阿提卡黑绘 · Attic black-figure

ตัวอย่างการขยับ: ลายเมแอนเดอร์เลื่อนย้อนกลับ เรือกับโลมากระโดด พิณแกว่ง

ลองสั่ง: “ทำฉากสไตล์ลายดำแบบแอตติก (กรีก) เรือกรีกโบราณมีโลมากระโดดข้างลำ”

ยังต้องพัฒนา: ชายเสื้อดูหนักเกินไป

04

โมเสกปอมเปอี

庞贝马赛克 · Pompeian mosaic

ตัวอย่างการขยับ: ขอบลายคลื่นไหลตามเข็มนาฬิกา ควันและประกายจากภูเขาไฟเวสุเวียส

ลองสั่ง: “ทำฉากสไตล์โมเสกปอมเปอี ภูเขาไฟพ่นควันบนพื้นโมเสก”

ยังต้องพัฒนา: รายละเอียดใบหน้าน้อยเมื่อภาพเล็ก

05

ต้นฉบับลายมือแบบกอธิก

哥特泥金手抄本 · Gothic illuminated manuscript

ตัวอย่างการขยับ: แสงทองกวาดเฉียงผ่านหน้าหนังสือ เถาวัลย์ขยับ มีหอยทากและหนู

ลองสั่ง: “ทำฉากสไตล์ต้นฉบับลายมือแบบกอธิก หน้าหนังสือเขียนมือยุคกลางที่ลายทองวิบวับ”

ยังต้องพัฒนา: ผมของตัวละครดูเหมือนฮู้ด

06

เรเนสซองส์แบบเลือนขอบ

文艺复兴晕涂 · Renaissance glazing

ตัวอย่างการขยับ: เครื่องบินของดาวินชี แสงสะท้อนบนแม่น้ำ ฝุ่นลอยกลางแดด

ลองสั่ง: “ทำฉากสไตล์เรเนสซองส์แบบเลือนขอบ ห้องทำงานของดาวินชีที่มีฝุ่นลอยในแสงแดด”

ยังต้องพัฒนา: โดยรวมยังนิ่งและตัวแมวดูเป็นการ์ตูน

ข. ศิลปะตะวันตกปลายศตวรรษที่ 19 ถึงกลางศตวรรษที่ 2015 สไตล์

08

อิมเพรสชันนิสม์

印象派 · Impressionism

ตัวอย่างการขยับ: จุดแสงเลื่อนลอย ดอกป๊อปปี้ไหว เมฆเคลื่อน ริบบิ้นปลิว

ลองสั่ง: “ทำฉากสไตล์อิมเพรสชันนิสม์ ทุ่งดอกป๊อปปี้ใต้เมฆเคลื่อนช้า”

ยังต้องพัฒนา: ฝีแปรงทำให้ใบหน้าและมือแตกเป็นเศษ

09

แวนโก๊ะ

梵高 · Post-Impressionism

ตัวอย่างการขยับ: ท้องฟ้าหมุนวน วงแหวนแสงขยาย เปลวไฟสั่น แมวหมุนเป็นวน

ลองสั่ง: “ทำฉากสไตล์แวนโก๊ะ ท้องฟ้ายามค่ำที่หมุนวนและมีวงแหวนแสงขยายออก”

ยังต้องพัฒนา: เรนเดอร์ช้าที่สุด ราว 120 มิลลิวินาทีต่อเฟรม

10

มูคา อาร์ตนูโว

慕夏新艺术 · Art Nouveau

ตัวอย่างการขยับ: ดวงอาทิตย์ขึ้น ฮาโลหมุน ดอกไม้ไหว เส้นผมม้วน

ลองสั่ง: “ทำฉากสไตล์มูคา อาร์ตนูโว หญิงสาวกับฮาโลดอกไม้หมุนรอบศีรษะ”

ยังต้องพัฒนา: ท่าทางของแมวยังแข็ง

11

คิวบิสม์เชิงวิเคราะห์

分析立体主义 · Analytic Cubism

ตัวอย่างการขยับ: ตัวอักษร CAFÉ พลิก บานกระจกเลื่อน หนังสือพิมพ์สั่น

ลองสั่ง: “ทำฉากสไตล์คิวบิสม์เชิงวิเคราะห์ โต๊ะในคาเฟ่ที่ถูกแตกเป็นหน้าตัดแบบคิวบิสม์”

ยังต้องพัฒนา: ภาพสว่างเกินไป ขาดพื้นที่สีน้ำตาลเข้มกว้าง ๆ

12

เบาเฮาส์

包豪斯 · Bauhaus

ตัวอย่างการขยับ: เข็มนาฬิกาหมุน สีแบบมองเดรียนเปลี่ยน แมวตีลูกบอล

ลองสั่ง: “ทำฉากสไตล์เบาเฮาส์ ห้องเรขาคณิตที่สีเปลี่ยนตามจังหวะ”

ยังต้องพัฒนา: หัวแมวหลุดจากโครงร่าง

18

คลิมต์ ยุคทอง

克里姆特金色时期 · Klimt Golden Period

ตัวอย่างการขยับ: ลายตาบนเสื้อคลุมกะพริบไล่กัน ผงทองลอย

ลองสั่ง: “ทำฉากสไตล์คลิมต์ ยุคทอง ชุดคลุมลายทองที่ลายตากะพริบทีละดวง”

ยังต้องพัฒนา: มือบนโต๊ะไม่ต่อกับแขนเสื้อ

19

มุงค์ เอกซ์เพรสชันนิสม์

蒙克表现主义 · Munch Expressionism

ตัวอย่างการขยับ: ทั้งภาพโยกคลอน ท้องฟ้าสีเลือดไหลวน

ลองสั่ง: “ทำฉากสไตล์มุงค์ เอกซ์เพรสชันนิสม์ สะพานริมน้ำใต้ท้องฟ้าสีเลือดที่ไหลวน”

ยังต้องพัฒนา: ผนังเคยดูเหมือนงานแวนโก๊ะ

29

เซอราต์ พอยท์ทิลลิสม์

修拉点彩 · Seurat pointillism

ตัวอย่างการขยับ: แสงซึมผ่านจุดสี จุดสีหายใจเข้าออก

ลองสั่ง: “ทำฉากสไตล์เซอราต์ พอยท์ทิลลิสม์ สวนริมน้ำที่ประกอบด้วยจุดสีหายใจได้”

ยังต้องพัฒนา: ภาพยังนิ่งและกริดจุดเป็นระเบียบเกินไป

30

มาติส ตัดกระดาษ

马蒂斯剪纸 · Matisse cut-paper

ตัวอย่างการขยับ: ชิ้นกระดาษปลิว สาหร่ายไหว

ลองสั่ง: “ทำฉากสไตล์มาติส ตัดกระดาษ สาหร่ายสีสดที่ตัดจากกระดาษโบกสะบัดใต้น้ำ”

ยังต้องพัฒนา: รอยพู่กันกวอชหนักเกินไป

23

ดาลี เซอร์เรียลลิสม์

达利超现实 · Dalí Surrealism

ตัวอย่างการขยับ: นาฬิกาละลาย ช้างขายาว มดไต่นาฬิกา เงายืด

ลองสั่ง: “ทำฉากสไตล์ดาลี เซอร์เรียลลิสม์ ทะเลทรายที่นาฬิกาละลายและเงายืดยาว”

ยังต้องพัฒนา: ตัวละครดูเป็นภาพเวกเตอร์

24

ฮอปเปอร์ เรียลลิสม์อเมริกัน

霍珀美国现实主义 · Hopper American Realism

ตัวอย่างการขยับ: ปื้นแสงเลื่อนข้ามใบหน้า เงาคนจิบชา

ลองสั่ง: “ทำฉากสไตล์ฮอปเปอร์ เรียลลิสม์อเมริกัน ห้องยามบ่ายที่ปื้นแสงเลื่อนข้ามผนัง”

ยังต้องพัฒนา: แมวอยู่ในเงาตลอดคลิป

32

เรมบรันต์ แสงเงา

伦勃朗明暗 · Rembrandt chiaroscuro

ตัวอย่างการขยับ: ลำแสงเต็มไปด้วยฝุ่น เงาเมฆปรับแสงหน้าต่าง

ลองสั่ง: “ทำฉากสไตล์เรมบรันต์ แสงเงา ห้องเก่าที่มีลำแสงจากหน้าต่างเต็มไปด้วยฝุ่น”

ยังต้องพัฒนา: ตัวละครแบน ผู้เขียนให้เป็นสไตล์แรกที่ควรทำใหม่

36

ปีกัสโซ ยุคสีน้ำเงิน

毕加索蓝色时期 · Picasso Blue Period

ตัวอย่างการขยับ: การเคลื่อนไหวช้า ๆ เหมือนหายใจ

ลองสั่ง: “ทำฉากสไตล์ปีกัสโซ ยุคสีน้ำเงิน หญิงนั่งโดดเดี่ยวในโทนสีน้ำเงินที่ขยับเหมือนหายใจ”

ยังต้องพัฒนา: ตัวละครยังไม่เศร้าพอ

22

คอนสตรัคติวิสม์รัสเซีย

俄国构成主义 · Russian Constructivism

ตัวอย่างการขยับ: ตัวอักษรสโลแกนถูกตอกทีละตัว แล้วกระโดดเป็นคลื่น

ลองสั่ง: “ทำฉากสไตล์คอนสตรัคติวิสม์รัสเซีย โปสเตอร์สโลแกนที่ตัวอักษรถูกตอกลงทีละตัว”

ยังต้องพัฒนา: ยังขาดกรวยข้อความรูปแตร

28

โมเนต์ ดอกบัวและสะพานญี่ปุ่น

莫奈睡莲与日本桥 · Monet water lilies

ตัวอย่างการขยับ: ดอกบัวลอย เงาต้นหลิวไหว ระลอกคลื่นแผ่

ลองสั่ง: “ทำฉากสไตล์โมเนต์ ดอกบัวและสะพานญี่ปุ่น สะพานญี่ปุ่นเหนือบ่อบัวที่มีระลอกแผ่กว้าง”

ยังต้องพัฒนา: ผนังดูเหมือนน้ำและพื้นดูเหมือนไม้ ทำให้พื้นที่แปลก

ค. ป๊อปและดิจิทัล9 สไตล์

13

ลิกเทนสไตน์ ป็อปอาร์ต

利希滕斯坦波普 · Lichtenstein Pop Art

ตัวอย่างการขยับ: สี่ช่องสลับสีแบบวอร์ฮอล จุดความคิดกะพริบ กล่องเสียงสั่น

ลองสั่ง: “ทำฉากสไตล์ลิกเทนสไตน์ ป็อปอาร์ต หน้าการ์ตูนป็อปอาร์ตที่มีกล่องเสียงสั่น”

ยังต้องพัฒนา: ผู้เขียนรีโปไม่ได้ระบุจุดอ่อนไว้

14

พิกเซล 8 บิต

8-bit 像素 · 8-bit pixel art

ตัวอย่างการขยับ: หางแมวกระดิก หัวใจ HUD กะพริบ เหรียญหลุดจากบล็อกคำถาม

ลองสั่ง: “ทำฉากสไตล์พิกเซล 8 บิต ฉากเกมพิกเซลที่เหรียญหลุดจากบล็อกคำถาม”

ยังต้องพัฒนา: หัวแมวถูกขอบหน้าต่างกดทับ

15

CGI เรย์เทรซยุคแรก

早期光追 CGI · Early ray-traced CGI

ตัวอย่างการขยับ: วงแหวนม่วงหมุน เลนส์แฟลร์ ตาเรืองเขียว

ลองสั่ง: “ทำฉากสไตล์CGI เรย์เทรซยุคแรก ลูกแก้วโครเมียมกับวงแหวนม่วงที่หมุนช้า”

ยังต้องพัฒนา: ขาแมวตรงเหมือนเสา หน้าเหมือนหน้ากาก

16

ภาพประกอบแฟลตร่วมสมัย

当代扁平插画 · Contemporary flat illustration

ตัวอย่างการขยับ: ตัวละครแสดงท่า กระโดด ปรบมือ แตกกระจาย ตะโกน มีการเคลื่อนไหวรอง

ลองสั่ง: “ทำฉากสไตล์ภาพประกอบแฟลตร่วมสมัย ตัวละครแฟลตที่กระโดดดีใจแล้วปรบมือ”

ยังต้องพัฒนา: ผู้เขียนรีโปไม่ได้ระบุจุดอ่อนไว้

21

คุซามะ ลายจุด

草间弥生波点 · Kusama polka dots

ตัวอย่างการขยับ: จุดพองออกจากตัวแมว ฟักทอง ห้องกระจกอนันต์

ลองสั่ง: “ทำฉากสไตล์คุซามะ ลายจุด ห้องกระจกอนันต์ที่จุดสีพองออกจากฟักทอง”

ยังต้องพัฒนา: ตัวละครสีกลืนผนังและพึ่งเส้นขอบ

26

เวเปอร์เวฟ / ไซเบอร์นีออน

蒸汽波/赛博霓虹 · Vaporwave / cyber neon

ตัวอย่างการขยับ: แถบพระอาทิตย์ตกเลื่อน กริดไหลเข้าหาจอ ป้ายกะพริบ สัญญาณ VHS รบกวน

ลองสั่ง: “ทำฉากสไตล์เวเปอร์เวฟ / ไซเบอร์นีออน เมืองนีออนยามค่ำที่กริดไหลเข้าหาจอ”

ยังต้องพัฒนา: รอยต่อระหว่างชิ้นส่วนก็เรืองแสงด้วย

27

มาร์เวล เคอร์บี ยุคจักรวาล

漫威 Kirby 银河时代 · Marvel Kirby Cosmic Era

ตัวอย่างการขยับ: ตัวอักษรเสียงปะทุ ช็อตตาแมวใกล้ จุดพลังงาน

ลองสั่ง: “ทำฉากสไตล์มาร์เวล เคอร์บี ยุคจักรวาล ฉากจักรวาลที่จุดพลังงานระเบิดเป็นตัวอักษรเสียง”

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

31

คีธ แฮริง

凯斯·哈林 · Keith Haring

ตัวอย่างการขยับ: คนตัวเล็กเต้นแบบตัดแข็งที่ 8 เฟรมต่อวินาที ทุกอย่างเด้งตามบีต

ลองสั่ง: “ทำฉากสไตล์คีธ แฮริง กลุ่มคนเส้นหนาเต้นตามจังหวะบีต”

ยังต้องพัฒนา: ตัวละครผู้หญิงยังไม่เหมือนงานแฮริงพอ

33

การ์ตูนท่อยางทศวรรษ 1930

1930 橡皮管卡通 · 1930 rubber-hose cartoon

ตัวอย่างการขยับ: ทุกอย่างเด้งตามจังหวะเพลง

ลองสั่ง: “ทำฉากสไตล์การ์ตูนท่อยางทศวรรษ 1930 ตัวการ์ตูนแขนขาท่อยางเต้นตามจังหวะเพลง”

ยังต้องพัฒนา: การเคลื่อนไหวจำนวนมากเป็นเพียงฟิล์มนอยส์

ง. ตะวันออกและอนิเมะ5 สไตล์

17

หมึกจีนเสี่ยหยี่

中国水墨写意 · Chinese ink wash

ตัวอย่างการขยับ: ฝีแปรงเขียนตัวเอง หมึกซึมบนกระดาษ หนวดกุ้งขยับ

ลองสั่ง: “ทำฉากสไตล์หมึกจีนเสี่ยหยี่ กุ้งในภาพหมึกจีนที่ฝีแปรงวาดตัวเองทีละเส้น”

ยังต้องพัฒนา: ตัวละครยังไม่สื่ออารมณ์พอ

20

จิตรกรรมถ้ำตุนหวง

敦煌壁画 · Dunhuang mural

ตัวอย่างการขยับ: ริบบิ้นนางอัปสรลอย ลายเพดานเลื่อน เปลวตะเกียงไหว

ลองสั่ง: “ทำฉากสไตล์จิตรกรรมถ้ำตุนหวง นางอัปสรบินในถ้ำตุนหวงที่มีเปลวตะเกียงไหว”

ยังต้องพัฒนา: ตัวละครที่บินยังหยาบ

34

ภาพเงาแบบจีน

中国皮影 · Chinese shadow puppetry

ตัวอย่างการขยับ: ก้านบังคับข้อต่อแข็ง สะบัดข้อมือ

ลองสั่ง: “ทำฉากสไตล์ภาพเงาแบบจีน ละครเงาจีนที่ตัวหุ่นสะบัดข้อมือ”

ยังต้องพัฒนา: ส่วนที่ซ้อนกันมืดเกินไป และเรนเดอร์ช้า ราว 121 มิลลิวินาทีต่อเฟรม

25

ฉากสีน้ำสไตล์จิบลิ

吉卜力水彩背景 · Ghibli watercolor backgrounds

ตัวอย่างการขยับ: ม่านพลิ้ว หญ้าไหว เงาใบไม้ระยิบบนพื้น

ลองสั่ง: “ทำฉากสไตล์ฉากสีน้ำสไตล์จิบลิ ห้องริมหน้าต่างที่ม่านพลิ้วและเงาใบไม้ระยิบ”

ยังต้องพัฒนา: ตัวละครอ่อนกว่าฉากหลัง

35

แสงแบบชินไก

新海诚光影 · Makoto Shinkai light

ตัวอย่างการขยับ: อนุภาคแสงลอย เมฆเคลื่อน

ลองสั่ง: “ทำฉากสไตล์แสงแบบชินไก ท้องฟ้าหลังฝนที่อนุภาคแสงลอยและเมฆเคลื่อน”

ยังต้องพัฒนา: ฉากภายในยังไม่หนาแน่นพอ

ตัวอย่างหลัก: ผจญภัยแบบเกมมาริโอ

ผู้เขียนทำตัวเองเป็นตัวละครพิกเซลวิ่งผ่านด่านยาว 65 วินาที ฉากด่านและทรานซิชันใช้โค้ด ส่วนตัวละครใช้เฟรมที่สร้างด้วยโมเดล

ตัวอย่างอื่น ๆ ในรีโป

มีคลิปทัวร์พิพิธภัณฑ์ยามค่ำคืนยาว 98 วินาทีที่ไม่มีเสียงบรรยาย และคลิปเดินทะลุภาพวาดชื่อดัง 23 สไตล์ยาว 2 นาที 8 วินาที

เตรียมอะไรบ้าง?

เตรียม 4 อย่าง แล้วติดตั้งสกิลได้ในไม่กี่นาที

รันบนเครื่องของคุณเอง ไม่ต้องมีบัญชีบริการภาพหรือเสียง เว้นแต่ต้องการให้ agent สร้างภาพตัวละครหรือเสียงพูดเพิ่ม

uv

ตัวจัดการแพ็กเกจ Python ที่สกิลใช้สั่งรันสคริปต์ทุกตัว

จำเป็น

ffmpeg

ใช้ประกอบเฟรมเป็นไฟล์วิดีโอและใช้ตอนถอดแบบอ้างอิง

จำเป็น

Playwright Chromium

เบราว์เซอร์แบบ headless ที่ใช้เรนเดอร์ฉาก Canvas ทีละเฟรม ติดตั้งครั้งแรกครั้งเดียว

จำเป็น

Agent ที่รองรับสกิล

ผู้เขียนทดสอบการติดตั้งกับ Claude Code, Codex CLI และ Kimi Code CLI

Claude CodeCodexKimi

สไตล์ให้เลือก

0 แบบ

พร้อมโค้ดฉากครบทุกสไตล์ ใช้เป็นจุดตั้งต้นแล้วต่อยอดเองได้

เริ่มยังไงดี?

5 ขั้นตอน ตั้งแต่ติดตั้งจนได้ เฟรมแรก ของคุณ

1

เตรียมเครื่องมือพื้นฐาน

ติดตั้ง uv และ ffmpeg ตามวิธีของระบบปฏิบัติการคุณ แล้วเช็กว่าเรียกคำสั่ง uv และ ffmpeg ได้จากเทอร์มินัล

2

เพิ่มสกิลเข้า agent

รันคำสั่งนี้ในเทอร์มินัล

ติดตั้งสกิล

npx skills add alchaincyf/huashu-art-motion
3

ติดตั้ง Chromium ให้ Playwright

ทำครั้งแรกครั้งเดียว

ติดตั้งเบราว์เซอร์

uv run --with playwright playwright install chromium
4

ลองเรนเดอร์เฟรมเดียว

เข้าโฟลเดอร์โปรเจกต์ที่โคลนมา แล้วสั่งเรนเดอร์ภาพนิ่งจากฉากสไตล์แวนโก๊ะที่ 0.3 วินาที

เรนเดอร์ภาพนิ่งทดสอบ

uv run --with playwright python scripts/engine/render.py --solo 09_postimp --stills 0.3 --out test
เคล็ดลับ: ถ้าได้ภาพออกมา แปลว่าเครื่องมือทั้งหมดพร้อมแล้ว ค่อยไปสั่งงานจริง
5

สั่งงานผ่าน agent

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

ทำงานยังไง?

จากไอเดียถึงไฟล์ MP4 ผ่าน ขั้นตอนที่ตรวจสอบได้ ทุกด่าน

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

ออกแบบเฟรมเดียว

ตัดสินสไตล์จากภาพนิ่งก่อน

ทำให้ขยับ

แต่ละฉากมีการเคลื่อนไหวหลักและวนซ้ำย่อย

ตรวจตัวเลข

รัน qa.py วัดความนิ่งและความลื่น

ส่งมอบ

deliver.py ผ่านด่านก่อนคัดลอกไฟล์

กติกาที่สกิลบังคับ

ข้อกำหนดเหล่านี้ช่วยให้ผลงานมีมาตรฐานและทำซ้ำได้

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

3 Prompt ตั้งต้นที่สั่งงานได้ทันที แก้ตัวแปรในวงเล็บเหลี่ยมให้ตรงกับงานของคุณ

รีโปเขียนตัวสกิลเป็นภาษาจีน แต่ agent อ่านเข้าใจและทำงานตามที่คุณสั่ง เลือกภาษาที่ถนัดได้

แอนิเมชันสไตล์ศิลปิน

ใช้สกิล huashu-art-motion ทำแอนิเมชันความยาว [10] วินาที เกี่ยวกับ [หัวข้อ เช่น ร้านกาแฟยามเช้า] ในสไตล์ [แวนโก๊ะ / โมเนต์ / เบาเฮาส์]
เริ่มจากออกแบบเฟรมเดียวให้ฉันดูก่อน เสนอ 3 ทิศทางให้เลือก แล้วค่อยทำให้ขยับ

คลิปอธิบายตามเสียงพูด

ใช้สกิล huashu-art-motion ทำคลิปประกอบคำบรรยายแนว [Kurzgesagt / Vox / ไวต์บอร์ด / กราฟการเงิน]
เนื้อหา: [สรุปประเด็นที่จะพูด]
ขนาด: [แนวนอน 16:9 / แนวตั้ง 9:16] ความยาวให้ตรงกับเสียงบรรยาย

ถอดแบบแล้วเลียนกลไก

ใช้สกิล huashu-art-motion ถอดแบบแอนิเมชันอ้างอิงไฟล์ [ชื่อไฟล์.mp4]
วัดทรานซิชัน ตารางบีต และบริเวณที่ขยับในแต่ละช่วง แล้วเขียนโค้ดเลียนกลไกให้ใช้กับหัวข้อ [หัวข้อใหม่ของฉัน] ไม่ต้องลอกภาพต้นฉบับ

ข้อควรระวังเรื่องลิขสิทธิ์

โค้ดและเอกสารเป็น MIT แต่มีข้อยกเว้นที่ต้องอ่านก่อนนำไปใช้ต่อ

  • ภาพตัวการ์ตูนและเฟรมตัวละครของผู้เขียน ใช้เพื่อการสาธิตสกิลเท่านั้น ไม่ได้อนุญาตตาม MIT
  • Clawd เป็นมาสคอตของ Anthropic คลิปที่เกี่ยวข้องเป็นผลงานแฟนเมดที่ไม่เป็นทางการ และไม่อยู่ใต้ MIT
  • ฟอนต์ในโปรเจกต์ใช้สัญญา OFL ภาพวาดในตัวอย่างมาจากคลังเปิด CC0 ของพิพิธภัณฑ์ Met
ยังสงสัยอะไรอยู่?

คำถามที่มือใหม่มักถาม ก่อนลองใช้สกิลนี้

ต้องเขียนโค้ดเองไหม?
ไม่ต้อง คุณสั่งเป็นภาษาธรรมดา แล้ว agent จะเขียนโค้ดและรันสคริปต์ให้ แต่ควรอ่านผลลัพธ์และสั่งแก้เป็นรอบ ๆ
ต้องใช้บริการสร้างภาพหรือเสียงเพิ่มไหม?
แอนิเมชันโค้ดล้วนไม่ต้อง ส่วนภาพตัวละครและเสียงพูดเป็นความสามารถเสริมแบบเลือกได้ สกิลจะไม่เปิดใช้เองจนกว่าคุณจะเลือกและอนุญาต
ใช้กับ Claude Code ได้จริงไหม?
การติดตั้งผ่านครบทั้ง Claude Code, Codex และ Kimi ส่วนการทดสอบรันกับโมเดลออนไลน์ ผ่านเฉพาะ Codex ตามบันทึกของผู้เขียน ฝั่ง Claude Code และ Kimi ติดข้อจำกัดบัญชีทดสอบ จึงยังไม่ได้ยืนยัน แต่ผู้เขียนระบุว่าไม่ได้แปลว่าไม่รองรับ
เครื่อง Windows หรือ Linux ใช้ได้ไหม?
การเรนเดอร์ใช้ Playwright และ ffmpeg ซึ่งมีให้หลายระบบ ผู้เขียนรีโปเคยแก้ปัญหาการโหลดพร้อมกันบน Windows ตามที่ผู้ใช้รายงาน ส่วนเสียงพูดจากระบบ ตอนนี้ทดสอบจริงเฉพาะ macOS และยังไม่มีตัวรองรับบน Windows หรือ Linux
ศัพท์ไหนไม่คุ้น?

อภิธานศัพท์ คำที่ใช้ในบทความนี้

รวมความหมายของคำเทคนิคและชื่อเครื่องมือที่พูดถึงในบทความ แบบภาษาง่าย

Skillสกิลแนวคิด
ชุดคำแนะนำและสคริปต์ที่ติดตั้งให้ agent เพื่อให้ทำงานเฉพาะทางได้ดีขึ้นตัวอย่าง: สกิลนี้สอนให้ agent ออกแบบเฟรมก่อนทำให้ขยับ
CanvasHTML Canvasเทคโนโลยี
พื้นที่วาดภาพในเว็บเบราว์เซอร์ที่ใช้โค้ดสั่งวาดเส้นและสี ทำให้ฉากทั้งหมดถูกสร้างด้วยโปรแกรมตัวอย่าง: ฉากสไตล์แวนโก๊ะ 35 ฉากเขียนด้วย Canvas
Playwrightเพลย์ไรต์เครื่องมือ
เครื่องมือควบคุมเบราว์เซอร์ด้วยโค้ด ในที่นี้ใช้เปิดฉากแล้วจับภาพทีละเฟรมตัวอย่าง: ขั้นตอนที่ 3 ติดตั้ง Chromium ให้ Playwright
uvยูวีเครื่องมือ
ตัวจัดการแพ็กเกจและรันสคริปต์ Python ที่เร็วและไม่ต้องตั้งค่าสภาพแวดล้อมเองตัวอย่าง: ทุกคำสั่งเรนเดอร์ขึ้นต้นด้วย uv run
ffmpegเอฟเอฟเอ็มเพ็กเครื่องมือ
โปรแกรมแปลงและประกอบไฟล์วิดีโอและเสียงผ่านบรรทัดคำสั่งตัวอย่าง: ใช้ประกอบเฟรมเป็น MP4
ไวยากรณ์อธิบายExplainer grammarแนวคิด
ชุดกฎภาพและจังหวะของวิดีโออธิบายแต่ละสาย เช่น แบบกระดาษตัดแปะหรือแบบกระดานขาว ที่สกิลถอดเป็นพารามิเตอร์ตัวอย่าง: เลือกไวยากรณ์ไวต์บอร์ดเมื่อต้องการวาดตามเสียงพูด
QA ด่านตรวจQuality gateคุณภาพ
ขั้นตรวจอัตโนมัติก่อนส่งงาน ถ้าคลิปไม่ผ่านเกณฑ์จะไม่ถูกส่งออกตัวอย่าง: ด่านกันคลิปที่แทบไม่ขยับ
คัดลอกแล้ว
← Skill360