Motion Forge

---
name: motion-forge
description: Motion Forge — אולפן סרטוני מושן גרפיקס ואנימציה שנכתבים 100% בקוד (Canvas 2D / WebGL + WebAudio), עם מוזיקה וסאונד שמסונתזים בקוד, ומרונדרים ל-MP4. סקיל האב והנתב של החבילה, 14 סגנונות: מושן גרפיקס ברמת After Effects, קינטיק טייפוגרפי, מושן דיזיין פרימיום, אקספליינר ואינפוגרפיקה, לוגו סטינג, פרומו לאפליקציה, שיידרים, גליץ' ורטרו, פרטיקלים, דמויות, עבודת יד, תלת-ממד, מעברים, ציור מעל וידאו. הפעל בכל בקשה ליצור סרטון אנימציה או מושן מקוד - "תעשה לי סרטון מושן", "אנימציה מקוד", "מושן גרפיקס", "סרטון אנימציה", "ריל אנימציה", "לוגו אנימציה", "motion graphics", "code animation", "animate this", "make a motion video", "kinetic typography", "explainer video" - וגם כשמבקשים לשדרג, לבקר או לרנדר סרט Motion Forge קיים. קרא אותי לפני כל סקיל mf-* אחר.
---

# Motion Forge

כל פריים וכל צליל בסרט נכתבים ב-JavaScript. בלי ספריות, בלי תמונות, בלי גנרציית AI.
המנוע מרנדר את הסרט פריים אחרי פריים ב-Chrome headless, מזרים את הפריימים ישר ל-ffmpeg,
מסנתז את הפסקול ב-OfflineAudioContext ומנרמל אותו ל-‎-14 LUFS. התוצאה היא MP4 מוכן
לאינסטגרם, טיקטוק או יוטיוב, ולצדו קובץ HTML שמתנגן חי בדפדפן עם סאונד.

הסטודיו נמצא בתיקייה `studio/` שליד הקובץ הזה:

| קובץ | תפקיד |
|---|---|
| `studio/engine/motion.js` | זמן ותנועה: `E.*` (כולל `E.bezier` כמו גרף המהירות של AE), `kf`, `spring`, `wiggle`, `stagger`, `tempo`, `scenes`, `rng`, `noise2` |
| `studio/engine/shapes.js` | `P`: צורות, Trim Paths, מורפינג, SVG, repeater, burst, blob, ‏48 אייקונים |
| `studio/engine/text.js` | `T`: פריסת טקסט עם עברית RTL, אנימטורים לכל אות, קינטיק, counter |
| `studio/engine/fx.js` | `FX`: glow, צללים, motion blur, chroma, glitch, grain, vignette, מסכות, mesh gradient, light sweep |
| `studio/engine/camera.js` | `CAM`: מצלמת 2.5D, פרלקסה, DOF, רעידה, איזומטרי, מש תלת-ממדי, extrude |
| `studio/engine/gl.js` | `GL`: שיידרים של WebGL, ספריית GLSL, פריסטים (synthwave, liquid chrome, aurora ועוד) |
| `studio/engine/audio.js` | `A`: סינתיסייזר מלא: תופים, בס, פסנתר, פדים, מיתרים, צ'יפטיון, 32 אפקטים ו-11 גרוביי ז'אנר |
| `studio/engine/runtime.js` | `film({...})`: נגן חי, הווים לרינדור ול-QA |
| `studio/engine/API.md` | רפרנס מלא של כל הפונקציות. קרא לפני כתיבת קוד |
| `studio/render.mjs` | רינדור, גריד, סטריפ, פריימים ו-QA |
| `studio/gallery/*.html` | סרט דוגמה עובד לכל סגנון. כל אחד מהם הוא ערכת כלים לסגנון שלו |
| `studio/templates/film.html` | שלד של סרט חדש |

## מפת הסקילים

| הבקשה | הסקיל | סרט דוגמה |
|---|---|---|
| מושן גרפיקס קלאסי: צורות, Trim Paths, repeaters, בלוקי צבע | `mf-mograph` | `01_mograph-shapes` |
| טקסט שזז: ציטוט, מילים, ליריקה, טייטל | `mf-kinetic-type` | `02_kinetic-type` |
| מושן דיזיין פרימיום: גרדיאנטים, זכוכית, springs, סטייל Apple ו-Stripe | `mf-motion-design` | `03_motion-design` |
| הסבר, תהליך, נתונים, גרפים, איזומטרי | `mf-explainer` | `04_explainer` |
| חשיפת לוגו, אינטרו, אאוטרו, סאונד-לוגו | `mf-logo-sting` | `05_logo-sting` |
| פרומו לאפליקציה או SaaS: מוקאפ, סמן, לחיצות | `mf-ui-promo` | `06_ui-promo` |
| עולמות שיידר: synthwave, כרום נוזלי, אורורה | `mf-shader` | `07_synthwave` |
| גליץ', VHS, CRT, פיקסל ארט | `mf-glitch-retro` | `08_glitch` |
| פרטיקלים, flow fields, טקסט שמתפרק ומתאחה | `mf-generative` | `09_particles` |
| דמות עם שלד, הליכה, קפיצה, הבעות | `mf-character` | `10_character` |
| חומר עבודת יד: נייר, גיר, עיפרון, צבעי מים, רקמה, חול | `mf-handmade` | `11_papercut` |
| תלת-ממד: low-poly, מצלמה מסתובבת, טקסט מוחצן | `mf-3d` | `12_lowpoly` |
| מעברים: whip, match cut, zoom-through, מסכת צורה | `mf-transitions` | `13_transitions` |
| ציור ואנימציה מעל תמונה או וידאו אמיתיים | `mf-overlay` | — |
| מוזיקה, אפקטים, סנכרון לביט | `mf-sound` | כל הגלריה |
| ביקורת, תיקונים, רינדור | `mf-qa` | — |

