מושן דיזיין בלי After Effects: הפרומפט שהסתובב ב-X, בגרסה ישראלית

הסרטון הזה הוא קוד. כל פריים, כל קליק וכל צליל, כולל המוזיקה. אין בו After Effects, אין Figma ואין אף מודל וידאו. יש קובץ HTML אחד שיודע להגיד איך נראה כל רגע, ו-Chrome שמצלם אותו 3,840 פעם.

מאיפה זה התחיל

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

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

מה Opus 5.5 יודע לעשות במושן דיזיין

מה שראיתי אותו עושה בסרטון הזה, מפרומפט אחד ובפחות משעה:

1. חושב כמו מושן דיזיינר

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

2. כותב פיזיקה, לא מעברים

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

3. מביים אינטראקציה אמיתית

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

4. מסנכרן למוזיקה

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

5. מבין ממשק בעברית

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

6. בודק את עצמו

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

מה שיניתי לקהל ישראלי

כל מצב של הממשק קיבל בדיחה קטנה אחת, מהסוג שכל ישראלי מזהה בחצי שנייה:

• כפתור ← "יאללה". וי ← "סבבה".
• Dynamic Island ← אמא מתקשרת, פעם שלישית. דוחים, נשלח "אחזור אלייך", ושני הווים הופכים לכחולים. היא ראתה.
• נגן מוזיקה ← "פקק באיילון", פלייליסט לדרך הביתה. על העטיפה: 20, המספר של כביש איילון.
• סליידר ווליום שנמתח מעבר למקסימום ← "מצב: חתונה באולם", 161%, והבס במוזיקה באמת עולה.
• טוגל ← השתקת קבוצת הורים ג׳2, שמקפיצה עוד שלוש הודעות בדיוק לפני הלחיצה. "שקט. סוף סוף."
• טאבים וגרף ← מחיר דירת 4 חדרים בירושלים. הקו רק עולה, וה-tooltip אומר "המון כסף".
• ‎⌘K וטוסט ← מקלידים "תור", בוחרים "תור למשרד הפנים". נקבע למרץ 2027, והשנה מתגלגלת ל-2029. "הכי קרוב שיש."

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

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

1. הכל פונקציה של הזמן

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

2. ספרינגים ולא easing

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

3. קצה מוביל וקצה נגרר

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

4. רינדור

   Chrome בלי מסך מצלם 4 תמונות לכל פריים, ו-ffmpeg ממצע אותן ל-motion blur ב-60fps. 3,840 צילומי מסך לקחו 58 שניות.

הפרומפט המלא, בגרסה הישראלית

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

<קלט>
תשאל אותי קודם:
1. 8 עד 12 מצבי UI שהצורה תהפוך אליהם (כפתור, לואדר, נגן, סליידר, טוגל, טאבים, גרף, ‎⌘K, טוסט). לכל מצב: טקסט קצר בעברית, עד 4 מילים, ורצוי בדיחה ישראלית קטנה.
2. שחור-לבן, או צבע הדגשה אחד.
3. מוזיקה: שיר royalty-free בסביבות 120 BPM (למשל מ-Mixkit), או שתסנתז אחד בקוד.
</קלט>

<כיוון>
מושן UI ברמת Dribbble. צורה אחת, בלי קאטים: כל מצב הוא אותו אלמנט שמשנה גודל, רדיוס וצבע, והתוכן שבתוכו מתחלף עם בלור קצר. סמן עכבר מניע כל שינוי עם קליקים וגרירות אמיתיים. רקע אפור-חם בהיר, רכיבים בשחור-לבן, פונט UI אחד שתומך בעברית (Heebo). ספרינגים בכל מקום, לכל היותר overshoot זעיר. המצלמה עושה זום כך שכל מצב ממלא את הפריים. הפריים האחרון הוא הפריים הראשון, כדי שזה ילופ.
אסור: easing קופצני, פיצוצי חלקיקים, glow, גרדיאנטים על רכיבי UI, אייקונים בעוביי קו שונים, זמן מת, כל דבר שנראה כמו תבנית.
</כיוון>

<עברית>
כל הטקסט בעברית, dir="rtl". פס התקדמות וסליידר מתמלאים מימין. טוגל דלוק = הכפתור בצד שמאל. אייקון Play לא מתהפך. ציר הזמן בגרף נשאר משמאל לימין. מספרים ושעות בתוך עטיפת LTR. כל בדיחה מקבלת לפחות שנייה שלמה על המסך.
</עברית>

