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 │
╰────────────────────────────────────────────────────────────╯
npm install @subhanhq/amicro
# or
yarn add @subhanhq/amicro
# or
pnpm add @subhanhq/amicro# 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| 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 |
- ⚡️ 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.
- Node.js:
v18.0.0or higher - React:
^18.0.0or^19.0.0 - Tailwind CSS:
v3orv4 - Motion:
motionorframer-motion
Created with ❤️ by Syed Subhan
- Twitter: @SubhanHQ
- Email: su2491251@gmail.com
- GitHub: @Subhan-code
- Support: Sponsor on GitHub | Support on Ko-fi
This project is licensed under the MIT License - see the LICENSE file for details.