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

<קלט>
תשאל אותי על שלושה דברים:
- 8 עד 14 מצבי ממשק שהצורה תהפוך אליהם, למשל כפתור, סימן טעינה, נגן, סליידר, מתג (toggle), טאבים, גרף, חלון חיפוש והודעה קופצת.
- שחור לבן או צבע הדגשה אחד.
- שיר חופשי לשימוש, בערך 120 BPM (למשל מ-Mixkit, חינם לשימוש מסחרי).
</קלט>

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

<מבנה>
7 תיבות, משהו קורה על כל ביט. הקצב הוא מה שנמדד בשיר, והאורך של הסרטון נגזר ממנו.
כפתור "שליחה" ← סימן טעינה ← וי ← dynamic island ← נגן מוזיקה שבו הפליי הופך לפאוז ← גוררים את פס ההתקדמות ← הוא הופך לסליידר ווליום שנמתח כשגוררים מעבר למקסימום ← מתג (toggle) מתהפך על הביט ← העיגול של המתג הופך לסימון של הטאב הפעיל, שנמתח כמו נוזל ← הטאבים נפתחים לגרף שמצייר את עצמו, עם חלונית מידע בריחוף ← הכל מתכווץ לחלון חיפוש ⌘K ← מקלידים בעברית כדי לסנן ← אנטר ← הודעה קופצת ← חזרה לכפתור.
</מבנה>

<בנייה>
1. קובץ HTML אחד, ריבועי, 1440 על 1440. כל עיצוב מחושב מהזמן בתוך פונקציה seek(t): בלי CSS transitions, בלי טיימרים, בלי מצב שנשמר בין פריימים.
2. קפיצים בנוסחה סגורה (step response). ערך שמשנה יעד הרבה פעמים הוא סכום של קפיץ אחד לכל שינוי, כך שהוא נשאר פונקציה של הזמן בלבד.
3. שני הקצוות של סימון הטאב הפעיל רוכבים על קפיצים שונים, כך שהקצה המוביל נמתח לפני הקצה הנגרר. אותו טריק לעיגול של המתג.
4. גרירה היא מניפולציה ישירה: כל עוד הסמן לחוץ, הערך מחושב ממיקום הסמן. בשחרור הוא קופץ חזרה בקפיץ מהמקום שבו הוא נמצא.
5. תנתח את השיר עם numpy כדי למצוא את גריד הביטים, ותתחיל על הביט הראשון של תיבה. כל צליל ממשק יושב על הפיק שנמדד, ועל ביט בלי פיק יש שינוי ויזואלי שקט. את צלילי הממשק (קליקים והקלדות רכות) תסנתז עם numpy.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל ביט. תתקן כל דבר שיוצא מהגריד, צפוף או קשה לקריאה.
</בנייה>

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

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

<קלט>
תשאל אותי על ארבעה דברים:
- המסר: 3 עד 6 מילים או משפט קצר.
- האורך: 8 עד 15 שניות.
- הגודל: 1080 על 1920 לרילס, או 1080 על 1080.
- פלטה של 3 עד 4 צבעים חזקים. ברירת המחדל היא אדום, כחול חשמלי, צהוב וקרם, על שחור.
</קלט>

<כיוון>
שואוריל (showreel) של סטודיו לאנימציה.
טיפוגרפיה ענקית שממלאת את הפריים, והרקע מתחלף בחיתוך חד בין צבעים מלאים, על הביט. מילה אחת או שתיים על המסך בכל רגע.
כל מילה נכנסת בדרך אחרת:
- נחבטת מגודל גדול;
- מתרחבת מצפופה לרחבה;
- מחליקה מהצד עם motion blur;
- מופיעה בתוך מסגרת בחירה כמו בתוכנת עיצוב, עם 8 ידיות ותווית מידות קטנה.
פונט עברי כבד אחד עם ציר רוחב (Noto Sans Hebrew במשקל 900). לתוויות טכניות קטנות, פונט מונו באנגלית.
המצלמה לא עוצרת לרגע: דחיפה קלה, סיבוב של מעלה או שתיים, ורעידה קצרה בכל מכה.
אסור: פונט עברי עתיק או סריף, מילים חלולות בקו מתאר, מקף בין שתי מילים, גרדיאנטים רכים, פריים קפוא יותר משליש שנייה, ויותר משלושה הבזקי מסך מלא בשנייה.
</כיוון>

