Amicro: sleek React micro-interactions powered by Motion

Amicro is a curated open-source collection of React micro-interactions, transition components, and card layouts built by developer Syed Subhan. It focuses on the subtle, polished animation details that make modern web apps feel tactile and responsive.

Instead of shipping as a bulky, monolithic npm package, Amicro adopts the copy-to-code architecture made popular by shadcn/ui. Every component drops directly into your codebase as plain TSX source files, keeping runtime overhead at absolute zero while giving you complete control over customization.

What you can build with it

Amicro does not overwhelm you with hundreds of generic widgets. Instead, it offers a handpicked set of refined interactive moments that are already tuned with natural spring physics.

For entrance and reveal animations, it includes essentials like fade-in, fade-up, and zoom-in, alongside text-reveal components for polished typography entrances. For interactive cards and actions, there are tactile elements like the tilt-card with hover physics, a smooth magnetic-button, dynamic components like download-button, and stylized layouts like card-arc-5.

Beyond visual elements, Amicro provides utility hooks and animation presets. You can drop in hooks like use-scroll-progress to drive scroll-linked effects, or pull in shared spring configurations via its presets module.

Under the hood, animations are powered by motion/react with full hardware acceleration for buttery smooth 60fps performance. Every element also ships with native dark and light mode styling out of the box.

How to run it

The requirements match standard modern frontend stacks: Node.js 18 or higher, React 18 or 19, Tailwind CSS v3 or v4, and motion or framer-motion.

You can scaffold it quickly using the dedicated Amicro CLI. Running npx @subhanhq/amicro@latest init sets up the configuration in your React, Next.js, or Vite project, after which you can pull specific components like card-arc-5 on demand.

Even better, Amicro plugs seamlessly into the shadcn CLI ecosystem. By adding the @amicro registry URL to your project's components.json file, you can install components directly by name using npx shadcn add @amicro/tilt-card or npx shadcn add @amicro/magnetic-button. You can also fetch components directly from its public GitHub raw endpoints.

The entire project is open-sourced under the MIT license, with source code and component registry available on GitHub.

Why it matters

For indie hackers, agency builders, and frontend engineers already relying on Tailwind CSS and shadcn/ui, Amicro is an easy win. Fine-tuning spring physics and interactive micro-animations is typically tedious and easy to overdo; Amicro solves this by offering tasteful, production-ready motion patterns you can drop in without thinking.

Because it treats components as owned source code rather than black-box dependencies, there is no risk of bundle bloat or dependency drift. Even if you only ever grab a single magnetic button or card transition, it elevates your user interface without any recurring maintenance cost.