TutuCut

แปลง HTML เป็นวิดีโอ

เปลี่ยนโค้ดแอนิเมชันเว็บ, Canvas และ Three.js ให้เป็น MP4

เลือกเทมเพลตเพื่อเริ่มต้น

วางโค้ด / นำเข้า .html แอนิเมชันเว็บที่ทำด้วย Canvas, SVG, GSAP หรือ Three.js ใส่ได้หมด ให้ AI ทำให้ บอกเอฟเฟกต์ที่อยากได้ แล้ว AI จะเขียนและใส่ลงไทม์ไลน์ให้

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

วางแอนิเมชันเว็บที่ทำด้วย Canvas, SVG, GSAP หรือ Three.js ระบบจะวาดทีละเฟรม ซ้อนบนวิดีโอ แล้วส่งออกเป็น MP4 หรือ GIF ทำในเบราว์เซอร์ ฟรี ไม่มีลายน้ำ

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

เอดิเตอร์จะวาดมันทีละเฟรมตามเวลา ไม่ใช่การอัดหน้าจอ ณ เวลาเดียวกันจะได้เฟรมเดียวกันเสมอ สิ่งที่เห็นในพรีวิวจึงเป็นสิ่งที่ส่งออกจริง Math.random, Date และ requestAnimationFrame ในโค้ดจะถูกเปลี่ยนเป็นนาฬิกาที่แน่นอน ส่วน GSAP และ Three.js มีในตัวแล้ว ไม่ต้องใส่สคริปต์จากลิงก์ภายนอก

โค้ดรันในแซนด์บ็อกซ์ที่แยกไว้และเชื่อมต่ออินเทอร์เน็ตไม่ได้ รูปภาพและฟอนต์จากลิงก์ภายนอกจึงโหลดไม่ขึ้น ถ้าจำเป็นให้ฝังไว้ในโค้ดด้วยที่อยู่ data: พารามิเตอร์ที่ชิ้นงานประกาศไว้เอง (ข้อความ สี ตัวเลข) จะแสดงในแผงพารามิเตอร์ทางขวา แก้เสร็จก็ส่งออก MP4 หรือ GIF ได้ทันที

คำถามที่พบบ่อย

รองรับการเขียนแบบไหนบ้าง
สี่แบบที่ใช้กันบ่อยใช้ได้ทันที คือ กำหนด window.__seek(t) เพื่อวาดหนึ่งเฟรมตามเวลาที่เป็นวินาที, สร้างไทม์ไลน์ GSAP ที่หยุดไว้แล้วใส่ใน window.__timelines, จัดฉาก Three.js ตามเวลาใน __seek แล้วเรนเดอร์ หรือใช้ลูป requestAnimationFrame ธรรมดา ถ้าทั้งหน้ามีแคนวาสเพียงอันเดียวจะดึงภาพจากแคนวาสโดยตรง ไม่อย่างนั้นจะวาดทั้งหน้า (SVG, CSS, ข้อความ) เป็นหนึ่งเฟรม
ใช้ไลบรารีจาก CDN ได้ไหม
GSAP (รวมปลั๊กอิน CustomEase, MotionPath, MorphSVG, DrawSVG, SplitText) และ Three.js มีในตัวแล้ว ที่อยู่ CDN ในโค้ดที่ชี้ไปยังไลบรารีเหล่านี้จะถูกเปลี่ยนเป็นชุดในตัวโดยอัตโนมัติ ส่วนไลบรารีภายนอกอื่นโหลดไม่ได้ เพราะแซนด์บ็อกซ์เชื่อมต่ออินเทอร์เน็ตไม่ได้
วิดีโอที่ส่งออกมีเสียงไหม
ตัวโมชันเองไม่มีเสียง และเสียงที่เล่นจากโค้ดจะไม่ถูกอัดเข้าไป คุณเพิ่มเพลงหรือเสียงพากย์แยกบนไทม์ไลน์ แล้วส่งออกพร้อมกับโมชันได้
ถ้าโค้ดเกิดข้อผิดพลาดต้องทำอย่างไร
ด้านบนของพรีวิวและบนคลิปจะแจ้งว่ามีข้อผิดพลาด ข้อความแจ้งข้อผิดพลาดต้นฉบับจะแสดงในหน้าต่างโค้ด กด “ให้ AI แก้” แล้ว AI จะอ่านโค้ดของคุณ แก้ให้ แล้วดูผลลัพธ์อีกครั้ง ระหว่างที่ยังแก้ไม่เสร็จ พรีวิวจะค้างอยู่ที่เฟรมปกติล่าสุด และไม่กระทบคลิปอื่น
โค้ดจะถูกอัปโหลดไหม
ไม่ โค้ดถูกเก็บไว้พร้อมโปรเจกต์ในเบราว์เซอร์ของคุณ และเรนเดอร์กับส่งออกบนเครื่องของคุณเอง จะถูกอัปโหลดไปพร้อมโปรเจกต์ก็ต่อเมื่อคุณเลือกบันทึกโปรเจกต์ขึ้นคลาวด์เองเท่านั้น

เครื่องมือที่เกี่ยวข้อง