English 📰 בלוג
→ חזרה לבלוג
בלוג

קליפ אנימציה של 2 דקות בלי מודל וידאו: Claude ו-anime.js

סתיו אדם
19 באוקטובר 2026
בקצרה: אפשר לעשות קליפ מוזיקלי מונפש שלם בלי אף מודל וידאו. Claude כותב את האנימציה בקוד עם anime.js, ספריית אנימציה חינמית ב-JavaScript (רישיון MIT, כ-74 אלף כוכבים בגיטהאב, גרסה 4.5). הדמויות מצוירות ב-SVG, ההחלפות מסונכרנות לביטים של השיר, וכל פריים מרונדר לווידאו ב-60 פריימים לשנייה.

מה נוצר

יוצר לקח שלושה קליפים קצרים מפינטרסט בסגנון פלאט וקטורי (סקייטר, אופנוע עם סייד-קאר והולך עם בומבוקס) ונתן ל-Claude אתגר: לשלב אותם לקליפ אחד משוגע של שתי דקות. ההולך עולה על סקייטבורד, עובר לאופנוע, עושה סלטה בהילוך איטי, טס לשמיים, לחלל, למנהרת היפר ולסיבוב ניאון משוקף, מתרסק וחוזר להתחלה. לופ אינסופי.

הטריק של המוזיקה

Claude כתב ביט פשוט בקוד. הביט עלה ל-Suno כבסיס וחזר כשיר מעובד. אחר כך הקליפ זיהה את הביטים בשיר החדש, וכל החלפת רקע, קפיצה ומילה נופלות בדיוק על הביט.

מה anime.js עשתה, ומה נבנה סביבה

  • anime.js: מנוע התנועה. ציר זמן אחד עם כ-150 תנועות ועקומות תזמון שנותנות תחושה מצוירת: נחיתה מתנדנדת, אותיות שקופצות, סלטה חלקה.
  • SVG: ציור הדמויות.
  • זיהוי ביטים: מציאת זמני הביט בשיר.
  • רינדור פריים-פריים: מקדמים את ציר הזמן פריים אחד בכל פעם ושומרים לווידאו ב-60 פריימים לשנייה.

איך לעשות את זה בעצמכם

  1. בוחרים 2-3 קליפים לדוגמה באותו סגנון ומתארים אותם ל-Claude.
  2. מבקשים מ-Claude לצייר את הדמויות ב-SVG בעמוד HTML אחד ולהניע אותן בציר זמן אחד של anime.js.
  3. כותבים את הסיפור כרצף: הולך, קופץ על הסקייט, עובר לאופנוע, סלטה, טס, מתרסק, חוזר.
  4. מוזיקה: ביט קצר בקוד, ואחר כך גרסה מלאה ב-Suno.
  5. מזהים את הביטים בשיר הסופי ומעבירים את הזמנים לציר הזמן, כך שכל החלפה נופלת על ביט.
  6. מרנדרים פריים-פריים בדפדפן ברקע ומחברים לווידאו עם ffmpeg.

השורה התחתונה

anime.js מצוינת לתנועה, אבל הקסם קורה כשמחברים אותה לשאר הכלים. מודל וידאו נותן 8 שניות שאי אפשר לשלוט בהן. קוד נותן 2 דקות שבהן כל תנועה נמצאת בדיוק איפה שרוצים.

פרומפטים מוכנים לאנימציה עם Claude מחכים ב-Masterphub.