ss-motion

Replace the button tag with motion.button and spread a seed recipe such as spring.press or snap.hover from the motion library. The transition values come from the shared source of truth, so you never hand-write stiffness or damping parameters in the JSX.

Use the use-case recommendation map: silk entrance for modals and dialogs, snap entrance for dropdowns and menus, and spring entrance for toasts. Serious or destructive content should never use bouncy spring motion.

No, it targets framer-motion motion.X JSX components exclusively. CSS-only transitions, GSAP, and other animation libraries are out of scope, and introducing third-party animation libraries is explicitly forbidden.

No, scroll-linked timelines and parallax are out of scope for this per-component skill. Those effects are allowed on marketing pages under the Cinematic tier but must be built directly with a scroll library instead.

Inlining values like stiffness and damping fragments the motion personality across the codebase. Spreading seed recipes keeps every component calibrated from one source of truth, so the product maintains a single consistent motion feel.

For mount, exit, and layout sequences in long-lived pages, it imports usePrefersReducedMotion and REDUCED_TRANSITION from the motion engine and overrides the transition when reduced motion is enabled. One-off hover and press interactions are already throttled by framer-motion.