Installs into .claude/skills of the current project.
Are you the author of Mf Explainer?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/arielaizn-mf-explainer)
---
name: mf-explainer
description: סרטוני הסבר ואינפוגרפיקה בקוד - עולמות איזומטריים שנבנים, אייקונים, תרשימים שגדלים (עמודות, קו, דונאט), מונים, תהליך בשלבים, מפות זרימה, השוואות, "איך זה עובד". הפעל כשמבקשים "סרטון הסבר", "אקספליינר", "אינפוגרפיקה מונפשת", "דאטה ויזואליזציה", "גרף מונפש", "תהליך בשלבים", "explainer video", "animated infographic", "data viz", "how it works". חלק מ-Motion Forge; קרא קודם את motion-forge.
---
# 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 })`: קו מתאר שנכתב (trim על הנתיבים) ואז מילוי שנכנס.
48 אייקונים מוכנים ב-`P.ICONS`; אייקון חסר: נתיב SVG משלך דרך `P.svg(d)`.
## צבע וטקסט
- רקע בהיר נקי (`#f7f8fc`) עם 2 צבעי נתונים + אפור לרקע של נתונים, או כהה עם צבעי ניאון רכים.
- תוויות קצרות (עד 3 מילים), מספרים גדולים. כל מספר עם מקור אם הוא עובדה אמיתית; אם הוא דוגמה, כתוב שזו דוגמה.
## סאונד
`A.groove('uplift' | 'minimal', ...)`, `A.pop` לכל אייקון, `A.slide` לקו שנכתב, `A.count` + `A.chime` למונה, `A.thud` לקופסה.
