motion by onmax/nuxt-skills
npx skills add https://github.com/onmax/nuxt-skills --skill motion适用于 Vue 3 和 Nuxt 的动画库。生产就绪、硬件加速的动画,且打包体积极小。
当前稳定版本: motion-v 1.x - Motion(原 Framer Motion)的 Vue 移植版
Motion Vue 动画的渐进式参考。仅加载与当前任务相关的文件(基础约 200 个令牌,每个子文件 500-1500 个令牌)。
在以下场景使用 Motion Vue:
考虑替代方案:
# Vue 3
pnpm add motion-v
# Nuxt 3
pnpm add motion-v @vueuse/nuxt
// nuxt.config.ts - Nuxt 3 配置
export default defineNuxtConfig({
modules: ['motion-v/nuxt'],
})
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 正在处理... | 加载文件 |
|---|
| Motion 组件,手势 | references/components.md |
| useMotionValue, useScroll | references/composables.md |
| 动画示例,模式 | references/examples.md |
根据你的任务考虑加载以下参考文件:
切勿一次性加载所有文件。 仅加载与当前任务相关的内容。
渲染任何具有动画功能的 HTML/SVG 元素:
<script setup lang="ts">
import { motion } from 'motion-v'
</script>
<template>
<motion.div
:initial="{ opacity: 0, y: 20 }"
:animate="{ opacity: 1, y: 0 }"
:exit="{ opacity: 0, y: -20 }"
:transition="{ duration: 0.3 }"
>
动画内容
</motion.div>
</template>
<motion.button
:whileHover="{ scale: 1.05 }"
:whilePress="{ scale: 0.95 }"
:transition="{ type: 'spring', stiffness: 400 }"
>
点击我
</motion.button>
<motion.div
:initial="{ opacity: 0 }"
:whileInView="{ opacity: 1 }"
:viewport="{ once: true, margin: '-100px' }"
>
滚动时出现
</motion.div>
references/components.md - Motion 组件变体、动画属性、手势属性、布局动画、过渡配置
references/composables.md - useMotionValue、useSpring、useTransform、useScroll、useInView、animate()
references/examples.md - 外部资源、组件库、动画模式和灵感
每周安装量
1.0K
代码仓库
GitHub 星标数
606
首次出现
2026年1月19日
安全审计
安装于
opencode717
gemini-cli708
codex678
github-copilot650
cursor634
claude-code619
Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size.
Current stable: motion-v 1.x - Vue port of Motion (formerly Framer Motion)
Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).
Use Motion Vue for:
Consider alternatives:
# Vue 3
pnpm add motion-v
# Nuxt 3
pnpm add motion-v @vueuse/nuxt
// nuxt.config.ts - Nuxt 3 setup
export default defineNuxtConfig({
modules: ['motion-v/nuxt'],
})
| Working on... | Load file |
|---|---|
| Motion component, gestures | references/components.md |
| useMotionValue, useScroll | references/composables.md |
| Animation examples, patterns | references/examples.md |
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
Render any HTML/SVG element with animation capabilities:
<script setup lang="ts">
import { motion } from 'motion-v'
</script>
<template>
<motion.div
:initial="{ opacity: 0, y: 20 }"
:animate="{ opacity: 1, y: 0 }"
:exit="{ opacity: 0, y: -20 }"
:transition="{ duration: 0.3 }"
>
Animated content
</motion.div>
</template>
<motion.button
:whileHover="{ scale: 1.05 }"
:whilePress="{ scale: 0.95 }"
:transition="{ type: 'spring', stiffness: 400 }"
>
Click me
</motion.button>
<motion.div
:initial="{ opacity: 0 }"
:whileInView="{ opacity: 1 }"
:viewport="{ once: true, margin: '-100px' }"
>
Appears on scroll
</motion.div>
references/components.md - Motion component variants, animation props, gesture props, layout animations, transition configuration
references/composables.md - useMotionValue, useSpring, useTransform, useScroll, useInView, animate()
references/examples.md - External resources, component libraries, animation patterns and inspiration
Weekly Installs
1.0K
Repository
GitHub Stars
606
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode717
gemini-cli708
codex678
github-copilot650
cursor634
claude-code619
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
Flutter测试完全指南:单元测试、Widget测试与集成测试实践教程
881 周安装
OKX Agentic Wallet - 链上OS钱包技能:身份验证、代币转账、交易历史与智能合约调用
882 周安装
Novel Writer 小说创作工作流指南:7步系统化方法,AI辅助写作与质量分析
882 周安装
内部沟通AI技能:自动生成3P更新、公司通讯、FAQ回复等内部沟通内容
883 周安装
PowerShell Windows 模式指南:语法规则、常见陷阱与最佳实践
883 周安装
PHP 8.x 最佳实践指南:51条规则掌握现代PHP开发、PSR标准与SOLID原则
886 周安装