ก็อปแอนิเมชันเว็บให้ต่างไม่เกิน 2% ได้อย่างไร? เกณฑ์ที่เปลี่ยนวิธีสั่ง AI

โดย Nokka (นก-กา) | 3 พ.ย. 2026

เวลาสั่งให้ AI ทำแอนิเมชันตามเว็บต้นแบบ มันมักทำรอบเดียวแล้วบอกว่าเสร็จ เพราะมันมองไม่เห็นการเคลื่อนไหว และไม่รู้ว่าตัวเองทำได้ใกล้แค่ไหน [1]

สกิลชื่อ reanimate แก้ปัญหานี้ด้วยวิธีที่ตรงไปตรงมา คืออัดวิดีโอต้นฉบับ สร้างใหม่ในโค้ดของเรา อัดตัวที่สร้างด้วยวิธีเดียวกัน แล้วเทียบกันเป็นตัวเลข

จุดที่น่าสนใจไม่ใช่ตัวโมเดล แต่เป็นกลไกที่ทำให้งานวัดผลได้

reanimate คืออะไร

reanimate เป็นสกิลสำหรับ Claude Code เผยแพร่บน GitHub ภายใต้สัญญาอนุญาต MIT [1]

สกิลใน Claude Code คือไฟล์ SKILL.md ที่บรรจุขั้นตอนการทำงานไว้ เนื้อในจะถูกโหลดเมื่อถูกเรียกใช้ จึงไม่กินบริบทตลอดเวลา [4]

รีโปสร้างเมื่อ 29 ตุลาคม 2026 และมีดาวบน GitHub ราว 1,036 ดวง ณ วันที่ผมเขียนบทความนี้ [1]

ตัวสกิลรองรับงานจากเว็บไซต์ที่เปิดอยู่จริง ไฟล์วิดีโอ ไฟล์ gif ภาพอัดหน้าจอ และไฟล์ Lottie [1]

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

ห้าขั้นตอนที่ทำให้มันต่าง

ขั้นแรกคือการอัดต้นฉบับ สกิลจะเปิดหน้าเว็บในเบราว์เซอร์แบบไม่มีหน้าจอ กำหนดขนาดวิวพอร์ตและอัตราเฟรมให้คงที่ แล้วเก็บทั้งวิดีโอ ภาพเฟรมพร้อมหมายเลข ตำแหน่งของ element ที่เลือกในทุกเฟรม และรายการอนิเมชันที่หน้าเว็บประกาศไว้ [1]

สำหรับงานที่วาดด้วย canvas หรือ WebGL มันจะดักจับคำสั่งที่ส่งไปยังการ์ดจอ ทั้งเชเดอร์ ค่าคงที่ที่ส่งเข้าไป และลำดับการวาด รวมถึงอ่าน scene graph ของ three.js, Pixi, PlayCanvas, Babylon และ OGL [1]

มีรายละเอียดหนึ่งที่ผมชอบมาก คือโหมดนาฬิกาจำลอง ซึ่งเดินเวลาแบบเฟรมต่อเฟรมและกำหนดค่าเริ่มต้นของตัวสุ่มไว้ ทำให้ภาพที่อัดสองครั้งออกมาเหมือนกันทุกไบต์ แม้การ์ดจอจะช้าไม่เท่ากัน [1]

ขั้นที่สองคือทำสเปกเป็นตารางว่าองค์ประกอบไหนเริ่มเมื่อไร นานเท่าไร เปลี่ยนจากค่าอะไรเป็นอะไร ใช้ easing แบบไหน และเหลื่อมกันกี่มิลลิวินาที [1]

ขั้นที่สามคือเขียนโค้ดด้วยเครื่องมือที่โปรเจกต์ใช้อยู่แล้ว เช่น CSS, Framer Motion, GSAP หรือ three.js [1]

ขั้นที่สี่คืออัดตัวที่เพิ่งสร้างด้วยวิธีเดียวกับต้นฉบับ แล้วเทียบเวลา เทียบ easing และเทียบพิกเซล พร้อมทำภาพเทียบข้างกัน [1]

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

สามระดับความเหมือน

ผู้พัฒนาแบ่งระดับไว้สามขั้น และกำหนดเกณฑ์วัดไว้ชัดเจน [1]

• โคลนการเคลื่อนไหว (ค่าเริ่มต้น) ต้องตรงทั้งจุดที่กระตุ้น ลำดับ การเหลื่อมเวลา เวลาคลาดไม่เกิน 80 มิลลิวินาที ตระกูลของ easing และระยะทาง
• เหมือนเป๊ะ ต้องตรงทั้งหมดข้างต้น บวกฟอนต์ ขนาด สี ระยะห่าง และแอสเซ็ต โดยค่าเฉลี่ยพิกเซลที่ต่างกันไม่เกิน 2%
• โคลนแล้วเติมของเรา ส่วนที่โคลนต้องได้ตามระดับข้างต้น ส่วนที่เราเพิ่มต้องแยกออกมาชัดเจน

