#Developers

Animata：粘贴即用的交互动画和视觉效果库

🔗 GitHub

Animata 是一个免费开源的精选动画库，收集了来自互联网的交互动画和视觉效果，支持无缝复制粘贴到你的项目中。

特点

• 免费开源，手工精选
• 使用 React、Framer Motion 和 Tailwind CSS 构建
• 即用即粘贴
• 可自定义设计

使用方式

无需安装依赖，类似 shadcn/ui，直接复制代码到项目中使用

项目要求

• TailwindCSS（必需）：样式支持
• Framer Motion（可选）：复杂动画
• Lucide Icons/Radix Icons（可选）：图标支持

注意：Animata 不是完整的 UI 库，而是一个可以增强项目设计的动画和效果集合。可以与其他 UI 库或设计系统配合使用（需要配置 TailwindCSS）。

许可证

MIT license。

#GitHub #TailwindCSS #OpenSource #Animation

📮 频道 @AppPie

tailwindcss-animate —— 为 Tailwind CSS 创建优美动画的插件

🔗 GitHub

安装

通过 npm 安装，并在 tailwind.config.js 文件中添加插件：

npm install -D tailwindcss-animate

使用方法

详见 README 中的文档部分。

许可证

MIT license。

#GitHub #TailwindCSS #OpenSource #Animation

📮 频道 @AppPie

#Resources

分享一个精美动画图标库

🔗 GitHub

这是一个开源的动画图标集合，提供流畅的动画图标。使用 Motion 和 Lucide 制作。

使用条款

• 个人和商业项目均可免费使用这些组件
• 教程和演示仅供参考，不得重新分发或转售，请尊重彼此的劳动成果

注意事项

• 这是一个持续进行的项目
• 作者正在不断改进和扩展图标集合，欢迎提供反馈或贡献

开源许可

MIT license。

#GitHub #OpenSource #Icons #Animation

📮 频道 @AppPie

#Developers

NumberFlow: 为 React, Vue 和 Svelte 提供的数字动画组件

🔗 GitHub

这是一个无依赖、可访问且可定制的数字动画组件。当数值发生变化时，组件会自动执行平滑的过渡动画。

特点

• 支持多框架：React、Vue 和 Svelte
• 零依赖：不需要额外安装其他包
• 自动过渡：value 属性变化时自动执行动画
• 可访问性：支持无障碍访问
• 可定制化：支持自定义动画效果

开源许可证

MIT license。

#GitHub #OpenSource #Animation #React #Vue #Svelte

📮 频道 @AppPie​​​​​​​​​​​​​​​​

#Developers

tailwindcss-motion: 为 Tailwind 项目添加简洁强大的动画效果

🔗 GitHub

tailwindcss-motion 是一个为 Tailwind CSS 设计的插件，旨在简化前端动画的创建过程。它提供了一套简单的动画工具集和语法，允许开发者通过预设的动画类或自定义动画来增强用户界面的交互性。

特点

• 简洁的语法设计，无需定义复杂的关键帧
• 提供实用类来内联动画化各个维度
• 包含多种预设动画效果
• 完整的 TypeScript 支持
• 文件体积小，性能高效

扩展工具

Rombo 还提供了 Chrome 扩展，可视化创建动画并导出为 Tailwind 类、纯 CSS 或 Framer Motion 代码。

该插件适用于需要在 Tailwind 项目中添加精美动画效果的开发者，无需学习复杂的动画框架，通过简单的类名组合即可实现专业级动效。

#GitHub #OpenSource #TailwindCSS #Animation

📮 频道 @AppPie