🎯 แก่นของเรื่อง
Motion2Code เป็น "สกิล" ชุดหนึ่งที่สอน Coding Agent ให้ทำงานเป็นวงจร: ดูวิดีโอ, เขียนโค้ด, วัดความต่างกับวิดีโอ, แก้, แล้ววนใหม่จนตัวเลขผ่านเกณฑ์ ตัวเลขที่ใช้ตัดสินมาจากสคริปต์ ไม่ได้มาจากความรู้สึกของ AI
Important ความจริงที่ต้องจำข้อเดียว: Agent เขียน Animation แบบมองไม่เห็นผลลัพธ์ จึงต้องมีภาพหรือตัวเลขจากสคริปต์รองรับทุกข้ออ้างว่า "เหมือนแล้ว" (อ่านจาก repo 2026-10-21)
ทำไมวิธีนี้ได้ผล (เหตุและผล)
| ปัจจัย |
กลไก |
ผลที่ตามมา |
| ใช้ GSAP timeline เป็นนาฬิกาเดียว |
ทุกอย่างบนจอคำนวณจากเวลา t ค่าเดียว |
เลื่อนไปเฟรมไหนก็ได้ ได้ภาพเดิมทุกครั้ง จึงเทียบกับวิดีโอทีละเฟรมได้ |
| วาดเป็น SVG แบบสีเรียบ |
รูปร่างและสีเป็นค่าในโค้ด ไม่ใช่พิกเซล |
ขยายได้ไม่แตก แก้ข้อความและสีได้ ไฟล์เล็ก |
| บังคับให้เฟรมสุดท้ายเท่าเฟรมแรกในโค้ด |
ไม่พึ่งว่าวิดีโอต้นทางวนลูปหรือไม่ |
วนไม่สะดุด และตรวจเป็นตัวเลขได้ |
| ตรวจก่อนส่งงานด้วยสคริปต์ |
frame_diff.py และ check_anim.py ให้คะแนน |
จับความต่างที่ตาเปล่ามองข้ามได้ |
20% ที่สำคัญที่สุดในทางปฏิบัติ
| ต้องทำให้ถูกก่อน |
รอได้ |
| ศึกษาวิดีโอ: สกัดเฟรมทุก 0.25 วินาที, ดึงจานสี, เขียน shot list |
โครงสร้างโค้ดที่สวยงาม |
ให้ timeline เป็นนาฬิกาเดียว และ seek(t) ต้องให้ผลซ้ำเสมอ |
เก็บรายละเอียดเล็ก เช่น น้ำหนักเส้น |
| แก้โครงสร้างก่อน (รูปร่าง ตำแหน่ง จังหวะ) แล้วค่อยแก้รายละเอียด |
โหมดเว็บจริง site.html |
รัน check_anim.py --runtime ให้ผ่านก่อนส่งงาน |
วิดีโอพิสูจน์ผลแบบ side by side |
🧩 ภาพรวมระบบ
Motion2Code เป็นโปรเจกต์ Open Source (ใบอนุญาต MIT) ของ Lovis Odin อ่านจาก repo 2026-10-21 พบว่า repo นี้ไม่ใช่แอปที่เปิดใช้เอง แต่เป็นชุดคำสั่งและสคริปต์ให้ Agent ใช้ ผลลัพธ์ที่ได้คือไฟล์ HTML ไฟล์เดียวที่มี SVG หนึ่งชิ้นกับ GSAP หนึ่ง timeline
flowchart LR
A[วิดีโอต้นทาง] --> B[study_video.py]
B --> C[shot list + จานสี]
C --> D[เขียน index.html]
D --> E[frame_diff.py]
E -->|ยังต่างมาก| D
E -->|ผ่าน| F[check_anim.py --runtime]
F -->|ไม่ผ่าน| D
F -->|ผ่าน| G[ส่งงาน + รายงาน]
ผลลัพธ์ที่ส่งมอบ
| ไฟล์ |
ใช้ทำอะไร |
ที่มา |
index.html |
Animation ที่สร้างใหม่ วนลูปได้ |
อ่านจาก repo |
compare.html |
หน้าวางเทียบกับวิดีโอต้นฉบับ ขยับทีละเฟรม |
อ่านจาก repo |
site.html |
เว็บใช้งานจริง (เฉพาะวิดีโอที่เป็นการอัดหน้าจอแอปหรือเว็บ) |
อ่านจาก repo |
| วิดีโอพิสูจน์ (MP4, GIF) |
แสดงผลเทียบ ถ้าสั่งเพิ่ม |
อ่านจาก repo |
⚙️ ขั้นตอนทำงานทีละขั้น
ขั้น 1: ศึกษาวิดีโอ
คำสั่ง: python3 scripts/study_video.py source.mp4 -o study/
| สิ่งที่ได้ |
รายละเอียด |
| เฟรมทุก 0.25 วินาที |
ถ้าคลิปเร็ว ลดเป็นทุก 0.125 วินาที (3 เฟรมที่ 24 fps) |
| เฟรมรอบจุดตัดภาพ |
ช่วงเปลี่ยนฉากมักใช้แค่ 2 ถึง 4 เฟรม |
| Contact sheet |
1 ช่องต่อ 0.5 วินาที |
| จานสีแบบเรียบ |
งานแนว flat มักใช้ 4 ถึง 8 สี |
| คะแนนวนลูปของต้นทาง |
ต่ำกว่า 6 แปลว่าต้นทางวนอยู่แล้ว |
ความยาวจริงให้ดูจาก ffprobe เพราะเครื่องสร้างวิดีโอมักคืน 10.10 หรือ 15.10 วินาทีแทน 10 หรือ 15 วินาที ถ้ามีไฟล์ prompt .txt วางข้างวิดีโอ ไฟล์นั้นกำหนดการสะกดและเจตนา ส่วนวิดีโอกำหนดจังหวะ รูปร่าง และสี
ขั้น 2: เขียน shot list
เขียนหนึ่งบรรทัดต่อหนึ่งจังหวะ (beat) ระบุช่วงเวลา สิ่งที่เข้า/ออก ตำแหน่งและขนาดที่วัดได้ ลักษณะการเคลื่อนไหว (easing) และสิ่งที่เปลี่ยนต่อไป พร้อมบันทึกขนาดเวที 1920x1080 หรือ 1080x1920
ขั้น 3: สร้างเวทีและ Animation
| หลักการ |
เหตุผล |
| SVG หนึ่งชิ้นที่ขนาดพิกเซลของต้นทาง |
พิกัดตรงกับวิดีโอ เทียบง่าย |
| วาดแต่ละวัตถุรอบจุดกำเนิดของมันเอง |
squash and stretch ยึดที่ถูกจุด |
| Tween ใช้กับจังหวะทีละช็อต โดยระบุเวลาเริ่มแบบสัมบูรณ์ |
แก้เวลาจังหวะหนึ่งแล้วจังหวะอื่นไม่เลื่อน |
ฟังก์ชัน draw(t) ใช้กับงานเชิงคำนวณ เช่น อนุภาค ฟิสิกส์ และการ morph |
ภาพทั้งเฟรมสร้างจากสถานะเริ่มต้นและ t |
| ใช้สุ่มแบบ seeded คำนวณล่วงหน้า |
ได้ภาพเดิมทุกครั้งที่ seek |
| คำนวณ spring/bounce เป็นสูตรปิด |
ไม่ต้องจำลองทีละขั้น จึงไม่ขึ้นกับลำดับการ seek |
ขั้น 4: ปิดลูปด้วยโค้ด
| กรณี |
วิธีแก้ (อ่านจาก repo) |
| ต้นทางไม่วน |
ใช้ 0.6 ถึง 1.2 วินาทีสุดท้ายทำท่ากลับ เช่น iris ปิด หรือ morph เป็นรูปแรก |
| หมุน |
tween ไปที่ 360 แล้วตั้งค่าเป็น 0 |
| ลอยต่อเนื่อง (เมฆ ลายเลื่อน) |
ระยะรวมต้องเป็นจำนวนเต็มเท่าของคาบลาย |
| วงรอบตามเวลา |
เลือกคาบที่หารความยาวคลิปลงตัว หรือลดแอมพลิจูดเป็น 0 ก่อนจบ |
| อนุภาค |
ที่ยังอยู่ตอนจบต้องตรงกับตอนเริ่ม หรือไม่มีเลยทั้งสองด้าน |
เก็บ "เฟรมเปิด" ไว้ที่เดียว (เช่น object OPEN) แล้วให้ช็อตสุดท้ายวิ่งไปหาค่านั้น เพราะการคัดลอกตัวเลขด้วยมือพลาดแค่ 2 px ก็เห็นการกระตุกได้
ขั้น 5: ตรวจแล้วแก้วนซ้ำ
| ลำดับ |
ทำอะไร |
เครื่องมือ |
| 1 |
ร่างรอบแรกครบทุกช็อต |
– |
| 2 |
เทียบทุก 0.5 วินาที แก้โครงสร้างก่อนรายละเอียด |
frame_diff.py |
| 3 |
ซูมที่จุดเปลี่ยนด้วย --every 1/24 |
frame_diff.py |
| 4 |
ขัดสี น้ำหนักเส้น ใบหน้า การเคลื่อนไหวรอง |
ดูภาพเอง |
| 5 |
รันจนผ่านแล้วเรนเดอร์หลักฐาน |
check_anim.py --runtime, render_anim.py, side_by_side.py |
เกณฑ์คะแนนของ frame_diff.py (ค่าความต่าง RGB เฉลี่ยที่ 192x108) ใช้จัดอันดับช่วงเวลา ไม่ใช่ตัวตัดสินผ่านหรือไม่ผ่าน
| คะแนน |
ความหมายโดยประมาณ |
| ต่ำกว่า 10 |
ช่วงนิ่ง ตรงกันดี |
| 10 ถึง 30 |
ช่วงเคลื่อนไหวเร็ว (ต้นทางเป็นวิดีโอ AI จึงมี blur และ noise) |
| เกิน 40 |
รูปร่าง สี หรือจังหวะผิด |
🌐 โหมดสร้างเว็บจริงจากวิดีโอหน้าจอ
ใช้กับวิดีโอที่อัดหน้าเว็บหรือแอป ได้สองชั้น: ชั้นแรก index.html เป็นการเล่นซ้ำ (replay) ชั้นสอง site.html เป็นเว็บที่โต้ตอบได้ (อ่านจาก repo 2026-10-21)
| พฤติกรรมในวิดีโอ |
สิ่งที่ถูกสร้างใน site.html |
| เลื่อนหน้า |
ScrollTrigger (scroll-triggered reveal และฉากที่ pin/scrub) |
| คลิกปุ่มปลอม |
ปุ่มและลิงก์จริงแบบ semantic |
| เมนู สไลเดอร์ แท็บ |
ตัวควบคุมที่ใช้คีย์บอร์ดและสัมผัสได้ |
| ลูปบรรยากาศ |
ปิดเมื่อผู้ใช้ตั้งค่า reduced-motion |
ข้อกำหนดของ site.html: responsive ตั้งแต่ 1920 px ถึง 375 px โดยไม่มีแถบเลื่อนแนวนอน มี focus ที่เห็นชัด โหลดเฉพาะ GSAP กับ Google Fonts และไม่มี error ใน console ข้อความเนื้อหาในวิดีโอที่อ่านออกเท่านั้นที่กลายเป็นข้อความจริง ส่วนข้อความที่เป็นขยะจะกลายเป็นแท่งสี หรือถูกตัดออก
🔬 ข้อตกลงของหน้า (page contract)
| รายการ |
ค่า |
| ออบเจ็กต์ควบคุม |
window.anim = { tl, duration, seek(t), play(from), pause() } |
?t=6.5 |
หยุดที่วินาที 6.5 |
?external=1 |
ไม่เล่นเอง รอให้ภายนอกควบคุม |
| ไม่มีพารามิเตอร์ |
เล่นอัตโนมัติและวนลูป |
data-ready="1" |
ตั้งเมื่อฟอนต์โหลดแล้วและวาดเฟรม 0 เสร็จ |
| เงื่อนไขลูป |
frame(duration) ต้องเท่ากับ frame(0) |
| ไลบรารี |
SVG ฝัง, GSAP 3 (cdnjs), flubber (jsdelivr, เมื่อต้อง morph), Google Fonts เท่านั้น |
🚫 กฎเหล็กของสกิล
| กฎ |
เหตุผล (ตีความ) |
| ใช้เฉพาะวิดีโอที่ให้มา ห้ามสร้างใหม่ ห้ามฝังหรือ trace ภาพ |
ผลงานต้องเป็นโค้ดจริง ห้ามใช้ <img>, <video>, drawImage |
| สะกดข้อความตามที่กำหนดทุกตัวอักษร |
ป้องกัน AI "แก้" คำให้ผิดเจตนา |
| สีทึบที่สุ่มตัวอย่างจากต้นทาง ไม่ใส่ gradient/เงา/ฟิลเตอร์ที่ต้นทางไม่มี |
รักษาความเหมือนและขนาดไฟล์ |
ห้าม requestAnimationFrame, setTimeout, CSS animation, Date.now() |
ต้องมีนาฬิกาเดียวจึง seek แบบกำหนดผลได้ |
| ไม่บีบ เติม หรือสลับลำดับจังหวะ |
รักษาจังหวะต้นทาง |
| รายงานความต่างตามจริง ห้ามอ้างว่า "pixel perfect" |
ความซื่อสัตย์ของผลตรวจ |
🧪 ช่วยให้ดีขึ้นอย่างไร
| สถานการณ์ |
ไม่ใช้ |
ใช้ |
วัดอย่างไร |
หลักฐาน |
| แกะ Animation ที่เห็นบนเว็บ |
ดูแล้วเดาเวลา สี การเคลื่อนไหวเอง |
มีเฟรมทุก 0.25 วินาทีและจานสีสำเร็จรูป |
เวลาที่ใช้ทำ shot list |
ตีความ (ยังไม่มีตัวเลขเวลาที่ประหยัดได้) |
| ขนาดไฟล์ |
วิดีโอ MP4 ขนาดหลายร้อย KB ถึงหลาย MB |
HTML ที่สร้างใหม่ 24 ถึง 60 KB ต่อคลิป 10 ถึง 15 วินาที |
ขนาดไฟล์ index.html |
อ่านจาก repo (gallery 24 ถึง 60 KB; ต้นทาง source.mp4 266 ถึง 847 KB ที่ 480p) |
| ความคมชัด |
วิดีโอขยายแล้วแตก |
SVG เรนเดอร์ได้ที่ 4K หรือใหญ่กว่า |
เรนเดอร์ด้วย render_anim.py --size 3840x2160 |
อ่านจาก repo (ยังไม่ทดสอบเอง) |
| การแก้ข้อความและสี |
ต้องทำวิดีโอใหม่ |
แก้ค่าในโค้ด |
จำนวนขั้นตอนในการแก้ |
ตีความ |
| ลูปไม่สะดุด |
ขึ้นกับต้นทาง |
ปิดลูปในโค้ด ตรวจเชิงตัวเลข |
ความต่างเฉลี่ย frame(duration) กับ frame(0) ไม่เกิน 1.0 |
อ่านจาก repo (เกณฑ์ที่สคริปต์บังคับ ยังไม่ทดสอบเอง) |
| ความเหมือนต้นฉบับ |
ไม่รู้ว่าต่างตรงไหน |
มีคะแนนเป็นรายเวลาและภาพเทียบ |
คะแนน frame_diff ช่วงที่แย่ที่สุด |
อ่านจาก repo ว่ามีเครื่องมือ แต่ไม่มีตัวเลขรับประกันว่าเหมือน 100% |
| เวลาและต้นทุนโทเค็น |
เขียนมือ |
ให้ Agent วนตรวจหลายรอบ |
จำนวนรอบและเวลา |
ยังไม่ทดสอบ (อาจแพงกว่าเดิมเมื่อ Agent วนหลายรอบ) |
Warning ผลตรวจที่ผ่านไม่ได้แปลว่าเหมือน 100% ตัวสกิลเองกำหนดให้รายงาน "ความต่างจากต้นทางตามจริง" ไม่ใช่อ้างว่าเหมือนทุกพิกเซล
🛠️ ลองใช้
ติดตั้ง
| วิธี |
คำสั่ง/ขั้นตอน |
สถานะ |
| Agent ที่รองรับ (ราว 70 ตัว) |
npx skills add lovisdotio/motion2code |
README ระบุให้ใช้เครื่องมือ skills ผ่าน npx; ยังไม่ได้ทดสอบ |
| Claude Code |
เพิ่ม marketplace แล้วติดตั้ง plugin หรือคัดลอกโฟลเดอร์สกิล |
อ่านจาก repo |
| Codex, Cursor, Gemini CLI, Copilot |
มีตำแหน่งหรือคำสั่งเฉพาะ; Cursor และ Copilot ต้องมีไฟล์ adapter |
อ่านจาก repo |
| claude.ai |
zip โฟลเดอร์สกิลแล้วอัปโหลดที่การตั้งค่า Skills |
อ่านจาก repo |
| ChatGPT, Gemini Gems |
ใช้ prompt ในโฟลเดอร์ adapters/ |
อ่านจาก repo |
ต้องมี Python 3.9 ขึ้นไป, FFmpeg และ Playwright (ตัวหลังใช้กับสคริปต์ที่เปิดเบราว์เซอร์)
ตัวอย่างคำสั่งถึง Agent
Rebuild clip.mp4 as an SVG + GSAP animation that loops
หรือสั่งให้เปลี่ยนวิดีโอตัวอย่างหน้าแอปเป็นเว็บที่ใช้งานได้จริง สำหรับงานที่ต้องการรายละเอียดมากขึ้นใช้ prompts/convert-video-prompt.md เป็นแบบฟอร์มคำสั่ง
ตัวอย่างประกอบ (ตัวเลขที่เราสมมติ คำนวณซ้ำได้)
คลิป 15 วินาทีที่ 24 fps ไม่วนลูป มีเมฆลอยไปทางขวา
| รายการ |
การคำนวณ |
ผล |
| เฟรมที่ศึกษา |
15 ÷ 0.25 |
60 เฟรม |
| จำนวนเฟรมทั้งคลิป |
15 × 24 |
360 เฟรม |
| คาบลายเมฆ 3 วินาที |
15 ÷ 3 |
ลอยครบ 5 รอบพอดี ปิดลูปได้ |
| คาบลายเมฆ 4 วินาที |
15 ÷ 4 |
3.75 รอบ ไม่ลงตัว ลูปกระตุก ต้องเปลี่ยนคาบหรือลดแอมพลิจูดเป็น 0 |
| เฟรมที่ต้องเทียบกับเฟรม 0 |
วินาทีที่ 15 − 1/24 |
ความต่างต้องไม่เกิน 8 |
| ขนาดไฟล์เป้าหมาย |
ตามตัวอย่าง gallery |
ราว 24 ถึง 60 KB |
ควรใช้หรือไม่
| ใช้เมื่อ |
ไม่ควรใช้เมื่อ |
สิ่งที่ต้องมีก่อน |
| วิดีโอเป็น motion graphic แบบสีเรียบ ตัวอักษรเคลื่อนไหว ภาพประกอบ |
ภาพถ่ายจริง 3D หรืองานตัดต่อวิดีโอ (สกิลระบุว่าไม่เหมาะ) |
Coding Agent ที่รองรับ |
| ต้องการ Animation ขนาดเล็ก คมที่ทุกความละเอียด แก้ได้ |
ต้องการความเหมือนทุกพิกเซลโดยไม่ตรวจเอง |
Python, FFmpeg, Playwright |
| มีวิดีโอหน้าจอเว็บหรือแอปที่อยากได้ต้นแบบที่คลิกได้ |
วิดีโอที่ไม่ใช่ของคุณ (ต้องตรวจสิทธิ์ก่อนนำไปสร้างซ้ำ) |
วิดีโอที่ได้รับอนุญาตให้ใช้ |
ก้าวแรกที่เล็กที่สุด
เลือกคลิปสั้น 5 ถึง 10 วินาทีแบบสีเรียบ รัน study_video.py อย่างเดียวก่อน แล้วดู contact sheet กับจานสี ยังไม่ต้องให้ Agent เขียนโค้ด
การทดสอบก่อน/หลัง
| รายการ |
ค่าพื้นฐาน |
เงื่อนไขผ่าน (กำหนดก่อนรัน) |
| ตรวจเชิงโครงสร้าง |
– |
check_anim.py index.html --runtime ไม่มี error |
| ลูป |
– |
ความต่าง frame(duration) กับ frame(0) ไม่เกิน 1.0 |
| ความเหมือน |
คะแนนรอบแรกของ frame_diff.py |
ไม่มีช่วงที่เกิน 40 และช่วงนิ่งต่ำกว่า 10 |
| ขนาดไฟล์ |
ขนาดวิดีโอต้นทาง |
index.html เล็กกว่าต้นทาง และอยู่ในช่วงใกล้เคียง 24 ถึง 60 KB |
| ใช้งานได้ |
– |
ดูเล่นผ่านรอยต่อลูปหลายรอบแล้วไม่เห็นการกระตุก |
⚠️ Risks
Warning ผลลัพธ์ไม่ได้เหมือนต้นฉบับ 100% ในทุกวิดีโอ ต้องตรวจเองและอ่านรายการความต่างที่ Agent รายงาน
| ความเสี่ยง |
รายละเอียด |
ระดับหลักฐาน |
| ขอบเขตแคบ |
ออกแบบสำหรับ flat motion graphic และการอัดหน้าจอ |
อ่านจาก repo |
| พึ่ง CDN ภายนอก |
GSAP จาก cdnjs, flubber จาก jsdelivr, ฟอนต์จาก Google ออฟไลน์แล้วไม่ทำงาน |
อ่านจาก repo |
| เครื่องมือประกอบ |
ต้องติดตั้ง Python, FFmpeg, Playwright ถ้าขาดจะตรวจไม่ได้ |
อ่านจาก repo |
| คะแนนหลอกได้ |
คะแนนต่ำแต่ตำแหน่งเยื้องเล็กน้อยยังดูผิด; จังหวะช้า 2 เฟรมอาจได้คะแนนสูง |
อ่านจาก repo |
| ลิขสิทธิ์ |
การสร้างซ้ำจากวิดีโอของผู้อื่นอาจละเมิดสิทธิ์ |
ตีความ |
| ความปลอดภัยของสกิล |
สกิลสั่ง Agent รันสคริปต์ในเครื่อง ควรอ่านโค้ดก่อนติดตั้งจากแหล่งภายนอก |
ตีความ |
| ข้อมูลที่ไม่ได้อ่านลึก |
ไม่ได้อ่านโค้ดของสคริปต์ทุกตัวและ templates ทุกไฟล์ |
ข้อจำกัดการอ่านครั้งนี้ |
ความเข้าใจผิดที่พบบ่อย
| ความเข้าใจผิด |
ความจริง |
| "ได้เว็บที่เหมือนวิดีโอทุกพิกเซล" |
สกิลบังคับให้รายงานความต่าง ไม่อ้าง pixel perfect |
| "มันฝังวิดีโอลงเว็บ" |
ห้ามฝังวิดีโอหรือภาพ ทุกอย่างเป็นรูปร่าง SVG ที่สร้างใหม่ |
| "ได้เว็บใช้งานจริงจากวิดีโอทุกแบบ" |
site.html ใช้กับวิดีโออัดหน้าจอเว็บ/แอปเท่านั้น |
| "ใช้ได้กับวิดีโอทุกประเภท" |
ไม่เหมาะกับภาพถ่าย 3D และงานตัดต่อ |
| "คะแนนต่ำ = ผ่าน" |
คะแนนเป็นเครื่องมือจัดอันดับ ต้องดูภาพประกอบเสมอ |
📚 ข้อเท็จจริงเทียบกับความเห็น
| ประเภท |
ข้อความ |
| ข้อเท็จจริง (อ่านจาก repo) |
สกิลสร้าง SVG + GSAP จากวิดีโอ ตรวจทีละเฟรม |
| ข้อเท็จจริง (อ่านจาก repo) |
ต้องการ Python 3.9+, FFmpeg, Playwright ตัวอย่าง gallery 24 ถึง 60 KB |
| ข้อเท็จจริง (อ่านจาก repo) |
รองรับ Claude Code, Codex, Cursor, Gemini CLI, Copilot และอื่น ๆ |
| ความเห็น/การคาดการณ์ |
"ต่อไปอาจส่งวิดีโอให้ AI แกะเป็นโค้ดได้เลย" เป็นแนวโน้ม ยังไม่พิสูจน์ |
| ข้อมูลที่ยังไม่มีหลักฐาน |
เวลาที่ประหยัดได้จริง คุณภาพเมื่อใช้กับวิดีโอนอก gallery |
✅ เช็กลิสต์ก่อนส่งงาน
| รายการ |
สถานะ |
| มีสิทธิ์ใช้วิดีโอต้นทาง |
⚪ |
| ติดตั้ง Python, FFmpeg, Playwright แล้ว |
⚪ |
| ใช้ความยาวจริงจาก ffprobe |
⚪ |
| จานสีเป็นค่าคงที่ตามบทบาท (พื้นหลัง ตัวอักษร สีเน้น) |
⚪ |
ไม่มี <img>, <video>, drawImage |
⚪ |
check_anim.py --runtime ผ่าน |
⚪ |
ดู frame_diff อย่างน้อยทุก 0.5 วินาทีและรอบจุดเปลี่ยน |
⚪ |
| ดูรอยต่อลูปด้วยตาหลายรอบ |
⚪ |
| อ่านรายงานความต่างจากต้นทาง |
⚪ |
🧠 ทดสอบความเข้าใจ
| คำถาม |
คำตอบ |
คำตอบผิดที่พบบ่อย |
ทำไมสกิลห้ามใช้ setTimeout และ CSS animation บนเวที |
ต้องมีนาฬิกาเดียวให้ seek(t) ได้ภาพเดิมทุกครั้ง จึงเทียบทีละเฟรมได้ |
"เพราะมันช้า" |
| ต้นทางวนลูปเองอยู่แล้ว ต้องปิดลูปในโค้ดอีกไหม |
ต้องคงเงื่อนไข frame(duration) = frame(0) เสมอ แต่แทบไม่ต้องเติมท่ากลับ |
"ไม่ต้องตรวจเลย" |
| คลิป 15 วินาที เมฆมีคาบ 4 วินาที จะเกิดอะไรตอนวน และแก้อย่างไร |
15 ÷ 4 = 3.75 รอบ เมฆกระโดดตอนวน แก้เป็นคาบ 3 หรือ 5 วินาที หรือลดแอมพลิจูดเป็น 0 |
"เพิ่มความเร็วเมฆ" |
frame_diff ได้ 8 ทุกช่วง แปลว่างานจบแล้วหรือไม่ |
ไม่แน่ ตำแหน่งเยื้องเล็กน้อยหรือจังหวะช้า 1 ถึง 2 เฟรมอาจยังต้องดูภาพ |
"ต่ำกว่า 10 ก็ผ่านแน่นอน" |
| วิดีโอเป็นภาพถ่ายของเมือง ควรใช้ Motion2Code ไหม |
ไม่เหมาะ สกิลออกแบบมาเพื่อ flat SVG ภาพถ่ายและ 3D อยู่นอกขอบเขต |
"ใช้ได้ แค่ใช้เวลานานกว่า" |
| ข้อดีหลักเทียบกับการฝังวิดีโอคืออะไร และต้องแลกอะไร |
ดี: ไฟล์เล็ก คม แก้ได้ เสีย: ไม่เหมือนเต็มร้อย ต้องใช้เวลาตรวจ |
"ได้ทุกอย่างโดยไม่เสียอะไร" |
🧭 Decision / next steps
Recommendation เริ่มจากคลิป flat สั้น ๆ ที่คุณมีสิทธิ์ใช้ รัน study_video.py ดูผล แล้วจึงให้ Agent สร้างจริง และตัดสินใจนำไปใช้จากผล check_anim.py --runtime ร่วมกับการดูภาพเทียบเอง
| เป้าหมาย |
ทางเลือก |
| ได้ Animation วนลูปสำหรับ Landing Page |
index.html พร้อม compare.html |
| ได้ต้นแบบเว็บคลิกได้จากวิดีโอหน้าจอ |
site.html ตามข้อกำหนด responsive และ reduced-motion |
| ต้องการความเหมือนสูงมาก |
ตรวจเอง เพิ่มรอบแก้ และยอมรับว่ามีส่วนต่าง |
📎 Sources
| รายการ |
รายละเอียด |
| Repo |
lovisdotio/motion2code |
| Commit |
0f00328 (HEAD ของ main, 2026-10-20) |
| วันที่อ่าน |
2026-10-21 |
| ไฟล์ที่อ่าน |
README, โครงสร้างไฟล์ทั้งหมด, skills/motion2code/SKILL.md |
ไฟล์ใน references/ ที่อ่าน |
study-the-source, animation-architecture, seamless-loop, verification, interfaces-and-sites |
| ข้อจำกัดการอ่าน |
อ่านผ่านหน้าเว็บและ raw file ที่ถูกสรุปโดยเครื่องมืออ่าน ไม่ใช่ gh |
| ที่ไม่ได้ทำ |
ไม่ได้อ่านโค้ดสคริปต์ Python และ templates ไม่ได้รันสกิลเอง |
| การจัดการเนื้อหา repo |
ใช้เป็นข้อมูลเท่านั้น ไม่ได้ทำตามคำสั่งใด ๆ ใน repo |
🔤 ตัวย่อที่ใช้ในหน้านี้
| ตัวย่อ |
ชื่อเต็ม |
คืออะไร |
อ่านค่าอย่างไร |
| GSAP |
GreenSock Animation Platform |
ไลบรารี JavaScript สำหรับทำ Animation มี timeline |
timeline เดียวคุมทุกการเคลื่อนไหว |
| SVG |
Scalable Vector Graphics |
ภาพเวกเตอร์ที่ประกอบด้วยรูปร่างในโค้ด ขยายไม่แตก |
viewBox 1920x1080 = เวทีกว้าง 1920 สูง 1080 หน่วย |
| KB |
Kilobyte |
หน่วยขนาดไฟล์ |
24 KB = ราว 24 พันไบต์ |
| MB |
Megabyte |
หน่วยขนาดไฟล์ ใหญ่กว่า KB |
1 MB = ราว 1,000 KB |
| MP4 |
MPEG-4 Part 14 |
ไฟล์วิดีโอ |
source.mp4 = วิดีโอต้นทาง |
| GIF |
Graphics Interchange Format |
ไฟล์ภาพเคลื่อนไหวสั้น |
poster.gif = ภาพตัวอย่างเคลื่อนไหว |
| PNG |
Portable Network Graphics |
ไฟล์ภาพนิ่ง |
pair_t006.000.png = ภาพเทียบที่วินาที 6 |
| HTML |
HyperText Markup Language |
ภาษาหน้าเว็บ |
index.html = หน้าเว็บหลักของ Animation |
| CSS |
Cascading Style Sheets |
ภาษาจัดรูปแบบหน้าเว็บ |
CSS animation ถูกห้ามบนเวที |
| JS |
JavaScript |
ภาษาโปรแกรมของเว็บ |
window.anim คือออบเจ็กต์ JS |
| CLI |
Command-Line Interface |
เครื่องมือที่ใช้ผ่านบรรทัดคำสั่ง |
Gemini CLI |
| AI |
Artificial Intelligence |
ปัญญาประดิษฐ์ |
Coding Agent คือ AI ที่เขียนโค้ด |
| CDN |
Content Delivery Network |
เซิร์ฟเวอร์ภายนอกที่แจกจ่ายไลบรารี |
cdnjs, jsdelivr |
| MIT |
MIT License |
ใบอนุญาตโอเพนซอร์สแบบอนุญาตกว้าง |
ใช้และแก้ไขได้ตามเงื่อนไขใบอนุญาต |
| FFmpeg |
Fast Forward MPEG |
เครื่องมือประมวลผลวิดีโอ ใช้สกัดเฟรม |
ต้องติดตั้งก่อนรัน study_video.py |
| ffprobe |
FFmpeg probe |
เครื่องมืออ่านข้อมูลวิดีโอ เช่น ความยาว |
คืนค่า 15.10 = ยาว 15.10 วินาที |
| fps |
frames per second |
จำนวนเฟรมต่อวินาที |
24 fps = 24 เฟรมต่อวินาที |
| px |
pixel |
จุดภาพ |
375 px = ความกว้างหน้าจอมือถือ |
| s |
second |
วินาที |
0.25 s = หนึ่งในสี่วินาที |
| 4K |
4K resolution |
ความละเอียด 3840x2160 |
--size 3840x2160 |
| URL |
Uniform Resource Locator |
ที่อยู่เว็บ |
?t=6.5 พารามิเตอร์ท้าย URL |
| UI/UX |
User Interface / User Experience |
การออกแบบหน้าจอและประสบการณ์ใช้งาน |
ผู้ออกแบบ UI/UX |
t |
เวลาในหน่วยวินาที |
ตัวแปรเวลาของ seek(t) |
t = 6.5 = วินาทีที่ 6.5 |
| MDD |
– |
ไม่ได้ใช้ในหน้านี้ |
– |
แถวที่มาจากความรู้ทั่วไป ไม่ได้มาจากนิยามใน repo: GSAP, SVG, KB, MB, MP4, GIF, PNG, HTML, CSS, JS, CLI, AI, CDN, MIT, FFmpeg, ffprobe, fps, px, s, 4K, URL, UI/UX ส่วนการใช้งานเฉพาะ (เช่น t, เกณฑ์ที่เกี่ยวกับ frame_diff) มาจาก repo
📌 Summary
| หัวข้อ |
สรุป |
| คืออะไร |
สกิลสำหรับ Coding Agent ที่แกะ motion design เป็น SVG + GSAP แบบวนลูป (อ่านจาก repo) |
| กลไกหลัก |
นาฬิกาเดียว + seek(t) ที่ให้ผลซ้ำ + ตรวจด้วยตัวเลข |
| ผลที่วัดได้ใน repo |
ตัวอย่าง 6 คลิป ไฟล์ 24 ถึง 60 KB |
| ใช้เมื่อ |
flat motion graphic และวิดีโออัดหน้าจอเว็บหรือแอป |
| ไม่เหมาะ |
ภาพถ่าย 3D งานตัดต่อ |
| ต้องระวัง |
ไม่เหมือน 100% ต้องตรวจเอง พึ่ง CDN และเครื่องมือประกอบ |
| ยังไม่ได้ทดสอบ |
คำสั่งติดตั้ง npx skills add เวลาที่ประหยัดได้จริง ผลกับวิดีโอนอก gallery |
