项目概述

Amicro 是专为现代化 React 应用打造的高阶微交互（Micro-interactions）与转场动效组件库。项目基于 Motion（Framer Motion）与 Tailwind CSS 构建，深入聚焦前端交互中那些常被忽视却至关重要的细节质感——如精巧的卡片扇形展开（Arc Cards）、磁吸按钮、视差倾斜与流体入场动效。Amicro 完美兼容 shadcn/ui Registry 规范，开发者无需受制于庞大冗余的打包体积，只需单条 CLI 命令即可将纯净且支持按需摇树（Tree-shaking）的源码复制到本地项目中，自由定制所有参数。

核心特性

⚡️ 丝滑硬件加速动效：底层深度结合 Motion/React 弹性物理动画系统（Spring Physics），保证 60fps/120fps 的硬件加速丝滑性能。
📦 零运行时黑盒开箱即用：采用 Copy-and-Paste 代码所有权范式，完全兼容 shadcn CLI，随时通过命令下载单个独立 TSX 组件与预设 Hooks。
🃏 惊艳的高阶卡片交互群（Card Layouts）：内置圆弧卡片扇（Arc 5/7）、线性横向展开（Linear Spread）、时光机卡片堆叠（Time Machine Stack）、3D 轮播画廊（CoverFlow）等 12+ 种极具视觉冲击力的卡片动效组件。
🌗 多主题完美自适应：原生适配浅色与深色模式，色彩对比、阴影层次与光影交互开箱即用。

快速上手与示例代码

# 1. 在项目中初始化 Amicro 配置
npx @subhanhq/amicro@latest init

# 2. 或直接通过 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>
  );
}

技术选型建议与适用场景

非常适合：打造高调性 Landing Page、SaaS 官网主视觉区域、作品集（Portfolio）展示、创意展示卡片群以及对微交互细节有极高要求的数字产品团队。
与同类方案对比：相比于全量大包的重型动效库或繁琐的手写 Framer Motion 代码，Amicro 将复杂的几何弧线计算与状态机封装成了即插即用的组件，结合 shadcn CLI 能够大幅缩短高端视觉的交付周期。

Amicro

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

23rd

Great UI

Rewamp UI