<מבנה>
גריד של חצי שנייה, וחיתוך על כל גריד. בלי מוזיקה, או על הביט אם נתתי שיר.
פס אור דק חוצה מסך שחור ונפתח למסך בצבע מלא ← המילה הראשונה נחבטת ← חיתוך לרקע בצבע הבא, והמילה הבאה מתרחבת לרוחב המסך ← מסגרת הבחירה נצמדת למילה, מסתובבת וננעלת ← המילים מתחברות לשורה אחת עם נקודה אדומה ← סיום עם כל המסר במרכז, על רקע קרם.
אם יש יותר גרידים ממילים, כל מילה מקבלת גריד שני: חיתוך לרקע בצבע אחר והגרסה הצפופה שלה.
בחיבור לשורה ובפריים הסיום מותר שכל המילים יופיעו יחד. בפריים הסיום יש אירוע קטן בכל גריד (הנקודה פועמת, קו נסגר), והמצלמה ממשיכה לדחוף.
מסגרת הבחירה מסתובבת כמה מעלות, חוזרת ל-0 וננעלת עם תווית LOCKED.
</מבנה>

<בנייה>
1. קובץ HTML אחד בגודל שבחרתי. כל עיצוב מחושב מהזמן בתוך פונקציה seek(t): בלי CSS transitions, בלי טיימרים, בלי מצב שנשמר בין פריימים.
2. קפיצים בנוסחה סגורה (step response). ערך שמשנה יעד כמה פעמים הוא סכום של קפיץ אחד לכל שינוי.
3. כל מילה מקבלת גודל מחושב: מודדים את הטקסט ומגדילים אותו עד שהוא ממלא רוחב של בערך 840 פיקסלים, האזור הבטוח פחות מרווח לתנועת המצלמה. בערימה של כמה שורות, כל השורות באותו גודל.
4. חבטה מגיעה לכל היותר לפי 1.25, עם קפיץ שעובר קצת מתחת ל-1 וחוזר. אף מילה לא נוגעת בשכנה שלה בשום פריים.
5. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
6. לפני הרינדור המלא תרנדר פריים אחד לכל גריד, ותתקן כל דבר צפוף, חתוך או לא קריא.
</בנייה>

<מלכודות>
אסור לחשוף מילה עברית מאחורי קו חיתוך (mask), כי החלק העליון של האותיות נראה כמו קווים ומקפים. כל מילה נכנסת שלמה, בתנועה קצרה למעלה, וה-opacity שלה עולה מ-0 ל-1.
הרחבה מצפוף לרחב עובדת רק עם פונט משתנה שיש לו ציר רוחב, שנטען מקומית.
ברילס הטקסט נשאר בתוך האזור הבטוח:
- 250 פיקסלים מלמעלה;
- 350 מלמטה;
- 80 מכל צד;
- 140 מימין בחצי התחתון, בגלל הכפתורים של אינסטגרם.
הפונטים נטענים מקבצים מקומיים, ומחכים ל-document.fonts.load לפני הפריים הראשון. אחרת כרום עובר בשקט לפונט אחר.
ציר הרוחב של Noto Sans Hebrew משנה רק בערך 16 אחוז. כדי שההרחבה תורגש, תפתח יחד איתו גם את ריווח האותיות. תוריד את הפונט עם הציר (wdth,wght@62.5..100,100..900) ותוודא שהציר באמת בקובץ.
מילה שמחליקה מהצד יכולה להתחיל מחוץ לפריים. בתנועה מהירה מאוד tmix מראה עותקים, אז מוסיפים blur כיווני קטן לפי המהירות.
הנקודה האדומה אף פעם לא על רקע אדום או כחול.
תריץ בדיקת פיקסלים על כל הפריימים: אף מילה לא נוגעת בשכנה שלה ולא יוצאת מהאזור הבטוח.
</מלכודות>

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

<קלט>
תשאל אותי על ארבעה דברים:
- מילה אחת או שם מותג שיתפרקו.
- צבעים. ברירת המחדל היא לבן, אדום וכחול על שחור.
- אורך: 6 עד 12 שניות.
- גודל.
</קלט>

<כיוון>
רגע וואו של חלקיקים.
המילה מופיעה חדה, מחזיקה, ואז מתפרקת לאלפי חלקיקים שנדגמו מהפיקסלים שלה.
בפתיחה ובסיום המילה היא טקסט מלא אמיתי, והחלקיקים יוצאים ממנו ונבלעים בו באותן נקודות בדיוק.
החלקיקים מתכנסים לכדור, הכדור מסתחרר לגלקסיה ספירלית, ובסוף הכל נשאב חזרה ומרכיב את המילה מחדש, חדה ומלאה.
יש עומק: חלקיקים קרובים גדולים ובהירים, רחוקים קטנים ועמומים.
רקע כהה עם וינייטה עדינה. פונט עברי כבד ונקי (Noto Sans Hebrew במשקל 900).
אסור: נצנוצים אקראיים שאין עליהם שליטה, חלקיקים שמהבהבים בכל פריים, מילה חלולה, וטקסט לא קריא בפתיחה ובסיום.
</כיוון>

