20 สไตล์ motion ที่สั่ง Claude ได้ ก๊อปคำสั่งภาษาไทยไปใช้ได้เลย
10 ต.ค. 2569 · Claude & เครื่องมือ AI
คำสั่งให้ Claude ทำแอนิเมชันที่ดีไม่ได้อยู่ที่คำว่า "ขอสวย ๆ" แต่อยู่ที่บอกให้ชัดว่าขยับท่าไหน สีอะไร นานเท่าไหร่ และใช้เครื่องมืออะไรวาด บทความนี้รวม 20 สไตล์ motion ที่แพนเขียนคำสั่งภาษาไทยไว้แล้ว ก๊อปไปวางใน Claude ได้ไฟล์ HTML ไฟล์เดียว เปิดในเบราว์เซอร์แล้วขยับทันที ไม่ต้องมีโปรแกรมตัดต่อ ไม่ต้องมีรูป
ใช้ยังไง 3 ขั้น
- เปิด Claude แล้วเริ่มแชตใหม่ (ใช้แชตใหม่ทุกสไตล์ จะได้ไม่ปนกับงานก่อนหน้า)
- ก๊อปคำสั่งทั้งก้อนไปวาง
- เซฟโค้ดที่ได้เป็นไฟล์
.htmlแล้วดับเบิลคลิกเปิดในเบราว์เซอร์
อยากได้เป็นวิดีโอ MP4 มี 2 ทาง คืออัดหน้าจอสัก 1 รอบ loop แล้วตัดหัวท้าย หรือสั่งเพิ่มให้ Claude เขียนฟังก์ชัน renderAt(t) ที่วาดภาพ ณ วินาทีที่ t ได้แม่นยำ เพื่อเอาไปเรนเดอร์ทีละเฟรม
20 สไตล์ในชุดนี้
| # | สไตล์ | ท่า motion | เทคนิค | ขนาด |
|---|---|---|---|---|
| 1 | Particles (อนุภาค) | จุดแสง 400 จุดหมุนวนรวมเป็นรูปดาว แล้วแตกกระจายและกลับมารวมใหม่ | canvas | 1080×1920 |
| 2 | Liquid morph (ของเหลวไหลรวม) | บล็อบ 5 ก้อนลอยเข้าหากันแล้วหลอมเป็นก้อนเดียวเหมือนหยดน้ำมัน จากนั้นแยกออกอีกครั้ง | SVG filter (blur + contrast) | 1080×1080 |
| 3 | Holographic (โฮโลแกรม) | แถบรุ้งไล่ประกายกวาดผ่านการ์ดโลหะจากซ้ายไปขวา และเอียงมุมช้า ๆ | CSS gradient ขยับ background-position | 1080×1920 |
| 4 | Neon glow (นีออนเรืองแสง) | ตัวอักษรนีออนกะพริบติด ๆ ดับ ๆ 3 ครั้งแล้วติดนิ่ง | CSS text-shadow ซ้อน 4 ชั้น | 1080×1080 |
| 5 | Wireframe 3D (โครงลวดสามมิติ) | ลูกบาศก์ซ้อนทรงยี่สิบหน้าหมุนเส้นเรียบ ๆ รอบแกนเอียง | canvas ฉายภาพ 3D เอง ไม่พึ่งไลบรารี ไฟล์เดียวจบ เปิดออฟไลน์ได้ | 1080×1920 |
| 6 | Glassmorphism (กระจกฝ้า) | การ์ดกระจกฝ้า 3 ใบลอยเหลื่อมกันขึ้นลงสลับจังหวะ บนวงสีที่ไหลช้า ๆ ด้านหลัง | CSS backdrop-filter: blur(24px) | 1080×1080 |
| 7 | Kinetic type (ตัวหนังสือวิ่ง) | คำไทยกระแทกเข้าจอทีละคำ ขยายเกินแล้วหดกลับด้วยจังหวะสปริง | JS คุมสปริงเอง | 1080×1920 |
| 8 | Isometric (ไอโซเมตริก) | แท่งตึกไอโซเมตริกผุดขึ้นทีละแท่งเหมือนเมืองเล็ก ๆ แต่ละแท่งสูงไม่เท่ากัน | SVG polygon คำนวณ 3 ด้านของแท่ง ทำสีต่างกันเพื่อให้เห็นมิติ | 1080×1080 |
| 9 | Clay 3D (ดินปั้นสามมิติ) | ลูกบอลดินปั้นกระเด้งลงพื้น บีบตัวแบนตอนกระทบแล้วยืดตอนลอย พร้อมเงานุ่มใต้ลูก | canvas วาด radial gradient ทำแสงนุ่ม และคุม squash and stretch ได้ละเอียด | 1080×1920 |
| 10 | ASCII art (แอสกีอาร์ต) | วงแหวนที่ประกอบจากตัวอักษร หมุนพร้อมพองและหดสลับกัน ตัวสว่างอยู่ตรงขอบที่หมุนเข้าหา | canvas fillText ตัวอักษรเว้นช่องเท่ากัน ใช้ฟอนต์ monospace ให้ตารางไม่เบี้ยว | 1080×1080 |
| 11 | Gradient mesh (เกรเดียนต์เมช) | สีนุ่ม 5 ก้อนลอยช้า ๆ ผสมกันจนเกิดสีใหม่ตลอด ไม่มีขอบแข็ง | CSS filter: blur(80px) บน element วงกลม | 1080×1920 |
| 12 | Comic (การ์ตูนคอมมิก) | ฟองระเบิด "ปัง!" พุ่งเข้ากลางจอพร้อมสั่น 2 ครั้ง มีลายจุดฮาล์ฟโทนไล่เป็นเส้นรัศมี | SVG รูปฟอง + CSS radial-gradient ทำจุด | 1080×1080 |
| 13 | Split-flap (ป้ายพลิกสนามบิน) | ป้ายพลิกทีละช่อง สุ่มวนหลายครั้งก่อนหยุดที่คำจริง | CSS 3D rotateX | 1080×1920 |
| 14 | Retro VHS (วีเอชเอสย้อนยุค) | ตารางนีออนวิ่งเข้าหากล้อง พระอาทิตย์ครึ่งดวงอยู่ไกลสุด มีเส้นสแกนและภาพสั่นเป็นพัก ๆ | canvas วาดตาราง + CSS repeating-linear-gradient ทำเส้นสแกนซ้อนทับ | 1080×1920 |
| 15 | Halftone (ฮาล์ฟโทน) | ทรงกลมที่ประกอบจากจุด จุดโตและเล็กตามแสงที่หมุนรอบ ทำให้ดูนูนเหมือนพิมพ์หนังสือเก่า | canvas คำนวณขนาดจุดจากแสงเป็นรายตำแหน่ง ยืดหยุ่นกว่าใช้ CSS | 1080×1080 |
| 16 | Bauhaus (เบาเฮาส์) | วงกลม สามเหลี่ยม สี่เหลี่ยมหมุนและสลับตำแหน่งเป็นจังหวะ 4 จังหวะ ขยับเป็นกริด | SVG + CSS transform | 1080×1080 |
| 17 | Pixel art (พิกเซลอาร์ต) | ตัวละครกล่องพิกเซลกระโดด 3 จังหวะ บนพื้นที่เลื่อนผ่านช้า ๆ มีก้อนเมฆพิกเซลลอยเป็นฉากหลัง | canvas ปิด imageSmoothing วาดจากอาร์เรย์ 16×16 เพื่อให้ขอบพิกเซลคม | 1080×1080 |
| 18 | Blueprint (บลูพรินต์) | เฟือง 3 ตัวขบกันหมุน เส้นถูกวาดทีละเส้นก่อนเริ่มหมุน มีเส้นบอกขนาดกำกับ | SVG stroke-dashoffset ทำให้เส้นค่อย ๆ ถูกวาดขึ้นมา | 1080×1920 |
| 19 | Art deco (อาร์ตเดโค) | เส้นทองรัศมีกางเป็นพัดจากกึ่งกลางล่าง ซ้อนลายขั้นบันได แล้วเส้นวิ่งแสงผ่านทีละชั้น | SVG path | 1080×1920 |
| 20 | Neo-brutalism (นีโอบรูทัลลิซึม) | กล่องหนามีเงาดำแข็งเยื้องออกไป ปุ่ม "SHIP IT" ถูกกดยุบลงแล้วเด้งกลับ วนซ้ำ | CSS box-shadow เยื้อง (ไม่เบลอ) | 1080×1080 |
ขนาด 1080×1920 คือคลิปแนวตั้ง (Reels, TikTok, Shorts) ส่วน 1080×1080 คือจัตุรัสสำหรับโพสต์ฟีด สั่งเปลี่ยนขนาดได้ แค่บอกตัวเลขใหม่
ตัวอย่างคำสั่ง 3 อัน
ทุกคำสั่งในชุดมีโครงเหมือนกัน คือ ขนาด · ท่า · สี · ความยาว loop · เทคนิค · ข้อความไทย · ปุ่มเล่นซ้ำ
สไตล์ 1 · Particles
สร้างไฟล์ HTML ไฟล์เดียว ขนาด 1080×1920 (แนวตั้ง) สไตล์ Particles
ท่า: จุดแสง 400 จุดหมุนวนรวมเป็นรูปดาว แล้วแตกกระจายและกลับมารวมใหม่ เพื่อให้ตาตามการเคลื่อนไหวได้ง่าย
สี: พื้น #0B1020 จุดสีครีม #F6F1E7 สลับส้ม #D97757
ความยาว loop 6 วินาที ใช้ canvas เพราะจุดเยอะ วาดบน canvas ลื่นกว่าสร้าง element
ข้อความไทย "อนุภาคเต้นระบำ" ตัดทีละคำด้วย Intl.Segmenter เพราะภาษาไทยไม่เว้นวรรค
มีปุ่ม "เล่นซ้ำ" มุมล่าง และ line-height ไม่ต่ำกว่า 1.4 กันสระไทยโดนตัดสไตล์ 7 · Kinetic type
สร้างไฟล์ HTML ไฟล์เดียว ขนาด 1080×1920 (แนวตั้ง) สไตล์ Kinetic type
ท่า: คำไทยกระแทกเข้าจอทีละคำ ขยายเกินแล้วหดกลับด้วยจังหวะสปริง เพื่อให้ความหมายตามจังหวะพูด
สี: พื้นเหลือง #FFD23F ตัวอักษรดำ #111
ความยาว loop 6 วินาที ใช้ JS คุมสปริงเอง เพราะ CSS ธรรมดาให้จังหวะเด้งไม่นุ่มพอ
ข้อความไทย "ขยับตามจังหวะ" ตัดทีละคำด้วย Intl.Segmenter เพราะภาษาไทยไม่เว้นวรรค
มีปุ่ม "เล่นซ้ำ" มุมล่าง และ line-height ไม่ต่ำกว่า 1.4 กันสระไทยโดนตัดสไตล์ 20 · Neo-brutalism
สร้างไฟล์ HTML ไฟล์เดียว ขนาด 1080×1080 (จัตุรัส) สไตล์ Neo-brutalism
ท่า: กล่องหนามีเงาดำแข็งเยื้องออกไป ปุ่ม "SHIP IT" ถูกกดยุบลงแล้วเด้งกลับ วนซ้ำ
สี: พื้นเหลือง #FFD23F ขอบดำหนา 8px ปุ่มชมพู #FF8FB1
ความยาว loop 4 วินาที ใช้ CSS box-shadow เยื้อง (ไม่เบลอ) เพราะต้องการเงาแข็งแบบพิมพ์ทับ
ข้อความไทย "ส่งงานเลย" ตัดทีละคำด้วย Intl.Segmenter เพราะภาษาไทยไม่เว้นวรรค
มีปุ่ม "เล่นซ้ำ" มุมล่าง และ line-height ไม่ต่ำกว่า 1.4 กันสระไทยโดนตัดทำไมคำสั่งถึงมีข้อความแบบนี้
- ตัดคำไทยด้วย Intl.Segmenter ภาษาไทยไม่มีเว้นวรรคระหว่างคำ ถ้าไม่บอก Claude มักตัดกลางคำหรือไม่ขยับทีละคำ
- line-height ไม่ต่ำกว่า 1.4 สระและวรรณยุกต์ไทยลอยเหนือและใต้บรรทัด กล่องแคบเกินจะตัดครึ่ง
- ปุ่มเล่นซ้ำ ดูรอบเดียวแล้วพลาดรายละเอียด กดดูซ้ำได้โดยไม่ต้องรีเฟรชหน้า
- ระบุเทคนิคพร้อมเหตุผล จุดเยอะให้ใช้ canvas เส้นคมให้ใช้ SVG กล่องและตัวหนังสือใช้ CSS ล้วน
กติกากันพลาด
- แก้ทีละจุด สั่งหลายเรื่องพร้อมกัน Claude มักเขียนใหม่ทั้งไฟล์จนส่วนที่ชอบหาย ให้สั่งเช่น "เปลี่ยนแค่สีพื้นเป็นกรมท่า ส่วนอื่นห้ามแตะ"
- สระไทยโดนตัด พิมพ์ต่อท้ายว่า "ตัวหนังสือไทยโดนตัดสระ ขยาย line-height เป็น 1.5 และเอา overflow: hidden ออกจากกล่องข้อความ"
- จะทำ MP4 ให้ขอ renderAt(t) ตั้งแต่แรก ให้ทุกอย่างคำนวณจากเวลา t เดียว ภาพจะตรงกันทุกครั้งที่เรนเดอร์
รับ PDF ฟรี
คำสั่งครบทั้ง 20 อัน พร้อมวิธีใช้ กติกากันพลาด และเช็กลิสต์ก่อนใช้ รวมไว้ใน PDF 10 หน้า กดรับได้ในกล่องด้านล่าง
คลิปทั้งหมดของ panXboxy ทำจาก Claude ด้วยคำสั่งไม่กี่บรรทัด ดูตัวอย่าง 10 แบบได้ที่ /motion10
รับ PDF ฟรี: Claude × 20 สไตล์ motion · คำสั่งภาษาไทย 20 อัน (PDF 10 หน้า)
บทความอื่นในหมวดนี้
3 พ.ย. 2569 · Claude & เครื่องมือ AI
10 ตัวตัดต่อวิดีโอด้วย AI ที่เปิดโค้ดให้โหลด ตรวจแล้วว่าทำอะไรได้จริง
รวม 10 repo บน GitHub สำหรับตัดต่อวิดีโอด้วย AI ตรวจข้อมูลทีละตัวว่าทำอะไรได้ ต้องมีอะไรก่อนใช้ และตัวไหนไม่ใช่โปรแกรมอย่างที่ภาพในโพสต์ทำให้เข้าใจ พร้อมพรอมต์ตรวจ repo ก่อนติดตั้งและเช็กลิสต์
3 พ.ย. 2569 · Claude & เครื่องมือ AI
เว็บที่ AI ทำให้ แต่ไม่ดูเหมือน AI ทำ: 3 สกิล พร้อมพรอมต์
เว็บ AI ส่วนใหญ่หน้าตาซ้ำกัน ม่วงไล่เฉดกับการ์ดสามใบ บทความนี้ลองทำเว็บร้านขนมไทยด้วย Claude แล้วใช้ Taste, Impeccable และ Humanizer ให้ดูเหมือนคนทำ พร้อมขั้นตอนและพรอมต์ที่ก๊อปไปใช้ได้
1 พ.ย. 2569 · Claude & เครื่องมือ AI
เปลี่ยนรูปสินค้าธรรมดา ให้เป็นโปสเตอร์สไตล์สตูดิโอ ด้วยพรอมต์เดียว
ถ่ายรูปสินค้าด้วยมือถือ แล้วได้โปสเตอร์ตัวอักษรยักษ์ บล็อกสี เท็กซ์เจอร์งานพิมพ์ ทำกับสินค้าไทยจริง 5 ตัวแล้ว บทความนี้ให้พรอมต์ตัวเต็ม วิธีกรอก 8 ช่อง สลับสไตล์ 3 แบบ และวิธีแก้เวลาผลเพี้ยน
28 ต.ค. 2569 · Claude & เครื่องมือ AI
5 คำสั่งกล้องลับ Google Flow ทำสินค้าให้ดูพรีเมียม (ภาค 2)
วิดีโอสินค้าดูธรรมดาเพราะกล้องนิ่ง แก้ได้ด้วยคำสั่งกล้องสั้น ๆ ต่อท้ายพรอมต์ใน Google Flow: whip pan, tilt up, crane up, low angle, slow motion พร้อมพรอมต์ตัวอย่างและ PDF 100+ คำสั่ง