Amicro — Micro-transitions
github.com/subhan-code/amicro--micro-transitions-- Category
- Developer Tools
- Rank
- No. 1604Tools index
Previous survey · No. 1623 ·
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Coding · Design & Media
- Interfaces
- Web
- Builder
- @SubhanHQ
- GitHub
- 2.6k stars
- Date
About
Amicro is a curated library of premium React micro-interaction and transition components powered by Motion (Framer Motion v12). It lets developers browse, preview, and instantly copy ready-to-use animated button and UI components with one click. It supports dark/light themes and multiple layout preview modes, making it a practical sandbox for polished UI animations.
What it does
A set of animated React pieces you install as source files rather than import from a package. Each one, whether a fanned card spread, a 3D carousel, a cursor-following button, a text reveal or a spinner, is published as a shadcn registry entry, so the shadcn command line writes the TypeScript file into your own components folder and you edit it like your own code. The repository also contains the preview website where you browse and copy them, plus a few small hooks for scroll progress, mouse position, stagger timing and reduced-motion detection.
Why it's ranked here
The distribution choice is the reason to look. Components land in your tree as editable source with one declared dependency, the Motion animation library, and the catalogue is wide: entrance fades and slides, text reveals, hover and cursor effects, scroll-linked reveals, a long run of loaders, and twelve card layouts. It is MIT licensed. The counterweights are real, though: the repository mixes the library with a sponsor-slot storefront, ships no test suite, and several auto-generated entries carry placeholder descriptions.
What's good
Every registry entry is a single self-contained file with a fixed target folder, so adding one touches nothing else in your project. The loader entries are short, readable Motion code; the iOS-style spinner is twelve rotated bars with staggered opacity and nothing more. A reduced-motion hook is included, and the component template adds a motion-reduce class, so accessibility has at least a starting point. The README lists supported ranges plainly: Node 18 or newer, React 18 or 19, Tailwind 3 or 4.
Tradeoffs
The package manifest declares no command entry point and publishes only the built preview site, so the advertised init and add commands on the package name do not match what the manifest ships; the shadcn registry path is the one the files back up. Registry entries declare the older framer-motion package while the showcase imports the newer motion package. Components hardcode Tailwind palette classes, so they assume Tailwind and will need restyling to match a design system. Loaders found automatically get generic titles and descriptions. There is no test script, only a type check.
How to use it well
Use it through the shadcn command line: add the namespaced registry to your shadcn config, then pull individual components by name. Treat each file as a starting point you own, swap the hardcoded colour classes for your theme tokens, and wire the reduced-motion hook into anything that moves a lot. It suits a Tailwind and React app that wants a few polished transitions or a showpiece card spread quickly. It is not a maintained dependency with versioned updates, and it offers nothing outside React.
Technical notes+
package.json points main at the built HTML page in the dist folder, lists only dist, README.md and LICENSE under files, has no bin field, and its scripts are dev, build, lint (tsc --noEmit), sitemap and build:registry, with no test script. scripts/build-registry.ts hardcodes entrance, text, hover, cursor, scroll, loading, hook and lib items, then scans registry/ui/loading for extra .tsx files, deriving a description from a numbered comment or falling back to a generic string; public/r/ios-spinner.json shows that fallback. Hardcoded targets use an @components prefix while registry.json and discovered loaders use a plain components prefix. api/checkout-status.ts verifies Polar sponsor checkouts behind a CORS origin allowlist; src/App.tsx persists sponsor slots in localStorage.
Observed
- License
- MIT
- Language
- TypeScript (React components)
- Distribution
- shadcn registry entries installed as source files
- Runtime dependency
- Motion (registry entries declare framer-motion)
- Styling requirement
- Tailwind CSS 3 or 4
- React support
- React 18 or 19
- CLI entry point
- No bin field in the package manifest
- Tests
- No test script in the package manifest; type check only
Read from README.md, package.json, LICENSE, registry.json, scripts/build-registry.ts, template-component-page/sample-component.tsx, template-component-page/registry-entry.json, public/r/ios-spinner.json, api/checkout-status.ts, src/App.tsx.
What it can do
Preview animated React components live in the browser
Selection of a micro-interaction or transition component from the library → Live rendered animation preview of the selected UI component
Copy ready-to-use component code with one click
Selected animated button or UI component → Clipboard-ready React/TypeScript component code
Toggle between dark and light themes
Theme toggle action by the user → Re-rendered component previews in the selected color theme
Switch between multiple layout preview modes
Layout mode selection by the user → Component previews displayed in the chosen layout arrangement
Browse a curated library of micro-interaction components
User navigation within the app → Filtered and organized list of available animated UI components
Extend the library with custom transition components
Developer-authored React component files added to defined extension points → New custom animated components integrated and browsable within the sandbox
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.