การกำหนดเกณฑ์เป็นตัวเลขคือหัวใจ เพราะทำให้เอเจนต์รู้ว่าตัวเองยังไม่เสร็จ

ทำไมวิธีนี้ถึงได้ผล

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

ถ้าเกณฑ์คือ "ดูคล้ายแล้ว" เอเจนต์จะหยุดที่รอบแรกเพราะมันพอใจกับสิ่งที่เห็นในโค้ด

แต่ถ้าเกณฑ์คือระดับเข้มสุด ที่กำหนดเวลาคลาดไม่เกิน 80 มิลลิวินาที และพิกเซลต่างไม่เกิน 2% มันจะมีสัญญาณชัดว่ายังไม่ผ่าน และมีตัวเลขบอกว่าควรแก้อะไรก่อน

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

ตัวเลขที่รีโปอ้าง

รีโปยกตัวอย่างงานโคลนจากเว็บจริงไว้หลายชิ้น พร้อมตัวเลขผลวัด [1] และมีสื่อสายเทคอย่าง AlphaSignal หยิบตัวเลข 0.03% จากรีโปนี้ไปพาดหัวข่าว [2]

• ทูลบาร์ของ Vercel ตรงกัน 417 จาก 417 เฟรม
• ภาพ hero แบบ WebGL ของ Vercel ตรงกัน 785 จาก 803 เฟรม ที่เหลือต่างกันไม่เกินหนึ่งระดับ
• คลื่นทะเล 262,144 จุดของ Vercel ต่างกัน 0 พิกเซลตลอด 12 วินาที ทั้งโหมดสว่างและมืด
• การ์ด Visa ของ Stripe ต่างกัน 0.03% ของพิกเซลตอนหยุดนิ่ง และการเอียงคลาดไม่เกิน 0.4 พิกเซล
• ลูกบาศก์ของ Resend หมุนตรงทุกครั้งตลอด 25 วินาที และพิกเซลต่างกัน 0.11%
• ดาวของ React Bits ต่างกัน 0 พิกเซลตอนหยุดนิ่ง และ 0.014% ตอนคลิก

ตัวเลขทั้งหมดนี้เป็นผลวัดที่ผู้พัฒนาเก็บเอง ยังไม่มีงานทดสอบอิสระจากบุคคลที่สามมาทวนซ้ำ และจากการค้นหาของผม ณ วันที่เขียน ยังไม่พบงานแบบนั้น [1]

ผมจึงอ่านตัวเลขพวกนี้เป็น "หลักฐานว่าระบบวัดผลทำงาน" มากกว่า "หลักฐานว่ามันโคลนได้เป๊ะทุกครั้ง"

ข้อจำกัดที่รีโปบอกเอง

• หน้าที่ต้องล็อกอินก่อนเข้า รวมถึง YouTube และ Loom อัดตรงไม่ได้ ต้องอัดหน้าจอเองแล้วส่งไฟล์วิดีโอให้แทน
• สปริงเชิงฟิสิกส์ถูกประมาณจากค่าที่เกินเป้าและเวลาที่เข้าที่ ไม่ได้อ่านจากซอร์สโค้ดต้นฉบับ
• ตัว worker ถูกกำหนดค่าเริ่มต้นและดักจับได้ แต่เวลาภายในยังเดินตามเวลาจริง
• canvas ที่อยู่ใน iframe ต้องใช้ URL ของ iframe นั้นเอง
• ถ้าตัวสร้างโคลนเลียนแบบตัวสุ่มของต้นฉบับไม่ได้ ระบบจะเทียบภาพแบบเบลอเพื่อดูความหนาแน่น สี และการเคลื่อนไหว แทนการเทียบทีละจุด
• โหมดใช้การ์ดจอจริงมีบน macOS ผ่าน Metal ส่วน Linux ผ่าน Vulkan ยังไม่ผ่านการทดสอบ ค่าเริ่มต้นจึงเป็น SwiftShader ที่ช้ากว่าแต่ให้พิกเซลเดียวกันทุกเครื่อง

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

เรื่องลิขสิทธิ์ที่ต้องคิดก่อนใช้

ตัวรีโปเป็น MIT แต่สัญญานั้นครอบแค่โค้ดที่ผู้เขียนรีโปเขียนเอง ไม่ได้ให้สิทธิ์ในฟอนต์ รูป หรือโค้ดที่สกิลไปดึงมาจากเว็บอื่น [1]

รีโปเขียนเตือนไว้ชัดว่า มันโคลนสิ่งที่คุณชี้ไป ฟอนต์ รูป และโค้ดจากเว็บอื่นยังเป็นของเจ้าของ และคุณต้องแน่ใจว่ามีสิทธิ์ใช้สิ่งที่ก๊อปมา [1]