<מבנה>
הזמנים כתובים ל-9 שניות כולל ההחזקה בסוף. לאורך אחר, כל הזמנים מוכפלים באותו יחס.
- 0 עד 1.5 שניות: המילה נחבטת (לכל היותר מ-115 אחוז מהגודל) ומחזיקה.
- עד 2.5: רעד, והתפרקות שמתחילה מהקצה הימני, בכיוון הקריאה.
- עד 4: כדור חלקיקים שמסתובב בשלושה ממדים.
- עד 6: גלקסיה ספירלית עם זרועות אדומות וכחולות.
- עד 7.5: האצה, חצי שנייה של מהירות אור מלאה, ויציאה. המצלמה צוללת לתוך הגלקסיה: כל חלקיק שומר את המיקום שלו על המסך ברגע הצלילה, מקבל עומק אקראי וטס קדימה.
- עד 9: הכל נשאב ומרכיב את המילה מחדש.
- חצי שנייה של החזקה בסוף.
</מבנה>

<בנייה>
1. קובץ HTML אחד עם canvas. כל פריים מחושב מהזמן בתוך פונקציה seek(t): בלי טיימרים ובלי מצב שנשמר בין פריימים.
2. בזמן הבנייה מציירים את המילה על canvas נסתר, ודוגמים ממנו 4000 עד 8000 נקודות. כל חלקיק מקבל כמה מיקומי בית: במילה, בכדור, בגלקסיה.
3. המיקום של כל חלקיק הוא נוסחה של הזמן שעוברת בין מיקומי הבית, עם עיכוב קטן לכל חלקיק מפונקציית hash של המספר שלו. בלי סימולציה שנצברת מפריים לפריים.
ההתאמה בין הצורות לפי מיקום: מילה לכדור לפי המיקום על המסך, כדור לגלקסיה לפי הזווית. בשאיבה חזרה, כל חלקיק מקבל את נקודת המילה שנמצאת לפניו בכיוון הסיבוב, כך שכולם מסתחררים לאותו כיוון ולא חוצים זה את זה.
בגלקסיה הזרועות נגררות אחרי כיוון הסיבוב, והחלק הפנימי מסתובב מהר יותר.
4. הקרנת פרספקטיבה פשוטה לכדור ולגלקסיה. זווית הסיבוב היא פונקציה של הזמן.
5. זוהר נוצר מערבוב חיבורי (globalCompositeOperation = 'lighter'), לא מפילטר CSS. חלקיק מהיר מצויר כפס קצר בין המיקום שלו ב-t למיקום שלו רגע לפני, אחרת רואים 4 נקודות נפרדות.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל שלב, ותתקן כל דבר מבולגן או לא קריא.
</בנייה>

<מלכודות>
Math.random רק בזמן הבנייה ועם seed קבוע, אחרת כל פריים מרונדר אחרת.
את הפונט טוענים מקובץ מקומי ומחכים ל-document.fonts.load לפני שדוגמים את המילה, אחרת דוגמים פונט ברירת מחדל.
ב-canvas צריך direction = 'rtl' כדי שהעברית תצא נכון.
</מלכודות>

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

<קלט>
תשאל אותי על ארבעה דברים:
- כותרת קצרה, 2 עד 5 מילים, שתופיע מעל העולם.
- צבעים. ברירת המחדל היא קוביות באפור בהיר, עם כמה קוביות אדומות וכחולות.
- אורך: 6 עד 12 שניות.
- גודל.
</קלט>

<כיוון>
עולם של קוביות.
שדה של בערך 16 על 22 עמודים מרובעים, שעולים ויורדים בגל שנע לאורך השדה.
מצלמה בזווית, שמסתובבת לאט סביב השדה.
כדור אדום קופץ מעמוד לעמוד, עם מתיחה והתכווצות (squash and stretch) ועם צל על הקוביות.
תאורה פשוטה: פאה עליונה בהירה, שתי פאות צד בגוונים כהים יותר, וקוביות רחוקות שדוהות לתוך הרקע.
הכותרת בעברית גדולה וקריאה מעל השדה, עם הצללה רכה מאחוריה (Noto Sans Hebrew במשקל 900). השדה יושב בשני השלישים התחתונים של הפריים.
רקע אפור לבן בהדרגה עדינה, והערפל דוהה בדיוק לצבע הרקע.
עדשה ארוכה: שדה ראייה אנכי של 30 עד 35 מעלות, כדי שהזווית לא תתעוות.
אסור: טקסטורות ריאליסטיות, השתקפויות, הכדור או קוביות שעוברים מעל הכותרת, ומקף בין שתי מילים.
</כיוון>

