[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-95096":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":14,"stars30d":14,"stars90d":13,"forks30d":13,"starsTrendScore":14,"compositeScore":15,"rankGlobal":8,"rankLanguage":8,"license":16,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":8,"pushedAt":8,"updatedAt":21,"readmeContent":22,"aiSummary":8,"trendingCount":13,"starSnapshotCount":13,"syncStatus":14,"lastSyncTime":23,"discoverSource":24},95096,"Monocharts","Subhan-code\u002FMonocharts","Subhan-code",null,"TypeScript",105,7,101,0,2,40.91,"MIT License",false,"main",true,[],"2026-08-24 04:01:23","# @subhanhq\u002Famicro\n\nA curated collection of premium React micro-interactions, transition components, and card layouts powered by **Motion**.\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@subhanhq\u002Famicro?style=for-the-badge&color=000000&logo=npm&logoColor=white)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@subhanhq\u002Famicro)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002FSubhan-code\u002FAmicro--Micro-transitions-?style=for-the-badge&color=000000&logo=opensourceinitiative&logoColor=white)](https:\u002F\u002Fgithub.com\u002FSubhan-code\u002FAmicro--Micro-transitions-\u002Fblob\u002Fmain\u002FLICENSE)\n[![GitHub Stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FSubhan-code\u002FAmicro--Micro-transitions-?style=for-the-badge&color=000000&logo=github&logoColor=white)](https:\u002F\u002Fgithub.com\u002FSubhan-code\u002FAmicro--Micro-transitions-\u002Fstargazers)\n[![Sponsor](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSponsor%20%E2%9D%A4%EF%B8%8F-000000?style=for-the-badge&logo=github&logoColor=white)](https:\u002F\u002Fgithub.com\u002Fsponsors\u002FSubhan-code)\n\n---\n\n```text\n╭──────────────────────── Amicro CLI ────────────────────────╮\n│ npx @subhanhq\u002Famicro@latest init     initialize project    │\n│ npx @subhanhq\u002Famicro@latest add      add UI components     │\n╰────────────────────────────────────────────────────────────╯\n```\n\n---\n\n## ⚡️ Quick Start\n\n### Installation\n\n```bash\nnpm install @subhanhq\u002Famicro\n# or\nyarn add @subhanhq\u002Famicro\n# or\npnpm add @subhanhq\u002Famicro\n```\n\n### CLI Command Usage\n\n```bash\n# 1. Initialize configuration in your React \u002F Next.js \u002F Vite project\nnpx @subhanhq\u002Famicro@latest init\n\n# 2. Add individual components directly to your codebase\nnpx @subhanhq\u002Famicro@latest add download-button\n\n# 3. Add card interaction components\nnpx @subhanhq\u002Famicro@latest add card-arc-5\n```\n\n---\n\n\n## 🎨 shadcn\u002Fui Registry Integration\n\nYou can add **Amicro** motion primitives, custom hooks, and spring presets directly to your project using the shadcn CLI!\n\n### 1. Direct URL Installation\nYou can install any component directly by referencing its public raw URL:\n```bash\nnpx shadcn add https:\u002F\u002Fraw.githubusercontent.com\u002FSubhan-code\u002FAmicro--Micro-transitions-\u002Fmain\u002Fregistry\u002Fui\u002Ffade-in.json\n```\n\n### 2. Namespaced Registry Mapping (Recommended)\nAdd the `@amicro` namespace to the `registries` field in your project's `components.json`:\n```json\n{\n  \"registries\": {\n    \"@amicro\": \"https:\u002F\u002Fraw.githubusercontent.com\u002FSubhan-code\u002FAmicro--Micro-transitions-\u002Fmain\u002Fregistry\u002F{name}.json\"\n  }\n}\n```\nNow, you can install any component, hook, or utility directly by name:\n```bash\n# Install entrance transition components (placed under components\u002Famicro\u002F)\nnpx shadcn add @amicro\u002Ffade-in\nnpx shadcn add @amicro\u002Ffade-up\nnpx shadcn add @amicro\u002Fzoom-in\n\n# Install hover & text components\nnpx shadcn add @amicro\u002Ftilt-card\nnpx shadcn add @amicro\u002Fmagnetic-button\nnpx shadcn add @amicro\u002Ftext-reveal\n\n# Install hooks & utilities\nnpx shadcn add @amicro\u002Fuse-scroll-progress\nnpx shadcn add @amicro\u002Fpresets\n```\n\n---\n\n## 💻 Card Components & CLI Commands\n\n| Component | Description | CLI Command |\n| :--- | :--- | :--- |\n| **ARC (5 Cards)** | Fanned card layout forming a neat curved arc with 5 items | `npx @subhanhq\u002Famicro@latest add card-arc-5` |\n| **ARC (7 Cards)** | Expanded card arc layout accommodating 7 items cleanly | `npx @subhanhq\u002Famicro@latest add card-arc-7` |\n| **Long ARC (5 Cards)** | Wide, sweeping card arc extending translations laterally | `npx @subhanhq\u002Famicro@latest add card-long-arc-5` |\n| **Linear Spread** | Slides cards horizontally in a linear row without rotations | `npx @subhanhq\u002Famicro@latest add card-linear-spread` |\n| **Corner Fan** | Fans elements radially from a fixed bottom-left origin anchor | `npx @subhanhq\u002Famicro@latest add card-corner-fan` |\n| **Stamp Arc** | Perforated stamp cards with dynamic arc, gap, and offset controls | `npx @subhanhq\u002Famicro@latest add card-stamp-arc` |\n| **Cascade Stagger** | Deploys cards vertically and staggered in a diagonal cascade | `npx @subhanhq\u002Famicro@latest add card-cascade-stagger` |\n| **Scatter Desk Deal** | Scatters cards into an overlapping dealt hand layout on hover | `npx @subhanhq\u002Famicro@latest add card-scatter-spread` |\n| **Wheel Radial Fan** | Fans cards outward in a radial semi-circle around center anchor | `npx @subhanhq\u002Famicro@latest add card-wheel-fan` |\n| **Interactive Carousel** | An interactive arc-based 3D motion carousel featuring smooth dot indicators and dynamic prev\u002Fnext controls, inspired by vivi | `npx @subhanhq\u002Famicro@latest add card-carousel` |\n| **CoverFlow Carousel** | Premium 3D CoverFlow carousel displaying cards along perspective path | `npx @subhanhq\u002Famicro@latest add card-cover-flow` |\n| **Time Machine Stack** | Apple-style perspective depth card stack with timeline scrubber | `npx @subhanhq\u002Famicro@latest add card-time-machine` |\n\n---\n\n## ✨ Key Features\n\n- ⚡️ **Clean Micro-transitions**: Hardware-accelerated animations powered by `motion\u002Freact`.\n- 📦 **Zero Runtime Overhead**: Copy-to-code components copy TSX source directly into your codebase.\n- 🌓 **Dark & Light Mode**: Tailored for both dark and light UI palettes.\n- 🎨 **Harmonious Aesthetics**: Designed to feel fluid, responsive, and state of the art.\n\n---\n\n## 🛠️ Prerequisites & Requirements\n\n- **Node.js**: `v18.0.0` or higher\n- **React**: `^18.0.0` or `^19.0.0`\n- **Tailwind CSS**: `v3` or `v4`\n- **Motion**: `motion` or `framer-motion`\n\n---\n\n## 👤 Author & Support\n\nCreated with ❤️ by **Syed Subhan**\n\n- **Twitter**: [@SubhanHQ](https:\u002F\u002Fx.com\u002FSubhanHQ)\n- **Email**: [su2491251@gmail.com](mailto:su2491251@gmail.com)\n- **GitHub**: [@Subhan-code](https:\u002F\u002Fgithub.com\u002FSubhan-code)\n- **Support**: [Sponsor on GitHub](https:\u002F\u002Fgithub.com\u002Fsponsors\u002FSubhan-code) | [Support on Ko-fi](https:\u002F\u002Fko-fi.com\u002Fsubhanuddin)\n\n---\n[![RepoStars](https:\u002F\u002Frepostars.dev\u002Fapi\u002Fembed?repo=Subhan-code%2FAmicro--Micro-transitions-&theme=light)](https:\u002F\u002Frepostars.dev\u002F?repos=Subhan-code%2FAmicro--Micro-transitions-&theme=light)\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n","2026-08-21 02:30:08","CREATED_QUERY"]