Animata

Overview

Animata is an open-source collection of hand-crafted interaction components and micro-animations built with React and Tailwind CSS. It focuses on elevating user experience through thoughtful, delightful details.

Key Features

• 60+ Micro-Interactions: Animated bento grids, shiny badges, fluid tabs, particle backgrounds, and marquee strips.
• Tailwind Native: Styled purely with Tailwind CSS and Framer Motion primitives.
• Copy-Paste Workflow: Copy clean TypeScript/TSX code directly without heavy npm package dependencies.
• Plug & Play with shadcn/ui: Blends harmoniously with existing shadcn/ui design tokens.

Installation & Quick Start

# Direct copy-paste TSX files into your components/ directory

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

export default function App() {
  return <ShinyButton>Get Started</ShinyButton>;
}

Why Choose Animata?

• Best for: SaaS landing pages, marketing sites, and portfolios seeking high-craft visual polish.
• Not suitable for: Data-heavy tables or plain text-only documentation.