Mf Motion Design

Name: Mf Motion Design
Author: arielaizn

ASecurity

מושן דיזיין פרימיום בקוד - mesh gradients חיים, כרטיסי זכוכית (glassmorphism), springs רכים, bento grids, צל ועומק, מוצר שמסתובב, סטייל Apple / Stripe / Linear / Vercel. הפעל כשמבקשים "מושן דיזיין", "סטייל אפל", "סרטון מוצר יוקרתי", "גרדיאנט זורם", "premium motion", "Apple style", "product reveal", "SaaS launch video", "bento", או כשמשהו צריך להיראות יקר ונקי. חלק מ-Motion Forge; קרא קודם את motion-forge.

2 stars
0 votes
0 copies
0 views
Added September 25, 2026

designspring

Works with

Security analysis

A100/100

Scanned September 25, 2026

npx -y skills add arielaizn/motion-forge-plugin --skill mf-motion-design --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Mf Motion Design?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Mf Motion Design

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/arielaizn-mf-motion-design/badge)](https://www.skillsdirectory.com/skills/arielaizn-mf-motion-design)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: mf-motion-design
description: מושן דיזיין פרימיום בקוד - mesh gradients חיים, כרטיסי זכוכית (glassmorphism), springs רכים, bento grids, צל ועומק, מוצר שמסתובב, סטייל Apple / Stripe / Linear / Vercel. הפעל כשמבקשים "מושן דיזיין", "סטייל אפל", "סרטון מוצר יוקרתי", "גרדיאנט זורם", "premium motion", "Apple style", "product reveal", "SaaS launch video", "bento", או כשמשהו צריך להיראות יקר ונקי. חלק מ-Motion Forge; קרא קודם את motion-forge.
---

# mf-motion-design · נקי, רך, יקר

סרט דוגמה: `../motion-forge/studio/gallery/03_motion-design.html`. כלים: `FX.mesh`, `GL.presets.meshGradient`, `spring`, `FX.shadow`, `CAM.parallax`.

## השפה
- **הכל על springs.** אין easing עם "קצוות". `springAt(t, t0, from, to, { k: 170, c: 22 })` לכל תזוזה, `SPRING.gentle` לגדולים.
- **רקע חי ורך.** mesh gradient עם 4 עד 6 נקודות צבע שזזות לאט במסלולים סגורים (מחזור של 6 עד 12 שניות).
  `FX.mesh` זול ומדויק; `GL.presets.meshGradient` חלק יותר כשצריך מסך מלא ב-4K.
- **זכוכית.** כרטיס = מלבן מעוגל (רדיוס 28 עד 48), מילוי לבן ב-8 עד 14 אחוז, קו מתאר לבן ב-18 אחוז, טשטוש של הרקע
  שמאחוריו (`FX.blur` על חתך הרקע, מצויר עם clip לצורת הכרטיס), וצל רך גדול (blur 60, שקיפות 25 אחוז, מוזז למטה).
- **עומק בשלוש שכבות.** רקע (גרדיאנט) · אמצע (כרטיסים) · חזית (אלמנט אחד בפוקוס). parallax עדין בזמן תנועת מצלמה.
- **טיפוגרפיה שקטה.** Inter או Heebo במשקל 600 ל-700, tracking שלילי קטן (‎-0.02em) בכותרות גדולות, הרבה אוויר.
- **מספר פריטים קטן.** 1 עד 3 רעיונות בסרט. כל רעיון מקבל מסך משלו ורגע נשימה.

## חשיפות שעובדות
| חשיפה | איך |
|---|---|
| Blur-to-sharp | `T.fx.blurIn` או `FX.blur` שיורד מ-24 ל-0 יחד עם scale 1.08 → 1 |
| Bento מתחבר | כרטיסים נכנסים מכיוונים שונים עם stagger של 70ms, springs, ונועלים לגריד |
| מוצר מסתובב | `CAM.extrude` לעומק + סיבוב Y מדומה (scaleX = cos) + highlight שנודד (`FX.lightSweep`) |
| זום לתוך כרטיס | הכרטיס גדל למסך מלא (spring), התוכן שלו הופך לסצנה הבאה |
| קו אור | קו דק של גרדיאנט רץ לאורך קצה הכרטיס (`P.trim` על `P.rect` מעוגל, stroke עם `FX.glow`) |

## צבע
- גרדיאנט רקע: 3 גוונים קרובים + אקסנט אחד (למשל `#6d5dfc` `#b06ab3` `#4facfe` + `#ffd6a5`).
- כהה: `#0a0a0f` עם גרדיאנט רדיאלי סגול-כחול עמום מאחורי הנושא. בהיר: `#f5f5f7` עם צללים רכים בלבד.
- טקסט על גרדיאנט: לבן 95 אחוז עם צל עדין מאוד, או מלבן זכוכית מאחוריו.

## סאונד
`A.groove('minimal')` או `'ambient'` ב-90 עד 100 BPM, `A.keys` רכים, `A.ui('confirm')` לכניסת כרטיס,
`A.shimmer` על ה-light sweep, `A.sub` ארוך מתחת לחשיפה המרכזית. הרבה reverb (`audio: { reverb: .35 }`).

## מה הורס את זה
צבעים רוויים מדי, צללים שחורים חדים, bounce מוגזם (זה לא קרטון), יותר מדי טקסט, ומעברי glitch.