עריכת פוטג' אמיתי, טריילרים וסרטים עם קריינות עוברים ל-hyperframes. Motion Forge מטפל במה שנוצר מאפס בקוד.

## זרימת עבודה

### 1. רעיון, ואז שאלה אחת
אם המשתמש הביא רק רעיון, שאל שאלה אחת (בכלי השאלות אם יש) עם הסגנונות הרלוונטיים והמלצה אחת.
ההמלצה נגזרת מהרעיון: דאטה → `mf-explainer`, מותג → `mf-logo-sting`, ציטוט → `mf-kinetic-type`,
מוצר דיגיטלי → `mf-ui-promo`, רגש וסיפור → `mf-character` או `mf-handmade`.
וודא רק מה שלא ברור: פורמט (ברירת מחדל: 9:16 ב-1080x1920 לרשתות, 16:9 ב-1920x1080 ליוטיוב ולמצגות),
אורך (ברירת מחדל 8 עד 15 שניות; לוגו 3 עד 6; אקספליינר עד 60), שפת הטקסט שעל המסך, ולוגו או כותרת בסוף.

### 2. תזה וביטים לפני קוד
שורה אחת של תזה: מה הצופה צריך להרגיש או להבין. אחריה טבלת ביטים, 4 עד 8 שורות:
זמן · מה העין רואה · מה זז ואיך (easing, משך) · איזה צליל. קבע **רגע גיבור אחד**, המעבר או החשיפה
שהצופה יזכור, ותן לו את הזמן והסאונד הכי גדולים. אם יש מוזיקה, קבע BPM וחשב את הביטים עם `tempo(bpm)`,
כדי שהתמונה והסאונד ינחתו על אותו גריד.

### 3. הקמת הסטודיו
```bash
cp -R "<תיקיית הסקיל>/studio" ./mf-studio && cd mf-studio && npm i
cp templates/film.html films/<name>.html
```
דרישות: Node 22+, Google Chrome, ffmpeg. אם מדובר בפרויקט שכבר יש בו `mf-studio`, עבוד בו.

### 4. בנייה
פתח את סרט הדוגמה של הסגנון מהגלריה, וקרא את סקיל הסגנון ואת `engine/API.md`. שמור על ערכת הכלים של
הסגנון (טקסטורות, פונקציות ציור, קול) והחלף את התוכן. מבנה הסרט:

```js
const W = 1080, H = 1920, B = tempo(110);            // גריד ביטים משותף לתמונה ולסאונד
const SC = scenes([['hook', 0, 2.2], ['build', 2.2, 6], ['payoff', 6, 9]]);
film({
  title: 'שם הסרט', size: [W, H], fps: 30, dur: 9, bg: '#0c0c12',
  fonts: ['Heebo', 'Anton'],
  async setup() { /* טקסטורות, שכבות סטטיות, גיאומטריה: פעם אחת */ },
  draw(c, t, f) { const s = SC.at(t); /* פונקציה טהורה של t */ },
  score(A) { A.groove('minimal', 0, 9, { bpm: 110, chords: 'Am F C G' }); A.whoosh(B.beat(8) - .3); A.impact(B.beat(8)); },
  holds: [[8.2, 9]],                                  // עצירה מכוונת בסוף, ה-QA לא יסמן אותה
});
```

### 5. ביקורת, לפחות שני סבבים (סקיל `mf-qa`)
```bash
node render.mjs films/<name>.html --grid 24          # כל הסרט בגודל תמונה ממוזערת
node render.mjs films/<name>.html --strip 60,12      # רגע מהיר, פריים אחרי פריים
node render.mjs films/<name>.html --only 0,90,200    # פריימים בגודל מלא
node render.mjs films/<name>.html --qa               # קפוא, ריק, הבזקים, פריים 0, רמות סאונד
```
פתח את התמונות בכלי הקריאה והסתכל. תקן. חזור.

