mf-ui-promolisted

פרומו לאפליקציה, SaaS ואתר בקוד - מוקאפ טלפון או לפטופ שמצויר בקוד, מסכים שמחליקים, סמן שזז ולוחץ עם ripple, התראות שקופצות, זום לתוך פיצ'ר, הטיה תלת-ממדית, צ'אט שמתמלא. הפעל כשמבקשים "סרטון לאפליקציה", "פרומו למוצר דיגיטלי", "הדגמת פיצ'ר", "סרטון השקה ל-SaaS", "app promo", "UI animation", "product demo", "feature highlight", "mockup animation". חלק מ-Motion Forge; קרא קודם את motion-forge.
arielaizn/motion-forge-plugin · ★ 2 · Web & Frontend · score 63

Install: claude install-skill arielaizn/motion-forge-plugin

# 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)