ss-motion

# Motion Seed Applier ## When NOT to use - For general framer-motion docs or learning → use the framer-motion site - For non-React motion (CSS-only transitions, GSAP) — this skill targets `motion.X` JSX only - For full scroll-linked timelines or parallax — out of scope per DESIGN-LANGUAGE.md Rule 59 - For tweaking the existing FadeIn/FadeUp/Stagger wrappers — edit `engine/components/ui/motion.tsx` directly ## Vibe → Seed mapping Translate the user's prompt to one of the five seeds before applying. Use this lookup table from `engine/motion/index.ts`: | Words the user might say | Seed | |---|---| | bouncy, springy, playful, energetic, alive | **Spring** | | smooth, silky, fluid, elegant, composed, continuous | **Silk** | | snappy, quick, instant, decisive, sharp, precise | **Snap** | | floaty, gentle, weightless, dreamy, ambient, drifting | **Float** | | rhythmic, punchy, pulsing, heartbeat, beat | **Pulse** | | "Toss style", "Arc style" | **Spring** (per brand default) | | "Stripe style", "Notion style" | **Silk** | | "Linear style", "Raycast style", "Vercel style" | **Snap** | If the user says only a *brand* name, use that brand's default seed from `BRAND_DEFAULT_SEED`. If the user is explicit about a seed name (`spring`, `silk`, etc.), respect it verbatim. ## Named motion keywords (distinctive moves) Seeds set a *personality* (how a fade/scale feels). The **motion library** in `engine/motion/library.ts` adds *distinctive moves* — a flip, a curtain wipe, a morph — eac...