A page can be correct and still feel dead. The layout works, the copy is fine, the buttons are where they should be. It still reads as a template because nothing responds when you touch it. Amicro is a set of ready-made micro-interactions that fixes that feeling in an afternoon.
What Amicro actually does
Amicro is an open source collection of micro-interactions for the web. Each one is a small, self-contained piece of motion: a button that glows under the cursor, a card that lifts on hover, a heading that slides into place when you scroll to it, a cursor that stays glued to a magnetic element. You pick the effect you want, copy the snippet, and drop it into the page you already have.
There is no framework to adopt and no build step to add. The effects run on CSS and a little vanilla JavaScript, so they work inside a Next.js app, a plain HTML file, a Webflow export, or whatever your AI assistant generated last week. The code lives on GitHub and every effect has a live preview at amicro.vercel.app, so you can test the motion before you commit to it.
Why micro-interactions decide how a page feels
Micro-interactions are the small responses a page gives back when someone acts on it. A button darkens as the cursor reaches it. A form field glows when it takes focus. A section fades up as it enters the viewport. None of them change what the product does. All of them change whether it feels alive or inert.
The difference shows up in how much people trust the page. Motion signals that the interface heard the click, that the state changed, that the thing under the cursor is the thing you meant to press. A page with none of that feels broken in a way users cannot name. They do not file a bug. They just leave.
Most designers know this. The reason micro-interactions still get skipped is cost. Writing them by hand means touching requestAnimationFrame, transition timing, and reduced-motion fallbacks for every small effect. Amicro removes that cost by handing you the effects already written.
What ships in the box
The collection covers the effects landing pages reach for most:
- ❶ Hover states that glow, lift, or tilt a card as the cursor passes over it
- ❷ Magnetic buttons that pull toward the pointer and snap back when it leaves
- ❸ Scroll reveals that fade and slide content into view as it enters the viewport
- ❹ Text effects that animate a headline on load or on hover
- ❺ Cursor effects that add a soft trail or a blending dot on desktop
Each effect is isolated. You take the one you need and leave the rest. Nothing pulls in a shared runtime, and removing an effect is as easy as deleting the snippet you pasted.
How to add one in five minutes
The workflow is short enough to do between two other tasks:
- ❶ Open the live demo and find the effect that fits the section you have in mind
- ❷ Copy the HTML, the CSS, and the small script for that effect
- ❸ Paste them into your component and point the class names at your own elements
- ❹ Adjust the timing values until the motion matches the pace of the rest of the page
If you build with an AI assistant, the snippet is also the prompt. Paste the effect into the chat, describe which element it should wrap, and let the model do the wiring. The effect is plain CSS and JS, so the assistant reads it cleanly and generates working code on the first pass.
Motion without the performance tax
The usual objection to adding motion is weight. Animation libraries can drag in hundreds of kilobytes and a render loop that runs on every frame. Amicro avoids that by staying close to the platform.
The effects lean on CSS transitions and transforms, which the browser can hand to the GPU. The JavaScript is limited to the few cases where a pointer position or a scroll threshold has to be read. When a section is off screen, nothing runs. On a mid-range phone the page keeps its scroll speed, and the motion still reads as smooth.
Accessible by default
Motion is not welcome for everyone. Some people get dizzy from parallax and large movement, and their operating system already tells your page to tone it down. A good micro-interaction respects that signal.
Amicro checks the prefers-reduced-motion setting before it animates. When a visitor has that preference on, the effects fall back to a static state instead of playing. The page still looks finished. It just stops moving. That check is built into the snippets, so you do not have to remember it for each one you paste.
Frequently asked questions
Do I need React to use Amicro?
No. The effects are plain CSS and vanilla JavaScript. React, Vue, and Next.js projects can use them, and so can a static HTML page. You paste the snippet wherever the element lives.
Will the effects slow my page down?
They use CSS transitions and transforms, so the browser can offload the work to the GPU. Most effects only run while the element is on screen and interacting. The heavier cursor effects are desktop-only by design.
Can I mix several effects on one page?
Yes. Each effect is independent and scoped to the element you apply it to. Add as many as the page can carry without competing. A good rule is one motion idea per section.
Is it really free?
Yes. The code is open source on GitHub. You read it, fork it, and ship it in personal or commercial work without a license fee.
Why it belongs in your build
You want the page to feel designed, not generated. Amicro gets you there by giving the interface a set of small, believable responses that cost almost nothing to add. Grab the effect that fits, paste it, tune the timing, and watch the page stop feeling flat.
For a solo builder shipping fast with AI, that is the useful part: real motion without writing animation code from scratch. When you want the static design underneath that motion to hold up, our free Figma resources and design and code kits are built for the same ship-it-yourself workflow.
.webp)
