Amicro--Micro-transitions-

Open source

@subhanhq/amicro A curated collection of premium React micro-interactions, transition components, and card layouts powered by Motion. --- t…

1.3K stars0 likes2 views

Website GitHub

About

@subhanhq/amicro A curated collection of premium React micro-interactions, transition components, and card layouts powered by Motion. --- t…

@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

bash

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

CLI Command Usage

bash

# 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

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-in
npx shadcn add @amicro/fade-up
npx shadcn add @amicro/zoom-in

# Install hover & text components
npx shadcn add @amicro/tilt-card
npx shadcn add @amicro/magnetic-button
npx shadcn add @amicro/text-reveal

# Install hooks & utilities
npx shadcn add @amicro/use-scroll-progress
npx shadcn add @amicro/presets

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	An interactive arc-based 3D motion carousel featuring smooth dot indicators and dynamic prev/next controls, inspired by vivi	`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.