text-to-lottie เป็นชุดความรู้เฉพาะทางหรือสกิลโอเพนซอร์สที่สั่งให้ AI เขียนไฟล์แอนิเมชันขึ้นมาให้ทั้งไฟล์ โดยไม่เรนเดอร์ออกมาเป็นวิดีโอสักเฟรมเดียว ตัวที่ลงมือเขียนคือ Claude Code หรือ Codex สอง coding agent ที่รับคำสั่งเป็นภาษาคนแล้วสร้างและแก้ไฟล์ในเครื่องให้ได้จริง

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

Lottie ไม่ใช่คลิป แล้วภาพขยับได้ยังไง

พอได้ยินว่า AI ทำภาพเคลื่อนไหว ภาพในหัวมักเป็นโมเดลสร้างวิดีโออย่าง Sora หรือ Veo โมเดลเหล่านี้เรนเดอร์คลิปออกมาเป็นพิกเซลทีละเฟรมจนครบความยาว แต่ text-to-lottie ทำงานคนละแบบ สิ่งที่เขียนลงในไฟล์คือ keyframe หรือจุดที่กำหนดว่าในแต่ละช่วงเวลา รูปทรงต้องอยู่ตรงไหน สีอะไร และขนาดเท่าไร ส่วนการเคลื่อนไหวระหว่างจุดเหล่านั้น ไลบรารีหรือชุดโค้ดสำเร็จรูปในเครื่องผู้ใช้จะคำนวณให้เอง

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

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

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

ติดตั้ง text-to-lottie บรรทัดเดียว แต่ต้องเปิดเทอร์มินัล

ขั้นแรกคือติดตั้งสกิลด้วยคำสั่งเดียว

npx skills add diffusionstudio/lottie

จากนั้นสั่ง agent ตามปกติ โดยระบุให้ชัดว่าให้ใช้ text-to-lottie ทำงานนี้ เช่นบอกว่าอยากได้แอนิเมชันจากไฟล์ SVG หรือไฟล์ภาพเวกเตอร์ที่มีอยู่แล้ว ให้เส้นค่อยๆ วาดไปตามแนวธรรมชาติของภาพ ไล่เฉดสีโทนพรีเมียม ใช้จังหวะแบบค่อยเร่งค่อยผ่อน พื้นหลังโปร่งใส และคงรูปทรงเดิมของ SVG ไว้

ตรงนี้คือจุดที่ต้องชั่งใจก่อนว่าคุ้มไหม สำหรับคนที่ยังไม่เคยใช้ coding agent ต้นทุนจริงของงานชิ้นแรกคือเวลาทำความคุ้นเคยกับ agent ไม่ใช่ตัวแอนิเมชัน ส่วนคนที่ใช้ agent อยู่แล้ว การเพิ่มสกิลหนึ่งตัวก็ทำได้ด้วยคำสั่งบรรทัดเดียวจริงๆ เหมือนสกิลทำสไลด์ที่ติดตั้งด้วยวิธีเดียวกัน

ดูแอนิเมชันแบบสดๆ ระหว่าง agent แก้

พอสั่งครั้งแรก agent จะจัดพื้นที่ทำงานพร้อมตัวเล่นขึ้นมาให้เอง แอนิเมชันแต่ละชิ้นนับเป็นหนึ่งฉากหรือ scene ภายในโปรเจกต์ ไฟล์จริงจะอยู่ที่ public/projects/<project>/<scene>/lottie.json เป็นไฟล์ข้อความธรรมดาที่เปิดอ่านด้วยโปรแกรมแก้ไขข้อความได้ ตัวเล่นจะโหลดไฟล์นั้นให้อัตโนมัติ แล้วอัปเดตตามทันทีทุกครั้งที่ agent แก้

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

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

พรอมต์แบบไหนถึงได้ของที่ใช้งานได้

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

