Animata

项目概述

Animata 是一套专注于提升现代产品交互“惊喜感（Delight）”的开源动效组件库。全量基于 React 与 Tailwind CSS 构建，提供了包含光影反射按钮、动态便当盒网格（Bento Grid）与跑马灯等丰富微动效。

核心特性

• 60+ 款高品质微交互资产：涵盖流体动态标签卡、发光卡片、粒子光晕背景与动态数字看板。
• ⚡️ Tailwind 原生与极简拷贝：采用源码拷贝（Copy-Paste）工作流，不引入多余第三方包锁死。
• 无缝集成 shadcn/ui：与现代化 Design Tokens 调色板完美融合，开箱即显高级感。
• 流畅 60fps 动效性能：基于 Framer Motion 与 CSS GPU 硬件加速，运行极其平滑。

快速上手与示例代码

# 直接将 TSX 源码拷贝至 components/ 目录中使用

import ShinyButton from '@/components/animata/button/shiny-button';

export default function Demo() {
  return <ShinyButton>立即开启高光体验</ShinyButton>;
}

技术选型建议与适用场景

• 非常适合：现代 SaaS 营销主页、独立出海产品落地页、设计师作品集及追求细节品味的前端界面。
• 不适用场景：对动效零容忍的重度数据表格与纯文本业务控制台。