גיא-קופל/מתכוני-הנפשות-אינטראקטיביות

מתכוני אנימציה לאתר: בחירה ובנייה

הסקיל עוזר לבחור אנימציה לאתר ולבנות אותה, מתוך 30 מתכונים. הקבצים בתיקייה:

• placements.md: 8 מיקומים באתר, ואילו אנימציות מתאימות לכל מיקום.
• recipes.md: מפרט בנייה לכל אחת מ-30 האנימציות.

שלב 1: לשאול איפה מיישמים

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

"איפה באתר תרצה את האנימציה?"

1. אזור הפתיחה (Hero) של דף נחיתה
2. מעבר בגלילה או מעבר בין מסכים
3. כרטיסים ורשת תכונות
4. טפסים, שדות קלט וקוד חד-פעמי
5. כפתורים, מתגים ומחווני התקדמות
6. ניווט ותפריטים
7. הצגת מוצר או אפליקציה (מוקאפ טלפון, קרוסלה)
8. דמות או אפקט שמלווה את הסמן בכל הדף

אם המשתמש כבר אמר את המיקום בבקשה, לדלג לשלב 2 ולציין איזה מיקום הובן.

שלב 2: לשאול איזה סוג אנימציה

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

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

שלב 3: שלוש שאלות קצרות לפני בנייה

לשאול בהודעה אחת:

1. על מה בונים: HTML/CSS/JS פשוט, React, Next.js, Webflow, וורדפרס או משהו אחר?
2. מה התוכן: כותרת, טקסט, תמונות, צבעי מותג, לוגו. אם אין, להשתמש בתוכן דמה ולסמן אותו.
3. האם האתר חייב לעבוד בכל הדפדפנים ובמובייל? אנימציה שמסומנת "ניסיוני" נשענת על API שזמין רק ב-Chrome.

שלב 4: בנייה

1. לפתוח ב-recipes.md את המתכון שנבחר ולקרוא את המפרט המלא.
2. לבנות מימוש מאפס לפי המפרט ולפי התוכן של המשתמש.
3. לבחור את הכלי הפשוט ביותר שמשיג את האפקט: CSS לפני Canvas, ו-Canvas לפני WebGL. להשתמש ב-Three.js או R3F רק כשיש עומק, תאורה או שיידר אמיתיים.
4. לחשוף את "כפתורי הכוונון" מהמתכון כמשתנים בראש הקובץ, או בפאנל קטן (למשל lil-gui או Leva), כדי שאפשר יהיה לכוונן בלי לגעת בקוד.
5. במתכון שמסומן Chrome בלבד: לבנות fallback, כמו צילום של ה-HTML כטקסטורה או גרסת CSS פשוטה. לבדוק תמיכה בזמן ריצה ולא לפי user agent.

שלב 5: בדיקה לפני מסירה

לעבור על הרשימה ולדווח למשתמש מה נבדק ומה לא:

1. prefers-reduced-motion: בהגדרה הזו האנימציה נעצרת או מוחלפת בגרסה סטטית.
2. ביצועים: לשאוף ל-60fps במחשב רגיל. לעצור את הלולאה כשהרכיב לא נראה (IntersectionObserver) וכשהטאב מוסתר. להגביל devicePixelRatio ל-2.
3. מובייל: מגע במקום hover, וגרסה קלה יותר או סטטית במכשיר חלש.
4. נגישות: הטקסט נשאר HTML אמיתי, נגיש לקורא מסך ולמנועי חיפוש. אפקט שמסתיר תוכן לא חוסם קריאה.
5. אם לא הרצתי את הקוד בדפדפן, לכתוב את זה במפורש.