• แนบของจริงเป็นข้อมูลอ้างอิง แนบไฟล์ SVG ตัวจริง ข้อมูลจริง หรือภาพหน้าจอไปด้วย เอกสารระบุว่าผลลัพธ์ดีขึ้นชัดเจนเมื่อมีไฟล์หรือข้อมูลจริงให้อ้างอิง แทนคำบรรยายลอยๆ
• ใช้ศัพท์สายทำภาพเคลื่อนไหว บอกจังหวะด้วยคำอย่าง ease-in ease-out หรือ ease-in-out ที่หมายถึงออกตัวช้า เร่งกลางทาง แล้วค่อยๆ ผ่อนก่อนหยุด
• คิดแบบคนถือกล้อง งานภาพเคลื่อนไหวระดับมืออาชีพใช้การเคลื่อนกล้องเยอะ พรอมต์จึงควรบอกด้วยว่าให้ดันเข้าไปหาวัตถุ แพนไปด้านข้าง หรือซูม
• ระบุ FPS กับจำนวนเฟรม ถ้างานต้องยาวเป๊ะตามที่กำหนด ให้บอกจำนวนเฟรมต่อวินาทีและจำนวนเฟรมทั้งหมดไปในพรอมต์เลย ไม่ต้องรอไปแก้ทีหลัง

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

ไฟล์ Lottie ไฟล์เดียวใช้ได้ทั้งเว็บและแอป

ของที่ได้คือไฟล์ Lottie ธรรมดา แพลตฟอร์มไหนมีไลบรารีที่อ่านไฟล์นี้ได้ ก็เอาไปใช้ต่อได้ทันที

• เว็บ โหลดผ่านไลบรารี lottie-web แล้วสั่งให้เล่นในกล่องที่กำหนดไว้
• iOS ใช้ไลบรารี Lottie ฝั่ง Swift สั่งให้เล่นวนไปเรื่อยๆ ได้ในไม่กี่บรรทัด
• Android ใช้ Lottie ฝั่ง Kotlin วางตัวแสดงผลไว้ในหน้าจอแล้วสั่งเล่น
• Flutter เพิ่มแพ็กเกจ lottie แล้วชี้ไปที่ไฟล์ในโฟลเดอร์ assets
• React Native ใช้ React Native Skia โมดูล Skottie ที่เล่นได้ทั้งบน iOS Android และเว็บ แถมเปลี่ยนสี ฟอนต์ หรือรูปประกอบตอนแอปทำงานอยู่ได้
• After Effects นำไฟล์เข้าไปเก็บรายละเอียดต่อได้ ถ้าอยากให้คนออกแบบนำไปปรับอีกรอบก่อนส่งจริง

ฝั่งเว็บเริ่มได้เร็ว ใส่สคริปต์ของไลบรารี วางกล่องเปล่าไว้หนึ่งกล่อง แล้วชี้ไปที่ไฟล์

<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>
<div id="anim"></div>
<script>
lottie.loadAnimation({
  container: document.getElementById("anim"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/animations/my-animation.json"
});
</script>

ไม่มีตัวเล่นวิดีโอ ไม่มีไฟล์คลิปให้โฮสต์ มีแค่ไฟล์ข้อความหนึ่งไฟล์กับชุดโค้ดที่วาดมันขึ้นมา

สิ่งที่ต้องรู้ก่อนเอาไปใช้งานจริง

ตัวโปรเจกต์เองยังใหม่อยู่ หน้าโปรเจกต์บน GitHub ระบุแท็กเวอร์ชันไว้แค่ตัวเดียวคือ Text-to-Lottie v1.0.0 มีคนร่วมเขียน 5 คน และมี commit หรือจุดบันทึกการแก้โค้ดสะสม 93 ครั้ง ตัวเลขชุดนี้สวนทางกับดาว 5.3k ดวง ซึ่งเป็นยอดคนกดเก็บโปรเจกต์ไว้ดู และการคัดลอกโปรเจกต์ไปต่อยอดอีก 286 ครั้ง คนให้ความสนใจไปไกลกว่าที่ตัวโปรเจกต์จะพัฒนาตามทัน และเวอร์ชันแรกย่อมยังมีจุดที่ยังไม่เนี้ยบ

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

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

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

ที่มา: โปรเจกต์ text-to-lottie บน GitHub