mc-skills/catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
catalog/repos/199-biotechnologies--motion-dev-animations-skill.md

7.7 KiB
Raw Blame History

Motion.dev 动画技能

动画 Motion.dev Claude Code TypeScript React

Motion.dev 动画技能

为 Claude Code 提供生产级 Web 动画，由 Motion.dev 驱动。

Star this repo Follow @longevityboris

Claude Code Motion.dev License: MIT TypeScript

这是一个 Claude Code 技能，使用 Motion.dev（Framer Motion 的继任者）生成 120fps GPU 加速动画。只需说"添加英雄动画"或"创建滚动效果"，即可获得内置无障碍访问和性能优化的生产就绪 TypeScript 代码。

为何存在 | 安装 | 快速开始 | 工作原理 | 动画类型 | 内容结构 | 贡献 | 许可证

为何存在

Motion.dev 每月下载量超过 1000 万次，是 React、Next.js、Svelte 和 Astro 中 Web 动画的标准方案。但编写优质动画并不容易——你需要弹簧物理、GPU 加速属性、prefers-reduced-motion 支持，以及 60fps+ 的性能目标。

本技能为 Claude Code 提供 Motion.dev 模式的深度知识，使其能够从自然语言生成生产级动画代码。不再需要翻阅文档，不再需要猜测弹簧参数，只需描述你想要的效果即可。

安装

将其添加到你的 Claude Code 技能目录：

# 克隆到技能文件夹
git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

# 或在项目中添加为 git 子模块
git submodule add https://github.com/199-biotechnologies/motion-dev-animations-skill.git .claude/skills/motion-dev-animations

当你在提示词中提及动画、Motion.dev、滚动效果、视差、悬停效果或交互式 UI 时，该技能会自动激活。

快速开始

安装后，使用自然语言与 Claude Code 交互：

"为英雄区域创建淡入上升动画"
"为这个落地页添加视差滚动效果"
"构建一个带悬停上升和阴影效果的卡片组件"
"为这个列表实现拖拽排序"
"为 CTA 按钮添加磁性悬停效果"

Claude Code 会确认你的框架、规划动画策略、生成代码并验证性能。

工作原理

该技能遵循四步工作流程：

  1. 确认 —— 确定你的框架（React 19+、Next.js 15+、Svelte 5+、Astro 4+）、动画类型和设计目标。
  2. 规划 —— 为你的使用场景选择合适的 Motion.dev 模式、弹簧物理和缓动曲线。
  3. 实现 —— 使用 GPU 加速属性（仅限 transform、opacity、filter）生成 TypeScript/JSX 代码，无布局抖动。
  4. 验证 —— 检查 60fps+ 性能、prefers-reduced-motion 支持、键盘导航，以及包体积是否低于 50KB。

该技能使用渐进式加载。核心指令约 2000 个 token，示例、API 参考和模板仅在需要时按需加载。与预先加载所有内容相比，上下文消耗减少了 87%。

动画类型

入场动画

  • 英雄淡入上升 —— Apple 风格的淡入 + 滑入入场效果，适用于落地页
  • 英雄交错 —— 标题、副标题、CTA 的编排序列动画
  • 滚动显现 —— 基于 Intersection Observer 的滚动触发淡入效果

滚动效果

  • 视差层叠 —— 使用 useScroll 和 useTransform 实现多速度深度效果
  • 滚动进度 —— 与滚动位置绑定的阅读进度条

手势交互

  • 卡片悬停 —— 使用 whileHover 实现带阴影的上升效果
  • 磁性按钮 —— CTA 的光标跟随效果
  • 拖拽轮播 —— 使用 drag 约束实现触摸友好的水平滑块

微交互

  • 按钮按压 —— 使用 whileTap 实现触觉点击反馈
  • 切换开关 —— 使用 layout 动画实现平滑状态过渡
  • 加载旋转器 —— 基于弹簧的加载动画

布局动画

  • 列表排序 —— 使用 FLIP 技术实现拖拽排序
  • 手风琴 —— 使用 AnimatePresence 实现平滑展开/收起
  • 标签切换 —— 使用 layoutId 实现共享布局过渡

内容结构

motion-dev-animations-skill/
├── SKILL.md                          # 核心指令（约 2000 个 token）
├── examples/                         # 动画模式（按需加载）
│   ├── hero-fade-up.md               # Apple 风格入场动画
│   ├── scroll-reveal.md              # Intersection Observer 显现效果
│   ├── card-hover.md                 # 悬停上升 + 阴影效果
│   ├── parallax-layers.md            # 多速度视差效果
│   ├── magnetic-button.md            # 光标跟随按钮
│   └── example-config.json           # 示例 motion 配置
├── reference/                        # API 文档（按需加载）
│   ├── api-reference.md              # 完整 Motion.dev API
│   └── spring-physics.md             # 弹簧参数和预设值
├── templates/                        # 起始代码
│   ├── nextjs-page.tsx               # 带动画的完整页面
│   └── component-library.tsx         # 可复用动画组件
├── schema/                           # 验证
│   └── motion-config.schema.json     # 配置的 JSON Schema
└── scripts/                          # 工具
    └── validate_motion_config.py     # 配置验证器

性能标准

本技能生成的每个动画均满足以下目标：

指标 目标 实现方式
帧率 60fps+（理想 120fps） 仅使用 GPU 加速变换
包体积 < 50KB Tree-shaking、代码分割
无障碍访问 完整支持 遵守 prefers-reduced-motion
布局偏移 零偏移 不对宽高进行动画处理
键盘支持 完整支持 焦点状态、键盘导航

框架支持

框架 版本 状态
React 19+ 完整支持
Next.js 15+ 完整支持（App Router）
Svelte 5+ 完整支持
Astro 4+ 完整支持
Vue 3+ 使用 motion-v 包
原生 JS ES2020+ 通过 motion 包

贡献

请参阅 CONTRIBUTING.md 了解贡献指南。简而言之：在 examples/ 中添加示例，在 reference/ 中扩展 API 文档，或在 templates/ 中创建模板。

许可证

MIT