mf-explainerlisted

# mf-explainer · להבין בעיניים סרט דוגמה: `../motion-forge/studio/gallery/04_explainer.html`. כלים: `CAM.iso*`, `P.icon`, `P.trim`, `T.counter`, `spring`. ## העיקרון כל רעיון הופך **לאובייקט שאפשר לראות משתנה**: "צמיחה" = עמודה שגדלה, "חיבור" = קו שנכתב בין שני אייקונים, "שלב" = קופסה איזומטרית שנוחתת על המגדל. משפט אחד על המסך לכל היותר, והוויזואל עושה את שאר העבודה. ## מבנה 1. **שאלה או בעיה** (1 עד 2 שניות) · 2. **המנגנון** בשלבים, סצנה או קבוצה לכל שלב · 3. **התוצאה** במספר גדול · 4. **סיום** (לוגו או משפט). שלבים באותו מסך נבנים אחד על השני: המצלמה זזה (`CAM` או translate) במקום לחתוך, כדי שהצופה ירגיש רצף. ## איזומטרי - `CAM.isoBox(c, x, y, z, w, d, h, { top, left, right })` עם שלושה גוונים של אותו צבע (עליון בהיר, שמאלי בינוני, ימני כהה). - בנייה: כל קופסה נוחתת מלמעלה (`bounceDrop` או spring על z) עם צל שמתחדד כשהיא מתקרבת לקרקע, ו-`A.thud` קטן. - מיון עומק: צייר לפי `x + y` עולה (ואז z). ## נתונים | תרשים | אנימציה | הערות | |---|---|---| | עמודות | גובה ב-spring, stagger 60ms, ערך מעל כל עמודה ב-`T.counter` | ציר ובסיס נכתבים קודם ב-trim | | קו | `P.trim(path, 0, p)` + נקודה מובילה עם glow | אחרי הציור: נקודות נתונים קופצות | | דונאט | `P.ring` עם `trim: [0, p * value]` לכל פלח ברצף | אחוז במרכז עם counter | | השוואה | שני טורים, המנצח גדל אחרון ומקבל צבע אקסנט | | | מספר גדול | `T.counter` עם `E.outExpo`, ספרות טבולריות (Heebo או JetBrains Mono) | `A.count` + `A.impact` בסוף | ## אייקונים `P.icon(c, 'rocket', x, y, 96, { stroke: '#fff', width: 5 })`: קו מתאר