@subhanhq/amicro

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

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

⚡️ Quick Start

Installation

bash
npm install @subhanhq/amicro# oryarn add @subhanhq/amicro# orpnpm add @subhanhq/amicro

CLI Command Usage

bash
# 1. Initialize configuration in your React / Next.js / Vite projectnpx @subhanhq/amicro@latest init
# 2. Add individual components directly to your codebasenpx @subhanhq/amicro@latest add download-button
# 3. Add card interaction componentsnpx @subhanhq/amicro@latest add card-arc-5

🎨 shadcn/ui Registry Integration

You can add Amicro motion primitives, custom hooks, and spring presets directly to your project using the shadcn CLI!

1. Direct URL Installation

You can install any component directly by referencing its public raw URL:

bash
npx shadcn add https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/ui/fade-in.json

2. Namespaced Registry Mapping (Recommended)

Add the @amicro namespace to the registries field in your project's components.json:

json
{  "registries": {    "@amicro": "https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/{name}.json"  }}

Now, you can install any component, hook, or utility directly by name:

bash
# Install entrance transition components (placed under components/amicro/)npx shadcn add @amicro/fade-innpx shadcn add @amicro/fade-upnpx shadcn add @amicro/zoom-in
# Install hover & text componentsnpx shadcn add @amicro/tilt-cardnpx shadcn add @amicro/magnetic-buttonnpx shadcn add @amicro/text-reveal
# Install hooks & utilitiesnpx shadcn add @amicro/use-scroll-progressnpx shadcn add @amicro/presets

💻 Card Components & CLI Commands

ComponentDescriptionCLI Command
ARC (5 Cards)Fanned card layout forming a neat curved arc with 5 itemsnpx @subhanhq/amicro@latest add card-arc-5
ARC (7 Cards)Expanded card arc layout accommodating 7 items cleanlynpx @subhanhq/amicro@latest add card-arc-7
Long ARC (5 Cards)Wide, sweeping card arc extending translations laterallynpx @subhanhq/amicro@latest add card-long-arc-5
Linear SpreadSlides cards horizontally in a linear row without rotationsnpx @subhanhq/amicro@latest add card-linear-spread
Corner FanFans elements radially from a fixed bottom-left origin anchornpx @subhanhq/amicro@latest add card-corner-fan
Stamp ArcPerforated stamp cards with dynamic arc, gap, and offset controlsnpx @subhanhq/amicro@latest add card-stamp-arc
Cascade StaggerDeploys cards vertically and staggered in a diagonal cascadenpx @subhanhq/amicro@latest add card-cascade-stagger
Scatter Desk DealScatters cards into an overlapping dealt hand layout on hovernpx @subhanhq/amicro@latest add card-scatter-spread
Wheel Radial FanFans cards outward in a radial semi-circle around center anchornpx @subhanhq/amicro@latest add card-wheel-fan
Interactive Carousel3D motion carousel with dot indicators and prev/next controlsnpx @subhanhq/amicro@latest add card-carousel
CoverFlow CarouselPremium 3D CoverFlow carousel displaying cards along perspective pathnpx @subhanhq/amicro@latest add card-cover-flow
Time Machine StackApple-style perspective depth card stack with timeline scrubbernpx @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:
  • Email:
  • GitHub:
  • Support: |

📄 License

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