<מבנה>
120 BPM, 8 תיבות, משהו קורה על כל ביט.
כפתור "יאללה" ← לואדר ← "סבבה" ← Dynamic Island (אמא מתקשרת, פעם שלישית) ← נגן עם מורף play/pause ← גרירה על פס ההתקדמות ← הוא הופך לסליידר ווליום שנמתח כשגוררים מעבר למקסימום ← טוגל שמתהפך על הביט ← הכפתור של הטוגל הופך לאינדיקטור טאבים נוזלי ← הטאבים נפתחים לגרף שמצייר את עצמו, עם tooltip ב-hover ← מתכווץ ל-‎⌘K ← מקלידים כדי לסנן ← אנטר ← טוסט ← חזרה לכפתור.
</מבנה>

<בנייה>
1. קובץ HTML אחד, ריבוע 1440x1440. כל סגנון מחושב מהזמן בתוך seek(t): בלי CSS transitions, בלי טיימרים, בלי state שעובר בין פריימים.
2. ספרינגים הם step response בנוסחה סגורה. ערך שמשנה יעד הרבה פעמים הוא סכום של ספרינג אחד לכל שינוי, כך שהוא נשאר פונקציה טהורה של הזמן.
3. לשני הקצוות של אינדיקטור הטאבים יש ספרינגים שונים, כך שהקצה המוביל נמתח לפני הנגרר. אותו טריק לכפתור של הטוגל.
4. גרירות הן direct manipulation: כל עוד העכבר לחוץ, הערך מחושב מהמיקום שלו. בשחרור הוא חוזר בספרינג מאיפה שהוא.
5. נתח את המוזיקה עם numpy לגריד הביטים ותתחיל על downbeat. שים כל סאונד UI לפי הפיק הנמדד שלו.
6. רנדר עם Playwright או Puppeteer: 4 תת-פריימים לכל פריים, ממוצעים עם ffmpeg tmix בשביל motion blur ב-60fps.
7. לפני הרינדור המלא, רנדר פריים אחד לכל ביט, גם בדיוק על הביט וגם באמצע. תקן כל דבר שיוצא מהגריד, צפוף או לא קריא.
</בנייה>

<מלכודות>
אף פעם לא will-change על משהו שהמצלמה עושה לו scale, אחרת הטקסט יוצא מטושטש. טקסט שמתחלף בתוך קונטיינר שמשנה צורה צריך תזמון כניסה ויציאה משלו, אחרת הוא חופף. הפריים האחרון זהה לראשון, כולל מיקום ומהירות הסמן, אחרת הלופ מקרטע.
</מלכודות>

<התחלה>
תשאל אותי על הקלט, ואז תראה לי טבלה של המצבים על גריד הביטים לפני שאתה כותב שורת קוד אחת.
</התחלה>

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

להתאים את זה למוצר או לאפליקציה שלכם

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

1. פותחים את Claude Code בתוך התיקייה של המוצר

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

2. מדביקים את הפרומפט ומוסיפים בסוף את הבלוק "המוצר שלי"

   הבלוק (למטה) מחליף את הבדיחות ב-flow האמיתי של המוצר.

3. בוחרים 8 רגעים

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

4. מאשרים טבלה וגיליון

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

5. מרנדרים לכל פורמט

   אותו קוד, קנבס אחר: 9:16 לריל, 1:1 לפיד, 16:9 לדף הנחיתה.

<המוצר שלי>
הבלוק הזה גובר על <מבנה> ועל הבדיחות. אתה בתוך הריפו של המוצר שלי, ולפני שאתה מציע משהו:
1. תקרא את הגדרות העיצוב (tailwind.config, משתני CSS, קובץ theme או design tokens) ותחלץ צבעים, פונט, רדיוסים וצללים. הסרטון משתמש רק בהם, בלי להמציא.
2. תמצא את הקומפוננטות האמיתיות: כפתור ראשי, כרטיס, שדה קלט, טוסט, ניווט. אם זו אפליקציית ווב, תשתמש בהן עצמן. אם לא, תשחזר אותן מהקוד.
3. תיקח טקסטים אמיתיים מהמוצר: כותרות, כפתורים, הודעות הצלחה.
4. תציע 8 רגעים מה-flow המרכזי, מהלחיצה הראשונה של משתמש חדש ועד רגע ה"וואו", ותראה לי אותם כטבלה על גריד הביטים.
5. פורמט: [1:1 לפיד / 9:16 לריל / 16:9 לדף הנחיתה]. סיום: [לופ / הלוגו ומשפט אחד].
</המוצר שלי>

איפה זה עובד הכי טוב:

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

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