מושן בקוד: איך Claude Code הופך לסטודיו אנימציה, עם הדגמות שרצות כאן בעמוד
הסרטון של zero קיבל 978 אלף צפיות עם המשפט "כל הסרטון הזה הוא קוד". פירקנו את השיטה לחמש הדגמות חיות שאפשר לגרור ולשחק בהן, ובנינו עליה פרויקט שלם בעברית ובאנגלית.
סוכן הקוד לא מצייר וידאו: הוא כותב דף אינטרנט שמצייר כל פריים מתוך מספר אחד, הזמן.
פונקציה שמקבלת שנייה ומציירת בדיוק את התמונה שלה, בלי שעון ובלי זיכרון, ולכן כל פריים יוצא נקי.
קפיצים במקום תנועה ליניארית, מורף במקום פייד, משהו על כל ביט ו-8 תת-פריימים למושן בלר.
שלד של שישה בלוקים, כולל רשימה של מה אסור, שעובד בכל סוכן קוד ולא רק ב-Claude.
השיטה, קטלוג של 24 אלמנטים ומילון חי, בעברית ב-news.yuv.ai/motion ובאנגלית ב-yuv.ai/motion.
הכתבה ב־5 שניות · נבנה עם HyperFrames
מושן בקוד הוא שיטה שבה סוכן קוד כמו Claude Code כותב תוכנה שמציירת סרטון, פריים אחרי פריים, עבור כל מי שרוצה סרטון השקה ברמת סטודיו בלי After Effects ובלי מעצב מושן. בסוף ספטמבר יוצר בשם zero (@twoclipping ב-X) העלה סרטון ממשק עם המשפט "כל הסרטון הזה הוא קוד, אפס After Effects", וקיבל 978 אלף צפיות. מאז זה הנושא הכי חם בעולם של סוכני קוד.
ישבתי על זה שבועות, פירקתי את השיטה לפירורים ובניתי עליה פרויקט שלם בעברית: השיטה, קטלוג של 24 אלמנטים ומילון של כל המונחים. בכתבה הזאת אני מביא את הדברים הכי ברורים ומדליקים משם, וכל ההדגמות כאן הן לא סרטונים, הן קוד שרץ עכשיו בדפדפן שלנו. אפשר לעצור אותן, לגרור את הזמן ולשחק עם המספרים.
המצב: סרטון השקה הוא עדיין צוואר בקבוק
כולנו מכירים את הרגע הזה. המוצר מוכן, הדף מוכן, ועכשיו צריך "סרטון קצר להשקה". האפשרויות הרגילות הן לשכור מעצב מושן (motion designer, מי שמנפיש גרפיקה), ללמוד After Effects (התוכנה של Adobe שבה נעשים רוב סרטוני המושן בעולם), או להסתפק בתבנית שנראית כמו כל תבנית אחרת. כל אחת מהדרכים האלה עולה לנו כסף, זמן, או את הייחוד שלנו.
מודלים של וידאו כמו Veo או Sora הם גישה אחרת: הם מייצרים פיקסלים ישירות, ומצוינים לצילום מציאותי. אבל כשצריך טקסט מדויק, צבע מותג נכון וכפתור שנשאר אותו כפתור לאורך כל הסרט, ניחוש של פיקסלים מתקשה. מודל שפה לא מנחש פיקסלים, הוא כותב קוד, וקוד מדויק בדיוק בדברים האלה.
המכשול: מודל שפה לא "רואה" זמן
וידאו הוא בעצם ערימה של תמונות. סרטון של 60 פריימים לשנייה (fps, כמה תמונות מתחלפות בכל שנייה) הוא 60 תמונות סטילס לכל שנייה של צפייה, כמו ספר דפדוף. מודל שפה לא יודע לצייר תמונה אחת כזו, אבל הוא יודע לכתוב דף אינטרנט שמצייר אותה.
כאן מתחילה הבעיה האמיתית. אנימציה רגילה בדפדפן רצה לפי השעון של המחשב: אם המחשב נתקע לשבריר שנייה, האנימציה מדלגת קדימה. בצפייה חיה אף אחד לא שם לב, אבל כשמצלמים כל פריים לקובץ וידאו, כל דילוג כזה הופך לגמגום. צריך דרך לצלם את הסרט בלי שום שעון.
הטריק: הסרט הוא פונקציה של הזמן
בואו נפרק את זה. הלב של כל השיטה הוא פונקציה אחת שנקראת seek(t). פונקציה היא קטע קוד שמקבל קלט ומחזיר תוצאה, וכאן הקלט הוא מספר אחד: הזמן בשניות. נותנים לה "2.5", והיא מציירת בדיוק את הדף של שנייה 2.5, בלי לזכור מה היה קודם ובלי לחכות לשום שעון. תחשבו על זה כמו על ספר דפדוף שאפשר לפתוח בכל עמוד, ולקבל תמיד את אותו ציור.
ההדגמה הבאה היא סרט השקה קטן לאפליקציית כושר דמיונית בשם "קצב", אותה דוגמה שרצה לאורך כל הפרויקט. כולו פונקציה אחת. גררו את פס הזמן לכל נקודה ותראו מתחת את המספרים ש-seek מחשבת באותו רגע:
מעבדה חיה · seek(t)
סרט השקה שלם מפונקציה אחת
זה לא וידאו. זה קוד שרץ עכשיו בדפדפן שלנו. גררו את פס הזמן לכל נקודה, והפריים מופיע מיד, בלי לנגן את מה שלפניו.
שימו לב מה קורה כשגוררים: כל פריים מופיע מיד, בלי "לנגן" את כל הפריימים שלפניו. ככה בדיוק מצלמים את הסרט. כלי בשם Playwright (דפדפן שנשלט מקוד) קורא ל-seek עם 0, אחר כך עם 1/60, אחר כך עם 2/60, ומצלם כל פעם תמונה. אין שעון, ולכן אין גמגום: כל פריים יוצא נקי, גם אם המחשב איטי.
למה זה נראה יקר: קפיצים ומורף
סרט שנראה זול וסרט שנראה יקר יכולים להשתמש באותם צבעים ובאותו טקסט. ההבדל הוא בתנועה. תנועה ליניארית (באותה מהירות מההתחלה עד הסוף) נראית רובוטית, כי שום דבר בעולם האמיתי לא זז ככה. קפיץ מתמטי (spring) מאיץ, עובר טיפה את היעד וחוזר, כמו יד שמניחה כוס על שולחן.
הקטע המדליק הוא שהקפיץ כאן מחושב "בנוסחה סגורה": נוסחה אחת שנותנת את המיקום בכל רגע t, בלי לחשב צעד אחרי צעד. זה מה שמאפשר לו לעבוד עם seek. שחקו עם הקשיחות והריסון:
מעבדה חיה · קפיצים
ליניארי, Ease-out או קפיץ
שלושה כדורים, אותו יעד. שחקו עם הקשיחות והריסון של הקפיץ, ותראו איך המספרים הופכים לתחושה.
ליניארי
Ease-out
קפיץ
חריגה מעבר ליעד: 19.6%
t=0.50s · frame 30/144
הכלל השני של zero הוא שאף דבר לא נכנס בפייד (התעמעמות). דברים משנים צורה: כפתור גדל והופך למסך הבא. בעיניי זה הכלל הכי חשוב בכל השיטה, כי הוא ההבדל בין מצגת לסרט:
מעבדה חיה · מורף
למה פייד נראה זול
אותו מעבר, פעמיים. משמאל דבר אחד נעלם ואחר מופיע. מימין הכפתור עצמו גדל והופך למסך הבא.
פייד = מצגת
הזמינו
ההזמנה בדרך 🛵
מורף = סרט
הזמינוההזמנה בדרך 🛵
t=1.20s · frame 72/192
המוזיקה היא השעון
בסרט השקה טוב, משהו קורה על כל ביט של השיר. לכן הסדר הפוך ממה שהיינו מצפים: קודם מודדים את הקצב של השיר (BPM, ביטים לדקה) ואת הרגע שבו הוא מתפוצץ, מה שנקרא "הדרופ", ורק אז מתכננים מה קורה על כל ביט. בשיר של 120 BPM יש ביט כל חצי שנייה בדיוק, ולכן "הביט ה-9" הוא פשוט t=4.0.
מעבדה חיה · ביטים
המוזיקה היא השעון
כל מילה נוחתת בדיוק על ביט, והדרופ מפעיל זום. שנו את הקצב, הכל מתזמן את עצמו מחדש.
הוא
t=1.10s · frame 66/360
מושן בלר: למה 8 ולא 4
כשמצלמה אמיתית מצלמת משהו שזז מהר, הוא נמרח קצת. זה המושן בלר (motion blur, מריחת תנועה), ובלעדיו תנועה מהירה נראית מקוטעת. בקוד אין מצלמה, אז מזייפים את זה: לכל פריים מחשבים כמה רגעים קרובים מאוד, תת-פריימים, ומערבבים אותם לתמונה אחת. עם 4 תת-פריימים רואים "רוחות רפאים", עותקים נפרדים של הכדור. עם 8 זה נמרח חלק. עצרו את ההדגמה ובדקו בעצמכם:
מעבדה חיה · מושן בלר
4 תת-פריימים מול 8
כל פריים הוא ממוצע של כמה רגעים קרובים. עצרו על פריים ובחרו 4: רואים 'רוחות רפאים'. ב-8 זה נמרח חלק, כמו מצלמה אמיתית.
t=0.37s · frame 22/96
השורות כמו "קפיצים בנוסחה סגורה" ו-"8 תת-פריימים" בפרומפטים של zero הן לא קישוט, הן בדיוק הידע שסטודיו גובה עליו כסף. זה מה שהפרויקט המלא מפרק עד הסוף.
מפרומפט ל-MP4: ככה מבקשים
מסתבר שהחלק הכי חשוב הוא דווקא לא הקוד, אלא הפרומפט. כל הפרומפטים של zero בנויים על אותו שלד של שישה בלוקים: מה לבקש מאיתנו לפני שמתחילים, מה הטעם (כולל רשימה ארוכה של מה אסור), מה קורה על כל ביט, איך לבנות, אילו באגים כבר מוכרים, ושער אישור זול לפני העבודה היקרה. כשלא אומרים למודל בדיוק מה אנחנו רוצים, הוא נותן לנו את הממוצע של כל מה שראה, ובמושן הממוצע הוא בדיוק "התבנית".
הנה פרומפט פתיחה קצר בשלד הזה, להדבקה ב-Claude Code. הגרסה המלאה, עם הפרומפטים המקוריים של zero בתרגום מלא, נמצאת בעמוד השיטה:
פרומפט פתיחה בשלד של שישה בלוקים
Ask me for (before you build anything):
- the product name, 3 key screens, and one royalty-free song ~120 BPM with a clear drop.
Taste:
One continuous take, 16:9, 60fps. Nothing fades, blurs or cuts:
objects change shape into the next scene. Everything lands on a
closed-form spring. One camera move at a time.
Banned: crossfades, blur-ins, 3D flips, particles, glows,
holds longer than 1s, anything that looks like a template.
Beats:
Measure the BPM and the drop first. Something happens on every beat.
The biggest zoom hits exactly on the drop.
Build:
One HTML file with a pure seek(t) - every style is computed from t only.
No timers, no CSS animations, no state between frames.
Capture with Playwright at 60fps, 8 sub-frames per frame for motion blur,
assemble with ffmpeg. Place each SFX so its measured peak lands on its beat.
Known bugs to avoid:
fonts not loaded before the first frame; layout jumps between frames.
Gate:
Before rendering, show me a beat mapand4 key stills. Wait for my OK.
ומה קורה אחרי ההדבקה? Claude בונה קובץ HTML אחד עם seek(t), מצלם סטילס (תמונות קפואות מתוך הסרט), מסתכל עליהם בעצמו ומודד קפיצות של פריים בודד כמספרים, ורק אז מראה לנו. כלי בשם ffmpeg מחבר את התמונות לווידאו ומניח כל אפקט קולי כך שהשיא שלו נוחת בדיוק על הביט. אנחנו נותנים הערות כמו במאים, לא כמו מתכנתים: "החלק הזה איטי", "הפייד הזה נראה זול, תגרום לו לשנות צורה". לפי zero, בדרך כלל זה נגמר אחרי 2 עד 3 סבבים.
לא רק Claude: כל סוכן קוד
חשוב להגיד את זה: השיטה לא קשורה למודל אחד. כל מה שהיא צריכה זה סוכן קוד שיודע לכתוב HTML, להריץ פקודות במחשב ולהסתכל על תמונות. zero עבד עם Claude Opus 5.5 ב-Claude Code, ושם היא נבנתה ונבדקה, אבל העקרונות (seek, קפיצים, ביטים, תת-פריימים, בקרת איכות) עובדים בכל סוכן קוד שעונה על התנאים האלה. הידע נמצא בפרומפט ובשיטה, לא במודל, וזה בדיוק מה שהופך אותו לנייד.
הפרויקט המלא: כל הפרטים, בעברית ובאנגלית
מה שראינו כאן הוא רק השכבה העליונה. בפרויקט המלא יש שלושה עמודים שמחוברים זה לזה, עם מעבדות חיות שמחשבות הכל בזמן אמת:
בעיניי זו אחת הדוגמאות הכי טובות לשאלה מה מודל שפה באמת יודע לעשות. הוא לא "מייצר וידאו", הוא כותב תוכנה שמייצרת וידאו, וזה הבדל עצום. ברגע שהסרט הוא קוד, אפשר לתקן סצנה אחת בלי לשבור את השאר, להחליף מותג בשורה אחת, ולהבין כל רגע בו.
חשוב להיות הוגנים גם לגבי המגבלות. ה-"0 דולר" בכותרת של zero מתייחס לכלים ולא לעלות האמיתית: יש טוקנים (יחידות הטקסט שעליהן משלמים למודל), יש זמן רינדור (הזמן שלוקח למחשב להפוך את הקוד לקובץ וידאו), וסקירה עצמאית של João Queirós מעירה בדיוק על זה. מוזיקה ולוגואים דורשים רישיון, וגם כשקובץ הלוגו חינמי, הלוגו עצמו הוא סימן מסחרי. ודבר אחרון: הטעם עדיין שלנו. הפרומפטים של zero עובדים כי הם אומרים במדויק מה אסור, ואת הרשימה הזאת כתב אדם עם עין.
אז מה יהיה סרטון ההשקה הראשון שלנו שייכתב כקוד?
אהבתם את הכתבה? ספרו לי
אהבתם? שתפו
רוצים ללמוד את זה לעומק?
Vibe Coding & Claude Code
מסע פיתוח עם Claude Code - Full Stack, גיט וגיטהאב, MCP ו-Deployment. יוצאים עם מיומנות אמיתית של פיתוח עם AI.