### 6. רינדור ומסירה
```bash
node render.mjs films/<name>.html                    # out/<name>.mp4 עם פסקול, -14 LUFS
node render.mjs films/<name>.html --gif              # גם GIF לתצוגה מקדימה
```
אמת ב-ffprobe (אורך, רזולוציה, זרם אודיו). מסור את ה-MP4 ואת ה-HTML, ופתח את ה-MP4 למשתמש.
כתוב בכנות מה לא נבדק: אי אפשר לשמוע את הפסקול, אז דווח על ה-LUFS ועל השקטים מתוך דוח ה-QA.

## חוזה הסרט (שובר אותו = סרט שבור)

1. **פונקציה טהורה של הזמן.** כל פריים יוצא זהה כשהוא מרונדר לבד או ברצף. `rng(seed)` ו-`hash()`
   במקום `Math.random`. בלי מצב שנשמר בין פריימים. סימולציה (חול, חלקיקים עם פיזיקה) צעדית בקצב קבוע
   עם checkpoints במטמון לפי פריים.
2. **פריים 0 הוא התמונה הממוזערת.** העולם, הנושא והצבעים כבר על המסך.
3. **יחידות עולם.** מציירים ב-`W x H` של הסרט; הקונטקסט כבר מוקטן. שכבה מחוץ למסך נוצרת ב-`layer()`.
4. **ביצועים.** פחות מ-40ms לפריים ב-1080p. כל דבר סטטי נבנה ב-`setup()`. טקסטורות ורעש במטמון.
5. **טקסט עברי.** `T.layout` מטפל ב-RTL. ספרות ולטינית בתוך שורה עברית נשארים LTR. כל מילה נבדקת בגודל טלפון.
6. **כל אירוע ויזואלי משמיע צליל**, והצליל שייך לחומר (זכוכית מצלצלת, נייר מרשרש, פיקסל מצפצף).

## רף האיכות: "איך זה קוד?"

- **אף מהלך לא לינארי**, חוץ מתנועה קבועה (סיבוב, גלילה). כניסה: `E.snappy` או spring. יציאה: `E.inCubic` מהירה.
- **Overshoot ו-settle.** דברים שנוחתים עוברים את היעד ב-5 עד 12 אחוז וחוזרים (`E.overshoot`, `SPRING.wobbly`).
- **שלוש שכבות עומק**: רקע שזז לאט, אמצע, חזית. משהו תמיד זז, כולל drift עדין (`wiggle`) ברקע.
- **תזמון קריא:** אלמנט UI נכנס ב-0.25 עד 0.45 שניות; מילה ב-0.3 עד 0.6; כותרת נשארת לפחות 1.2 שניות; stagger בין 30 ל-80ms.
- **אנטיסיפציה**: לפני תנועה גדולה, תזוזה קטנה לכיוון ההפוך (`E.anticipate`).
- **חיתוך על הביט.** מעברים וחשיפות על `B.beat(n)`, עם whoosh שמתחיל 0.2 עד 0.4 שניות לפני.
- **פלטה של 3 עד 5 צבעים**, וניגודיות טקסט שעוברת AA.
- **Safe zones**: ב-9:16 אין טקסט חשוב ב-20% התחתונים ובפס הימני (כפתור "safe zones" בנגן מראה אותם).
- **רגע גיבור אחד.** שני רגעי שיא באותו גודל מבטלים זה את זה.

## סדרה או כמה גרסאות
לכמה סגנונות לאותו רעיון, או כמה סרטים לאותו סגנון, הפעל את הסוכן `mf-film-builder` במקביל, סוכן לכל סרט,
עם בריף משותף (תזה, ביטים, פלטה) וקובץ יעד נפרד. אחר כך עבור על כל הגרידים בעצמך.

## כשמשהו נשבר

| סימפטום | סיבה ותיקון |
|---|---|
| `__error` או מסך שחור | פתח את ה-HTML בדפדפן וקרא את הקונסול. רוב הפעמים זו שגיאת תחביר בסרט |
| קופסאות במקום אותיות | המשפחה לא ברשימת `fonts` של הסרט, או שהשם שגוי (`MF_FONT_FAMILIES` מציג את הרשימה) |
| פריים שונה בין תצוגה לרינדור | משהו תלוי במצב קודם או ב-`Math.random`. הפוך אותו לפונקציה של t |
| רינדור איטי (מעל 150ms לפריים) | glow או blur על כל הפריים בכל פריים. העבר ל-`setup()` או הקטן רזולוציה של שכבה |
| WebGL שחור ב-headless | השתמש ב-`GL.shader(..., { scale: .5 })`; SwiftShader איטי. ודא `preserveDrawingBuffer` (ב-`GL.create` כבר מוגדר) |
| אין סאונד בתצוגה | הנגן צריך לחיצה על "play with sound" (מדיניות autoplay של הדפדפן) |