Installs into .claude/skills of the current project.
Are you the author of Mf Ui Promo?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/arielaizn-mf-ui-promo)
---
name: mf-ui-promo
description: פרומו לאפליקציה, SaaS ואתר בקוד - מוקאפ טלפון או לפטופ שמצויר בקוד, מסכים שמחליקים, סמן שזז ולוחץ עם ripple, התראות שקופצות, זום לתוך פיצ'ר, הטיה תלת-ממדית, צ'אט שמתמלא. הפעל כשמבקשים "סרטון לאפליקציה", "פרומו למוצר דיגיטלי", "הדגמת פיצ'ר", "סרטון השקה ל-SaaS", "app promo", "UI animation", "product demo", "feature highlight", "mockup animation". חלק מ-Motion Forge; קרא קודם את motion-forge.
---
# mf-ui-promo · המוצר הוא הכוכב
סרט דוגמה: `../motion-forge/studio/gallery/06_ui-promo.html`. כלים: `P.rect` מעוגל, `T.layout`, `P.icon`, `spring`, `FX.shadow`, `CAM`.
## הממשק מצויר, לא מצולם
כל מסך הוא פונקציה `screenX(c, lt)` שמציירת את ה-UI בתוך מסגרת הטלפון (clip למלבן המעוגל): סטטוס בר, כותרת,
כרטיסים, כפתורים, אייקונים. זה מה שנותן לו להיות חד ב-4K ולהגיב לסמן. אם המשתמש נתן צילומי מסך, העבר אותם
ל-data URL (ראה `mf-overlay`) ושים אותם בתוך המסגרת, עם אלמנטים מצוירים מעליהם.
## המוקאפ
- טלפון: מלבן ברדיוס 110 (ל-1080 רוחב), מסגרת כהה 14px, "אי" עליון, צל רך גדול, השתקפות אלכסונית עדינה.
- לפטופ: מסך + בסיס טרפז + צל. דפדפן: פס עליון עם שלוש נקודות וכתובת.
- הטיה: `c.transform` עם skew קטן ו-scaleX, או `CAM.parallax` עם שני כרטיסים לעומק. עד 12 מעלות.
## הסמן
- מסלול: `P.catmull` בין נקודות המטרה, תנועה עם `E.inOutCubic`, 0.5 עד 0.9 שניות בין מטרות, עצירה קצרה לפני לחיצה.
- לחיצה: הסמן מתכווץ ל-0.85 ב-0.08s, ripple עגול יוצא מהנקודה (radius 0 → 60, שקיפות 0.35 → 0), הכפתור שוקע 2px.
- סאונד: `A.click` על כל לחיצה, `A.ui('confirm')` כשפעולה מצליחה, `A.keyboard` כשמקלידים.
## רגעים שעובדים
| רגע | איך |
|---|---|
| התראה | כרטיס יורד מלמעלה עם spring (`SPRING.snappy`), `A.ui('notify')`, נשאר 1.2s ועולה |
| זום לפיצ'ר | מצלמה (scale + translate) נכנסת לאזור ב-UI, השאר מטושטש ומוחשך |
| גרף שעולה בתוך האפליקציה | ראה `mf-explainer`, בתוך הכרטיס |
| הודעות צ'אט | בועות עם spring ו-stagger, נקודות "מקליד..." לפני כל תשובה |
| מסכים מחליקים | המסך הבא דוחף את הקודם (push) ב-`E.snappy`, 0.45s |
| ריבוי מכשירים | טלפון + לפטופ זה לצד זה, אותו אלמנט עובר ביניהם בקשת (`arcPath`) |
## מבנה של 15 שניות
0 עד 2: הבעיה בטקסט גדול (kinetic) · 2 עד 11: שלושה פיצ'רים, 3 שניות כל אחד, עם כותרת קצרה מעל המוקאפ ·
11 עד 15: לוגו, טאגליין, קריאה לפעולה ("הורידו עכשיו") עם כפתור שנלחץ.
## סאונד
`A.groove('uplift' | 'house' | 'minimal', 0, dur, { bpm: 118 })`, מעברי מסך עם `A.swish`, סיום עם `A.chime`.