<מבנה>
- מבט מלמעלה.
- המצלמה צוללת לזווית של 35 מעלות.
- הגל עובר לאורך השדה.
- הכדור עומד על עמוד מהפריים הראשון, וקופץ 3 או 4 פעמים.
- הכותרת נכנסת מילה אחרי מילה. המילה החשובה נכנסת אחרונה, גדולה יותר ובאדום של הכדור, בנחיתה האחרונה, ובאותו רגע כל השדה קופץ יחד.
- המצלמה מתרחקת לאט עד הסוף.
</מבנה>

<בנייה>
1. קובץ HTML אחד עם canvas. כל פריים מחושב מהזמן בתוך פונקציה seek(t): בלי טיימרים ובלי מצב שנשמר בין פריימים. אפשר גם three.js, ובתנאי שכל פריים מרונדר ידנית מתוך seek(t).
2. הקרנת פרספקטיבה עם מיון בכל פריים לפי המרחק האופקי מהמצלמה, מהרחוק לקרוב. הכדור נכנס כפריט לאותה רשימה.
3. הגובה של כל עמוד הוא נוסחה של הזמן ושל המיקום שלו בשדה (גל סינוס נע).
4. הכדור נע בקשתות (פרבולות) סגורות בין נקודות הנחיתה, ונקודת הנחיתה מחושבת מגובה העמוד ברגע הנחיתה. מתיחה לאורך כיוון התנועה לפי המהירות, והתכווצות בנחיתה לפי מהירות הפגיעה, כשתחתית הכדור נשארת על הפאה. הצל רך ונופל ישר למטה.
5. כל תנועת מצלמה (הצלילה וההתרחקות) היא קפיץ בנוסחה סגורה.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל שלב, ותתקן כל דבר שמסתיר את הכותרת.
</בנייה>

<מלכודות>
בלי מיון לפי עומק, הפאות מצטיירות בסדר הלא נכון ונוצר בלגן.
המסלול של הכדור צריך לעקוף את אזור הכותרת.
כל מילה עברית נכנסת שלמה, בתנועה קצרה למעלה עם opacity שעולה, ולא מאחורי קו חיתוך (mask).
הפונטים נטענים מקבצים מקומיים, ומחכים ל-document.fonts.load לפני הפריים הראשון. אחרת כרום עובר בשקט לפונט אחר.
תמדוד בכל פריים שהנקודה הגבוהה של השדה, כולל שיא הגל והקפיצה, נשארת מתחת לתחתית הכותרת.
</מלכודות>

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

<קלט>
תשאל אותי על ארבעה דברים:
- רשימה של 6 עד 12 מילים, למשל עקרונות, שירותים או תגיות.
- כותרת של 2 עד 5 מילים.
- צבעים. ברירת המחדל היא לבן על שחור, עם נקודה אדומה.
- אורך וגודל.
</קלט>

