@subhanhq/amicro

A curated collection of premium React micro-interactions, transition components, and card layouts powered by Motion.

╭──────────────────────── Amicro CLI ────────────────────────╮
│ npx @subhanhq/amicro@latest init     initialize project    │
│ npx @subhanhq/amicro@latest add      add UI components     │
╰────────────────────────────────────────────────────────────╯

⚡️ Quick Start

Installation

npm install @subhanhq/amicro
# or
yarn add @subhanhq/amicro
# or
pnpm add @subhanhq/amicro

CLI Command Usage

# 1. Initialize configuration in your React / Next.js / Vite project
npx @subhanhq/amicro@latest init

# 2. Add individual components directly to your codebase
npx @subhanhq/amicro@latest add download-button

# 3. Add card interaction components
npx @subhanhq/amicro@latest add card-arc-5

💻 Card Components & CLI Commands

| Component | Description | CLI Command | | :--- | :--- | :--- | | ARC (5 Cards) | Fanned card layout forming a neat curved arc with 5 items | npx @subhanhq/amicro@latest add card-arc-5 | | ARC (7 Cards) | Expanded card arc layout accommodating 7 items cleanly | npx @subhanhq/amicro@latest add card-arc-7 | | Long ARC (5 Cards) | Wide, sweeping card arc extending translations laterally | npx @subhanhq/amicro@latest add card-long-arc-5 | | Linear Spread | Slides cards horizontally in a linear row without rotations | npx @subhanhq/amicro@latest add card-linear-spread | | Corner Fan | Fans elements radially from a fixed bottom-left origin anchor | npx @subhanhq/amicro@latest add card-corner-fan | | Stamp Arc | Perforated stamp cards with dynamic arc, gap, and offset controls | npx @subhanhq/amicro@latest add card-stamp-arc | | Cascade Stagger | Deploys cards vertically and staggered in a diagonal cascade | npx @subhanhq/amicro@latest add card-cascade-stagger | | Scatter Desk Deal | Scatters cards into an overlapping dealt hand layout on hover | npx @subhanhq/amicro@latest add card-scatter-spread | | Wheel Radial Fan | Fans cards outward in a radial semi-circle around center anchor | npx @subhanhq/amicro@latest add card-wheel-fan | | Interactive Carousel | 3D motion carousel with dot indicators and prev/next controls | npx @subhanhq/amicro@latest add card-carousel | | CoverFlow Carousel | Premium 3D CoverFlow carousel displaying cards along perspective path | npx @subhanhq/amicro@latest add card-cover-flow | | Time Machine Stack | Apple-style perspective depth card stack with timeline scrubber | npx @subhanhq/amicro@latest add card-time-machine |

✨ Key Features

• ⚡️ Clean Micro-transitions: Hardware-accelerated animations powered by motion/react.
• 📦 Zero Runtime Overhead: Copy-to-code components copy TSX source directly into your codebase.
• 🌓 Dark & Light Mode: Tailored for both dark and light UI palettes.
• 🎨 Harmonious Aesthetics: Designed to feel fluid, responsive, and state of the art.

🛠️ Prerequisites & Requirements

• Node.js: v18.0.0 or higher
• React: ^18.0.0 or ^19.0.0
• Tailwind CSS: v3 or v4
• Motion: motion or framer-motion

👤 Author & Support

Created with ❤️ by Syed Subhan

• Twitter: @SubhanHQ
• Email: [email protected]
• GitHub: @Subhan-code
• Support: Sponsor on GitHub | Support on Ko-fi

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.