ส่วนตัวอย่างในรีโปที่โคลนชิ้นส่วนจาก Vercel, Stripe, Clerk, Resend และเว็บอื่น ก็ระบุว่าเป็นการศึกษาเทคนิค ไม่ได้เกี่ยวข้องหรือได้รับการรับรองจากเจ้าของแบรนด์เหล่านั้น [1]

ถ้าจะเอาไปใช้ในงานจริง คำถามที่ไม่ใช่เรื่องเทคนิคคือ คุณกำลังเรียนรู้วิธีทำ หรือกำลังคัดลอกงานของคนอื่นไปใช้เชิงพาณิชย์

มีของคล้ายกันอยู่ก่อนแล้ว

ก่อนหน้านี้มีรีโปชื่อ animation-reverse-engineering ที่ทำสกิลสำหรับ Reverse Engineering แอนิเมชันเช่นกัน สร้างเมื่อ 29 กรกฎาคม 2026 [3]

รีโปนั้นมีดาวราว 36 ดวง และไม่มีไฟล์ LICENSE จึงทำให้ GitHub ไม่ตรวจพบสัญญาอนุญาต แม้ README จะลงท้ายด้วยคำว่า MIT [3]

ความต่างที่จับต้องได้มีสองข้อ ข้อแรก ตัวใหม่ให้คะแนนเป็นตัวเลขอัตโนมัติทุกครั้ง ทั้งเปอร์เซ็นต์พิกเซลที่ต่างและเวลาที่คลาดเป็นมิลลิวินาที ข้อสอง รีโปก่อนหน้ามีขั้นตรวจโดยเทียบภาพข้างกัน และเขียนไว้เองว่าการวัดส่วนต่างอัตโนมัติกับการให้คะแนนพิกเซลยังเป็นงานที่ต้องทำต่อ [1][3]

ถ้าจะลองใช้ ต้องเตรียมอะไร

ผมสรุปสิ่งที่ต้องรู้ก่อนติดตั้งไว้เป็นรายการสั้น ๆ

1. ติดตั้งด้วย npx skills add NiazMorshed2007/reanimate -g
2. ต้องมี Bun 1.1 ขึ้นไป [1][5] และใช้บน macOS หรือ Linux (Windows ยังไม่ทดสอบ)
3. รอบแรกจะดาวน์โหลด ffmpeg แบบ static และ Chromium ของ Playwright ประมาณ 250 MB
4. ไม่ต้องใช้ API key
5. ถ้าเป็นหน้าต้องล็อกอินหรือวิดีโอจากแพลตฟอร์มปิด ให้อัดหน้าจอเองแล้วส่งไฟล์เข้าไป
6. ก่อนใช้กับงานลูกค้า ตรวจสิทธิ์ของฟอนต์ รูป และโค้ดต้นทางก่อน

สกิลนี้ถูกทดสอบกับ Claude Code เป็นหลัก เอเจนต์อื่นที่อ่านไฟล์ SKILL.md ได้ก็ติดตั้งได้ แต่ยังไม่ผ่านการทดสอบ [1]

สิ่งที่ยังไม่รู้

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

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

ถ้าคุณทำงานกับ AI แล้วผลงานยังไม่นิ่ง ลองถามตัวเองก่อนว่าปัญหาอยู่ที่คำสั่ง หรืออยู่ที่คุณยังไม่มีไม้บรรทัดสำหรับวัดว่ามันเสร็จจริงหรือยัง

แหล่งอ้างอิง

[1] GitHub · NiazMorshed2007/reanimate (สร้าง 29 ต.ค. 2026 · MIT · เข้าถึง 3 พ.ย. 2026) · https://github.com/NiazMorshed2007/reanimate
[2] AlphaSignal · Reanimate Gives Claude a Ruler to Clone Web Animations Within 0.03% Pixel Error (พ.ย. 2026) · https://alphasignal.ai/news/reanimate-gives-claude-a-ruler-to-clone-web-animations-within-0-03-pixel-error
[3] GitHub · scriptscrypt/animation-reverse-engineering (สร้าง 29 ก.ค. 2026) · https://github.com/scriptscrypt/animation-reverse-engineering
[4] Anthropic · Extend Claude with skills (เอกสาร Claude Code · เข้าถึง 3 พ.ย. 2026) · https://code.claude.com/docs/en/skills
[5] Bun · เว็บไซต์ทางการของ Bun (2026) · https://bun.sh

บทความนี้เขียนโดย AI (deepseek-v4.1-flash · ผู้ให้บริการโมเดล: ollama-cloud) ผ่าน Hermes Agent ภายใต้การควบคุมและตรวจสอบคุณภาพโดยมนุษย์ - Nokka (นก-กา)