Amicro

Overview

Amicro is a curated collection of premium React micro-interactions, transition primitives, and creative card layouts powered by Motion and Tailwind CSS. Designed to elevate web interfaces with tactile, delightful details, Amicro focuses on the craft of subtle interface gestures—from graceful card arcs and magnetic buttons to tilt cards and spring-driven entrance sequences. Distributed via its dedicated CLI and fully compatible with the shadcn/ui registry workflow, it grants teams complete code ownership with zero runtime bloat.

Key Features

• Fluid Spring Physics: Powered by modern motion/react, delivering butter-smooth, hardware-accelerated micro-transitions tuned for 60fps+ fluidity.
• Copy-to-Code Ownership: Follows the shadcn model. Every component installs directly as editable TypeScript and Tailwind code into your repository.
• Showcase Card Architecture: Features 12+ creative card layout presets including Arc Fans, Cascade Staggers, Apple-style Time Machine Stacks, and 3D CoverFlow carousels.
• Theme & Dark Mode Ready: Meticulously balanced colors, shadows, and hover states designed to seamlessly blend into light and dark interfaces.

Installation & Quick Start

# Initialize Amicro configuration
npx @subhanhq/amicro@latest init

# Or install individual components via shadcn CLI
npx shadcn add @amicro/fade-up
npx shadcn add @amicro/magnetic-button
npx shadcn add @amicro/card-arc-5

import React from 'react';
import { CardArc5 } from '@/components/amicro/card-arc-5';
import { MagneticButton } from '@/components/amicro/magnetic-button';

export function ShowcaseSection() {
  const cards = [
    { id: 1, title: 'Fluid Motion', tag: 'Spring' },
    { id: 2, title: 'Zero Bloat', tag: 'Clean' },
    { id: 3, title: 'Shadcn Ready', tag: 'CLI' },
    { id: 4, title: 'Responsive', tag: 'Tailwind' },
    { id: 5, title: 'Dark Mode', tag: 'Theme' },
  ];

  return (
    <section className="flex flex-col items-center py-16 gap-8">
      <CardArc5 items={cards} />
      <MagneticButton strength={0.4} className="px-6 py-2.5 rounded-xl bg-foreground text-background font-medium">
        Explore Amicro
      </MagneticButton>
    </section>
  );
}

Why Choose Amicro?

1. Interactive Delight: Deliver memorable, high-craft digital experiences without writing hundred-line geometry and spring calculations from scratch.
2. Modular Architecture: Adopt only the specific cards, gestures, or transition hooks your project needs, keeping production bundles lean and transparent.