אנימציה מקוד: אותו סרטון ב-9 סגנונות, וסקיל שיעשה לכם אחד

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

הגעתם מהריל? הנה התכלס

הורדתם, התקנתם, ואתם אומרים לקלוד רעיון במשפט. הוא ישאל באיזה סגנון (עם המלצה), יכתוב את הסיפור כביטים, יבנה, יסתכל על התוצאה ויתקן, ויחזיר לכם MP4 עם סאונד.

1. מתקינים

   פותחים את ה-ZIP לתוך ~/.claude/skills/ (אם התיקייה לא קיימת - יוצרים). לרינדור צריך גם Google Chrome ו-ffmpeg, ואם חסר משהו - קלוד יגיד לכם בדיוק מה להתקין.

2. זורקים רעיון

   "תעשה לי אנימציה של חתול שמנסה לתפוס את הירח". משפט אחד מספיק.

3. בוחרים סגנון

   קלוד שואל: מכחול? פיקסל? גיר? חול? רקמה? או על גבי תמונה או סרטון שלכם? ממליץ על אחד לפי הרעיון.

4. מקבלים סרטון

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

איך זה עובד, בלי להיכנס לקוד

סרטון הוא בסך הכל הרבה תמונות ברצף. אז במקום לצלם אותן - כותבים פונקציה שיודעת לצייר את התמונה של כל רגע. תגידו לה "שנייה 1.85" - היא יודעת שהדמות בדיוק נחבטה ברצפה ושטוחה כמו פנקייק.

1. הסיפור כתוב כזמנים

   קובץ אחד מתאר את כל הסיפור: איפה הדמות בכל רגע, מתי היא קופצת, מתי נופל בלוק, מתי נכנס הצליל. אותו קובץ שימש את כל תשעת הסגנונות.

2. הסגנון הוא "איך מציירים"

   מכחול יודע לצייר משיכה עם שערות, גיר יודע לדלג על חספוס הלוח, רקמה יודעת לתפור X. הסיפור זהה - רק היד שמציירת מתחלפת.

3. הסאונד מסונתז

   WebAudio, שכבר בנוי בכל דפדפן, מנגן אקורדים ואפקטים לפי אותה טבלת זמנים. כל סגנון מחליף כלים: צ'יפטיון לפיקסל, קופסת נגינה לרקמה, חריקות גיר ללוח.

4. רינדור

   Chrome בלי מסך פותח את הדף, מצלם כל פריים, ו-ffmpeg תופר הכל ל-MP4 ומנרמל את העוצמה. 8 שניות לוקחות בין 5 ל-30 שניות רינדור.

תשעת הסגנונות, ולמה כל אחד עובד

לכל סגנון: מה גורם לו להיראות אמיתי (ולא כמו פילטר), ולמה הייתי משתמש בו.

1. משיכות מכחול

כל אלמנט - שמיים, דשא, דמות, אפילו הרקע של הכותרת - בנוי ממשיכות, ובכל משיכה עשרה "שערות" דקות בגוונים קצת שונים. בשמיים לבד יש כ-3,600 משיכות שזורמות במערבולות. מתאים ל: סיפורים רגשיים, ציטוטים, תודה, כל מה שהוא "לב".

2. קולאז' עיתון

הדמות גזורה מ"תמונה מודפסת" ברסטר, העיניים מודבקות ומתגלגלות, ובכל נפילה נדבקת מילה: "פלאף!". העיתון נקרא "יומן נפילות", והמחיר שלו: עוד ניסיון אחד. מתאים ל: חדשות, דעה, הומור, הכרזות.

3. פיקסל ארט

מסך אמיתי ברזולוציה של 180 על 320 שמוגדל בלי החלקה, 16 צבעים בלבד, וספרייטים שצוירו פיקסל-פיקסל. לבב נעלם בכל נפילה ומתמלא בתפיסה. מתאים ל: טק, גיימינג, "עלייה בשלב", נוסטלגיה.

4. ריזוגרף

שלוש דיו, כל אחת על "גלופה" נפרדת, שמודפסות אחת על השנייה - ורוד על כחול נותן סגול אמיתי. בכל חבטה השכבות זזות מהמקום וחוזרות. מתאים ל: קהל של מעצבים, פוסטרים, אסתטיקה רגועה.

5. גיר על לוח

הקו "מדלג" על חספוס הלוח, הפרטים הכהים נמחקים במקום להצטייר, ועל הלוח נשארו רמזים לשיעור הקודם ("שיעורי בית"). מתאים ל: הסברים, הדרכות, "הנה השיעור".

6. סקיצת עיפרון

מבחן עיפרון של אנימטור: קווי בנייה כחולים מתחת לכל דמות, הצללה בקווים, מחיקות, ומספר פריים שרץ בפינה. מתאים ל: תהליך, מאחורי הקלעים, "איך נולד רעיון".

7. מדבקות נייר צבעוניות

נייר קרוע עם שוליים לבנים של מדבקה, צל רך, סלוטייפ, וקווי צבעי שעווה שרועדים קלות. מתאים ל: מותגים חמודים, ילדים, מסרים חיוביים.

8. חול על שולחן אור

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

9. רקמת תפר צלב

כל "פיקסל" הוא X משני חוטים מפותלים, עם קווי מתאר תפורים, קשרים צרפתיים ונקודות, וחוט זהב לכוכב. הסצנה נתפרת לבד בפתיחה, עם מחט. מתאים ל: משפחה, ברכות ומתנות, מותגי קראפט, חגים.

אנימציה על גבי תמונה או סרטון שלכם

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

1. תמונה

   התמונה נטענת לתוך הקנבס, והציורים נכתבים עליה קו אחרי קו, בעט מכחול שחור וגואש לבן, כך שהם נשארים קריאים גם על רקע עמוס.

2. סרטון

   האנימציה מרונדרת על רקע שקוף, ו-ffmpeg מלביש אותה על הסרטון המקורי. קלוד מחלץ קודם תמונות מהסרטון ומסתכל עליהן, מסמן איפה הראש והידיים בכל רגע, ומתמלל את הדיבור - כדי שכל ציור ינחת על המילה ועל התנועה הנכונות, ולא על הפנים שלכם.

3. סאונד

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

בסקיל זו פשוט עוד אפשרות בתפריט: כשקלוד שואל באיזה סגנון, עונים "על הסרטון שלי" ונותנים לו את הקובץ.