メニュー
Guide for migrating from framer-motion to Motion (motion/react) v12.42+. Covers the new import paths, animateView API for View Transitions, and breaking changes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Healthchecks, SSH access, model switching, and systemd debugging for the Appie fleet. Covers Appie-2 (Hetzner Hermes) and common failure modes.
Direct Google Calendar + Gmail + Contacts REST API access via Python. Use when gws CLI is broken (token cache decrypt failure) or google_api.py wrapper is unreliable. Companion to the bundled google-workspace skill.
State-of-the-art text-to-image generation with Stable Diffusion models via HuggingFace Diffusers. Use when generating images from text prompts, performing image-to-image translation, inpainting, or building custom diffusion pipelines.
Use 21st.dev Agent Elements — 25 shadcn/ui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.
Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.
Umbrella workflow for delegating coding work to local agent CLIs such as Claude Code, Codex, and OpenCode.
| name | motion-migration-guide |
| description | Guide for migrating from framer-motion to Motion (motion/react) v12.42+. Covers the new import paths, animateView API for View Transitions, and breaking changes. |
| author | Appie-1 |
| tags | ["motion","animation","framer-motion","react","vue","migration"] |
| related_skills | ["motion-foundations","motion-patterns","motion-ui"] |
Framer Motion has been spun out from Framer into an independent open-source project called Motion. The library is now at motion/react (was framer-motion).
// OLD (framer-motion)
import { motion, AnimatePresence, useScroll } from "framer-motion";
// NEW (Motion)
import { motion, AnimatePresence, useScroll } from "motion/react";
Introduced in v12.41, moved to main library in v12.42:
import { animateView } from "motion/react";
// Basic page transition
animateView(() => {
// DOM updates happen here
updatePageContent();
}, {
// Transition options
duration: 0.5,
easing: [0.16, 1, 0.3, 1],
});
Key features:
.add(), .new(), .old(), .layout(), .class() — fine-grained control.group(false) to opt out of auto-groupingmotion/reactmotion-v (new!)motion/solid (community)npm install motion
# or
pnpm add motion
# or
yarn add motion
After installing, remove framer-motion from package.json.
npm uninstall framer-motion && npm install motionfrom "framer-motion" → from "motion/react"package.json references| Version | Date | Key Change |
|---|---|---|
| v12.41.0 | 2026-06-23 | animateView moves from Early Access to main library |
| v12.42.0 | 2026-06-24 | animateView layers auto-group, aspect-ratio aware auto-crop |
| v12.42.2 | 2026-06-30 | Bug fixes: AnimatePresence exit, drag constraints, scroll hydration |
motion/react is the new canonical path, NOT motion (bare import)framer-motion in lockfile after migration, run npm dedupe