Skip to content

Subhan-code/Amicro--Micro-transitions-

Repository files navigation

@subhanhq/amicro

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

npm version License GitHub Stars Sponsor


╭──────────────────────── 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


📄 License

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

About

Resources

License

Code of conduct

Contributing

Security policy

Stars

598 stars

Watchers

0 watching

Forks

Releases

No releases published

Sponsor this project

Packages

 
 
 

Contributors

Languages