<כיוון>
הטקסט הוא הצורה.
שורות טקסט רצות לרוחב המסך, כל שורה בכיוון הפוך מזו שמעליה.
אחר כך הן מתכופפות ונסגרות לטבעות שמסתובבות אחת בתוך השנייה, בכיוונים מנוגדים, עם נקודה אדומה במרכז.
יש 5 עד 6 טבעות, המילים הארוכות בחיצוניות, וכולן בתוך רוחב הפריים.
הכותרת גדולה וקריאה, בשתי שורות, והנקודה האדומה ביניהן. מאחוריה עיגול כהה (#141414) שמכסה את שתי הטבעות הפנימיות.
בסוף הטבעות נשאבות בספירלה אל המרכז, ורק הנקודה נשארת.
פונט עברי כבד ונקי (Noto Sans Hebrew), עם נקודה מפרידה בין המילים.
אסור: טבעות בצבע ובגודל של הכותרת עד שהיא נבלעת בהן, סדר אותיות הפוך או אותיות במראה, ומקף בין שתי מילים. טקסט שנראה הפוך בחצי התחתון של טבעת מסתובבת זה תקין.
</כיוון>

<מבנה>
- 0 עד 1.5 שניות: שורות רצות בכיוונים מתחלפים.
- עד 2.5: השורות מתכופפות לקשתות ונסגרות לטבעות.
- עד 5: הטבעות מסתובבות והכותרת נכנסת.
- עד 6: ספירלה פנימה.
- עד 7: הנקודה פועמת ונשארת.
תתאים את הזמנים לאורך שבחרתי.
השורות בולמות ונעצרות על גבול של מילה לפני שהן מתכופפות. כולן מעל הנקודה ומתכופפות לאותו כיוון, הפנימית ראשונה, והסיבוב מתחיל רק כשהטבעת סגורה.
בספירלה כל טבעת נפתחת לסליל ומתכווצת לתוך המקום שהטבעת הפנימית פינתה. הקצוות נחתכים רק בין מילים.
</מבנה>

<בנייה>
1. קובץ HTML אחד עם SVG. כל עיצוב מחושב מהזמן בתוך פונקציה seek(t): בלי טיימרים ובלי מצב שנשמר בין פריימים.
2. כל שורה יושבת על textPath. המסלול עצמו מחושב מחדש בכל פריים, מקו ישר ועד מעגל סגור, לפי פרמטר עקמומיות שעובר מ-0 ל-1.
3. הסיבוב של כל טבעת נעשה עם startOffset, כפונקציה של הזמן.
4. הטבעות ב-opacity של 0.4, כדי שהכותרת תבלוט.
5. קפיצים בנוסחה סגורה לכל כניסה.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל שלב, ותתקן כל דבר שלא קריא.
</בנייה>

<מלכודות>
עם direction="rtl" על textPath, הטקסט מסתיים ב-startOffset ונמתח אחורה. לכן הטקסט באורך פעמיים ההיקף, ו-startOffset נע בין ההיקף לפעמיים ההיקף.
בכל טבעת מספר שלם של חזרות על הרשימה ממלא את ההיקף בדיוק. תכייל את גודל הפונט של כל טבעת עד שזה מתאים, אחרת יש חור או חפיפה בתפר.
המפריד · נמצא ב-subset הלטיני של הפונט, אז טוענים גם אותו.
תנועה מהירה: לא יותר מ-8 פיקסלים בין פריים ביניים אחד לבא, אחרת רואים עותקים.
טבעות פנימיות קטנות יותר מקבלות פונט קטן יותר, אחרת האותיות נדחסות.
הפונטים נטענים מקבצים מקומיים, ומחכים ל-document.fonts.load לפני הפריים הראשון. אחרת כרום עובר בשקט לפונט אחר.
</מלכודות>

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

<קלט>
תשאל אותי על ארבעה דברים:
- הדמות: תיאור קצר, למשל "קובייה כתומה עם רגליים קטנות".
- מה היא עושה: 2 עד 4 פעולות.
- משפט אחד שהיא אומרת בעברית.
- אורך (6 עד 12 שניות) וגודל.
</קלט>

<כיוון>
ציור יד על נייר.
דמות חמודה ופשוטה בסגנון דודל (doodle), בקווי עיפרון שחורים ולא מושלמים, מילוי בצבע אחד עם טקסטורה של עיפרון, על רקע נייר בהיר עם גרעיניות עדינה.
הקווים רועדים קצת 10 פעמים בשנייה, כמו באנימציה מצוירת ביד.
התנועה בנויה על עקרונות אנימציה קלאסיים:
- תנועת הכנה לפני קפיצה (anticipation);
- מתיחה והתכווצות בנחיתה (squash and stretch);
- ידיים ואוזניים שממשיכות לזוז רגע אחרי שהגוף עוצר (follow through).
בועת דיבור בפונט עברי שנראה כמו כתב יד: Amatic SC במשקל 700, בגודל 160 לפחות, גם ב-subset העברי וגם בלטיני, בשביל סימני הפיסוק. קווי תנועה קטנים ליד כל פעולה.
אם אין לדמות ידיים, תוסיף ידיים קטנות לנפנוף. אם אין אוזניים, חלק רך אחד (קצה, זנב, שיער) מפגר אחרי התנועה.
אסור: קווים וקטוריים מושלמים, גרדיאנטים, ומקף בין שתי מילים. צל מותר רק כקשקוש עיפרון מתחת לרגליים.
</כיוון>

<מבנה>
הדמות נכנסת בהליכה מימין ← עוצרת בצד אחד של הפריים ומסתכלת למצלמה ← תנועת הכנה וקפיצה ← נחיתה עם התכווצות ← בועת הדיבור נכתבת מילה אחרי מילה ← תגובה (מצמוץ ונפנוף) ← יציאה בהליכה משמאל. הפריים הראשון והאחרון הם נייר ריק, כך שהלופ חלק.
הבועה למעלה, בצד השני של הדמות, והמשפט המלא נשאר על המסך לפחות 1.5 שניות.
</מבנה>

<בנייה>
1. קובץ HTML אחד עם SVG. כל עיצוב מחושב מהזמן בתוך פונקציה seek(t): בלי טיימרים ובלי מצב שנשמר בין פריימים.
2. הדמות בנויה מחלקים נפרדים, כל אחד עם נקודת ציר: גוף, עיניים, ידיים, רגליים. כל חלק מסתובב סביב הציר שלו.
3. הרעד של הקווים: הזזה קטנה של נקודות הנתיב, מפונקציית hash של מספר הצעד (Math.floor(t * 10), מודולו מספר הצעדים בלופ). הרעד מדלג בצעדים, התנועה עצמה חלקה.
4. טקסטורת העיפרון והנייר עם פילטר SVG (feTurbulence) שמוגדר פעם אחת ולא משתנה, ויושב על הקבוצה שזזה עם הדמות.
התנועה שממשיכה בידיים ובאוזניים היא קפיץ שמופעל על עקומת התנועה, מחושב מחדש בכל פריים.
5. קפיצים בנוסחה סגורה לכל תנועה. הקפיצה היא קשת סגורה עם מתיחה לפי המהירות.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל פעולה, ותתקן כל איבר שמתנתק מהגוף או דמות שיוצאת מהפריים.
</בנייה>

<מלכודות>
הרעד צריך לדלג בצעדים של עשירית שנייה, לא להשתנות בכל פריים, אחרת זה נראה כמו רעש.
איברים שמסתובבים סביב ציר לא נכון מתנתקים מהגוף.
בועת הדיבור מימין לשמאל, והזנב שלה מצביע אל הפה.
הפונטים נטענים מקבצים מקומיים, ומחכים ל-document.fonts.load לפני הפריים הראשון. אחרת כרום עובר בשקט לפונט אחר.
המעבר מתנועת ההכנה למתיחה נמשך לפחות 8 פריימים, אחרת tmix מראה עותקים.
כל מילה בבועה ב-<text> נפרד עם direction="rtl", ממוקמת ידנית מימין לשמאל.
</מלכודות>

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

<קלט>
תשאל אותי על ארבעה דברים:
- התהליך שצריך להסביר, למשל איך זרע נובט או איך הודעה עוברת משרת לטלפון.
- 3 עד 5 שלבים.
- פלטה: רקע נייר, צבע קו כהה אחד ו-5 צבעי מילוי, עם גוון בהיר וגוון כהה מכל צבע. ברירת המחדל היא צבעים חמים של ספר ילדים.
- אורך (10 עד 20 שניות) וגודל.
</קלט>

<כיוון>
איור שטוח שמסביר, כמו בספר ילדים איכותי.
צורות פשוטות עם פינות מעוגלות, קו מתאר אחד בצבע כהה, וטקסטורת גרעינים עדינה.
חתך שמראה מה קורה בפנים.
כל שלב מקבל תווית קצרה בעברית שמופיעה ליד מה שקורה, עם קו מוביל דק (Rubik במשקל 700).
המעברים רציפים: המצלמה נכנסת לתוך האובייקט, עם זום אל החתך, במקום לחתוך לסצנה חדשה.
אסור: צללים ריאליסטיים, גרדיאנטים חזקים, תוויות שמסתירות את האיור, ומקף בין שתי מילים.
</כיוון>

<מבנה>
- שלב 1 מבחוץ.
- החתך נפתח כחלון עגול בדופן, מהנקודה שהמצלמה נכנסת אליה, ונשאר פתוח עד הסוף.
- זום אל החתך.
- שלבים 2 עד 4 קורים בתוך החתך, כל אחד עם התווית שלו.
- אם השלב האחרון קורה מחוץ לאובייקט, המצלמה עוקבת אחריו החוצה.
- זום החוצה אל התוצאה.
- סיום עם כותרת: שם התהליך ב-2 עד 4 מילים, Rubik במשקל 800, מעל התוצאה.
כל תווית על המסך לפחות 1.3 שניות, וכותרת הסיום לפחות 1.5 שניות. אם זה לא נכנס, תאריך את הסרטון.
</מבנה>

<בנייה>
1. קובץ HTML אחד עם SVG. כל עיצוב מחושב מהזמן בתוך פונקציה seek(t): בלי טיימרים ובלי מצב שנשמר בין פריימים.
2. המצלמה היא transform על קבוצת השורש (זום והזזה), על קפיצים בנוסחה סגורה.
3. צמיחה וציור נעשים עם stroke-dashoffset (קו שמצייר את עצמו), ועם הגדלה מנקודת בסיס.
4. קווי המתאר נשארים באותו עובי גם בזום (vector-effect: non-scaling-stroke).
5. תוויות נכנסות בתנועה קצרה למעלה עם opacity שעולה, ויוצאות כשהשלב נגמר.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל שלב, ותבדוק כל תווית בפריים הראשון ובפריים האחרון שלה: שלמה בתוך המסגרת, ולא מסתירה משהו שגדל בינתיים.
</בנייה>

<מלכודות>
בזום חזק, טקסט בתוך SVG מתעוות. תשים את התוויות בשכבת HTML מעל הסצנה, וחשב את המיקום שלהן מהמצלמה.
בלי non-scaling-stroke, הקווים מתעבים בזום ונראים כמו טוש. אבל קו שמצייר את עצמו עם stroke-dashoffset לא מקבל non-scaling-stroke, כי אז כרום מודד את הדאש בפיקסלים של המסך. לקווים כאלה תחשב בכל פריים עובי חלקי הזום.
vector-effect לא עובר בירושה: שמים אותו על כל path, לא על קבוצה.
גרעינים הם שכבת רעש סטטית מעל כל המסך, לא פילטר בתוך הקבוצה שעושה זום.
הפונטים נטענים מקבצים מקומיים, ומחכים ל-document.fonts.load לפני הפריים הראשון. אחרת כרום עובר בשקט לפונט אחר.
</מלכודות>

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

<קלט>
תשאל אותי על ארבעה דברים:
- הנושא, למשל נוירון, ברק, רשת או שורשים.
- כותרת בעברית של 2 עד 5 מילים.
- צבעי הזוהר. ברירת המחדל היא סגול וכחול, עם ניצוץ צהוב.
- אורך (6 עד 12 שניות) וגודל.
</קלט>

<כיוון>
אור ניאון שגדל כמו משהו חי, על כחול כהה.
ענפים שגדלים כמו נוירון או ברק: קו אחד שמתפצל שוב ושוב ונמתח בעקומות רכות.
סביב כל קו יש זוהר: כמה שכבות עבות ושקופות מתחת לקו דק ובהיר.
ניצוץ צהוב רץ לאורך הענף ומדליק את הצומת הבא.
גשם דק או אבק ברקע, בשביל העומק.
הצומת המרכזי בחצי העליון של הפריים. כשהאור מגיע אליו, כותרת עברית נקייה (Noto Sans Hebrew במשקל 900) נכנסת מתחתיו, מילה אחרי מילה, עם כתם כהה ורך מאחוריה. הענפים מתרחקים מאזור הכותרת.
הברק השני הוא ברק אמיתי ומשונן, רחוק מאחורי הנוירון.
אסור: יותר משלושה הבזקים חזקים בשנייה, צבעי קשת, פילטרים של blur על אלמנטים גדולים, ומקף בין שתי מילים.
</כיוון>

<מבנה>
חושך ← נקודת אור ← ענף ראשי גדל ← התפצלויות ← ניצוץ רץ ← הצומת מתלקח ← ברק שני מאיר את הרקע לרגע ← הכותרת נכנסת ← הכל נושם בזוהר עד הסוף.
</מבנה>

<בנייה>
1. קובץ HTML אחד עם canvas. כל פריים מחושב מהזמן בתוך פונקציה seek(t): בלי טיימרים ובלי מצב שנשמר בין פריימים.
2. הענפים נוצרים בזמן הבנייה, מפיצול רקורסיבי עם seed קבוע, ונשמרים כרשימות של נקודות. עומק 2 עד 3, בערך 100 ענפים, זוויות פיצול של 20 עד 35 מעלות, ומשיכה קלה חזרה לכיוון המקורי, כדי שהענפים ייפתחו כמו מניפה ולא יסתלסלו.
3. הצמיחה היא אורך מצויר לאורך כל ענף, כפונקציה של הזמן. תדפיס את זמן הסיום של הענף האחרון ותתאים את המשכים, כך שהצמיחה נגמרת לפני שהניצוץ יוצא לדרך.
4. הזוהר נוצר מבערך 10 שכבות קו עם ערבוב חיבורי ('lighter'): עובי מ-70 פיקסלים עד 1.5, opacity מ-0.02 עד 0.95. החיצונית סגולה, הפנימית כחולה, והמרכז כמעט לבן. כל ענף מצויר כקו רציף אחד בכל שכבה, אחרת נוצרות נקודות בהירות בחיבורים.
5. הניצוץ הוא מיקום לאורך הענף, כפונקציה של הזמן.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל שלב, ותתקן כל דבר שנשרף ללבן או לא קריא.
</בנייה>

<מלכודות>
ריצוד ורעד צריכים לבוא מפונקציית hash של מספר הפריים המוצג, Math.round(t * 60), כך שהם זהים בכל 4 פריימי הביניים. לא מ-Math.random, אחרת כל רינדור יוצא אחרת.
כותרת רחבה מ-80 אחוז מהפריים נשברת לשתי שורות, בין מילים.
את מגבלת ההבזקים בודקים במדידה: ממוצע בהירות לכל פריים, וקפיצה של יותר מ-2 אחוז בפריים אחד נחשבת הבזק.
זוהר חזק מדי שורף את הכותרת. תשים מאחוריה כתם כהה ורך.
הפונטים נטענים מקבצים מקומיים, ומחכים ל-document.fonts.load לפני הפריים הראשון. אחרת כרום עובר בשקט לפונט אחר.
</מלכודות>

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

<קלט>
תשאל אותי על ארבעה דברים:
- האובייקט, למשל קטפולטה, מכונת קפה או המוצר שלכם.
- 2 עד 4 חלקים שלו, עם שמות בעברית.
- מה הוא עושה: פעולה אחת.
- אורך (10 עד 15 שניות) וגודל.
</קלט>

<כיוון>
משרטוט לנפח.
זה מתחיל כשרטוט עיפרון טכני על נייר לבן: קווים שנמשכים בזה אחר זה, קווי מידה עם מספרים, ותוויות בעברית.
אחר כך נכנסת הצללה בקווים, הצורות מתמלאות בחומר (עץ, מתכת), צל נופל על הרצפה, והמצלמה מסתובבת קצת כדי לחשוף עומק.
בסוף האובייקט עושה את הפעולה שלו.
התוויות ב-Rubik, קווי המידה והמספרים בפונט מונו.
אסור: קפיצה ישירה משרטוט לתלת ממד בלי שלבי ביניים, טקסטורות צילום, ומקף בין שתי מילים.
</כיוון>

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

<בנייה>
1. קובץ HTML אחד, שמוגש משרת http מקומי (כרום חוסם מודולים של three.js מקובץ). אפשר three.js, בתנאי שכל פריים מרונדר ידנית מתוך פונקציה seek(t), שמתחילה בקביעת כל הטרנספורמים מ-t, בלי requestAnimationFrame ובלי מצב שנשמר בין פריימים.
2. קווי העיפרון הם קווי קצוות של הגאומטריה (EdgesGeometry). הם מצוירים בהדרגה, כפונקציה של הזמן. קווי WebGL הם ברוחב פיקסל אחד, אז בונים מהם רצועות בעובי 2.5 פיקסלים ומחלקים כל קצה לקטעים קצרים, כדי שהקו יגדל בהדרגה. לכדור, קו מתאר עגול שפונה למצלמה.
הגוף המלא כותב עומק גם כשהוא שקוף, כדי שקווים נסתרים לא ייראו (אחרת יוצא wireframe שקוף).
ההצללה בקווים היא shader של פסים אלכסוניים, שהצפיפות שלהם לפי כמה הפאה מוארת, עם שכבת קווים מוצלבים באזורים הכהים.
3. החומר נכנס עם opacity שעולה מ-0 ל-1, אחרי שהקווים נגמרים. הצללת toon עם 4 או 5 גוונים, וקווי הדיו נשארים על המילוי. מתכת בלי מפת סביבה יוצאת שחורה.
4. התוויות וקווי המידה בשכבת HTML מעל הקנבס. המיקום שלהן מחושב מהקרנה של נקודות תלת ממד. לכל תווית מיקום לפני סיבוב המצלמה ומיקום אחריו, עם מעבר ביניהם. לכל היותר 3 קווי מידה, בשולי האובייקט, שלא חוצים זה את זה.
5. הפעולה (זריקה או סיבוב) היא נוסחה סגורה של הזמן, עם קפיץ לרטט בסוף. סביב רגע השחרור, הילוך איטי של בערך 0.3, אחרת הכדור יוצא מהפריים תוך רגע.
6. רינדור עם Playwright: כל צילום מסך עובר ישר ל-ffmpeg (image2pipe, ובכניסה -framerate 240), בלי לשמור תמונות לדיסק. 4 פריימי ביניים סביב כל פריים, על פני חצי ממשך הפריים, ממוזגים עם tmix=frames=4. אחריו select=eq(mod(n\,4)\,3) שומר את הפריים שבו ארבעתם מוזגו, ו-setpts=N/(60*TB), כך שיוצא MP4 ב-60 פריימים לשנייה (yuv420p).
7. לפני הרינדור המלא תרנדר פריים אחד לכל שלב, ותתקן כל תווית שחותכת קו או יוצאת מהפריים.
</בנייה>

<מלכודות>
three.js צריך preserveDrawingBuffer: true, ורינדור מפורש אחרי כל seek. אחרת צילום המסך יוצא ריק.
תוויות שמחושבות מהקרנה קופצות כשהמצלמה זזה. תחליק אותן עם קפיץ.
הפונטים נטענים מקבצים מקומיים, ומחכים ל-document.fonts.load לפני הפריים הראשון. אחרת כרום עובר בשקט לפונט אחר.
</מלכודות>

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