Motion Foundations
Motion tokens, spring presets, and accessibility-safe animation rules for React and Next.js.
- What
- Motion tokens, spring presets, and accessibility-safe animation rules for React and Next.js.
- Cost
- Free
- Needs
- Use "Motion Foundations" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: the foundation layer of a motion system for React and Next.js built on motion/react. It defines the shared vocabulary every animation in the app should speak: a motionTokens object (duration, easing, distance, scale), a map of five named spring presets, a shouldAnimate gate used by all components, accessibility-compliant defaults via useReducedMotion, and SSR-safe initial states with zero hydration warnings. The principles are strict on purpose: motion must guide attention, communicate state, or preserve spatial continuity, or it gets removed. Responsiveness always beats decoration. This is the base layer that downstream motion skills inherit from, so it is the one to load before any animation work begins. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: pure guidance, nothing to install beyond the motion/react library in your own project; React and Next.js specific, and the reduced-motion and SSR rules assume a web target. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseWe automatically scan every listing and flag anything suspicious, but we can't review every line of community code. Here's how to check a build yourself before you install it.
Use "Motion Foundations" with your Muse. Prerequisites: the Muse app (mobile or web), and a React or Next.js project with the motion/react library available. Pure guidance skill, nothing to install. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/motion-foundations/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Set up the motion foundation for [project]: motionTokens, the five spring presets, the shouldAnimate gate, and reduced-motion plus SSR-safe defaults." 3. Ask Muse to wire one component through the full pipeline (tokens, spring, gate, reduced-motion check) as the reference implementation, then apply the same shape everywhere else. Tip: start every animation review with the three-question test: does it guide attention, communicate state, or preserve spatial continuity? If none, remove it. Safety: a skill is plain-text instructions; it runs nothing by itself. Review any code before committing it, never paste secrets into a chat, and review anything Muse proposes before it acts.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.