LogoClawIndex
案例技能关于
LogoClawIndex

awesome-react-animations - 构建流畅且由合成器驱动的 React 动画

指导 React 和 Next.js 动画的实现、审查与修复,以保持流畅性能、合成器友好动效并支持减少动态效果。

标签

更新于: 2026-09-28
ReactNext.js动画性能Framer MotionCSS无障碍

能力

将逐帧值移出 React 状态使用 transform 和 opacity 动画使用 Framer Motion 原语配置减少动态效果行为

典型输入

React 或 Next.js 代码库动画需求目标交互行为

典型输出

动画实现指导React 或 CSS 动画代码动画审查结果

该技能可以做什么

  • 将逐帧值移出 React 状态
  • 使用 transform 和 opacity 动画
  • 使用 Framer Motion 原语
  • 配置减少动态效果行为
  • 选择 CSS 或 Framer Motion
  • 优化动画代码包
  • 验证实际渲染结果

输入

  • React 或 Next.js 代码库
  • 动画需求
  • 目标交互行为
  • 性能约束
  • 无障碍要求

输出

  • 动画实现指导
  • React 或 CSS 动画代码
  • 动画审查结果
  • 减少动态效果行为

要求

  • React 或 Next.js 应用
  • 支持 CSS 动画的浏览器
  • 使用相关原语时需要 Framer Motion

来源

  • 规范: SKILL.md

ClawIndex

OpenClaw Skills 与 Use Case 索引

ClawIndex 是一个生态驱动的 OpenClaw Skills 与真实 Use Case 索引站。

索引

Skills·
Cases

Meta

关于·
声明·
邮箱·
GitHub
© 2026 ClawIndex 保留所有权利。