A micro-interaction motion pattern library for AI agents: 16 production-ready web animation patterns — magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more — with copy-paste code and live demos.
Make my landing page feel alive — add a magnetic CTA button, smooth scroll reveals, and a marquee stats counter.
What you get
- SKILL.md with 16 production-ready web micro-interaction patterns: magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more
- references/ with implementation guides and usage notes for each pattern
- Two live demo pages in examples/ you can open in the browser
- Copy-paste-ready code snippets for real projects
Good fit
- Perfect for landing pages, marketing sites, and portfolios that need delightful, polished motion. Great for designers and developers who want proven interaction patterns instead of building animations from scratch.
Not for
- Not for full 3D/WebGL scenes or game-like physics simulations. Assumes you can add custom CSS and JavaScript to your pages — not a no-code page-builder asset.
- Name
- Micro Interaction UI
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Initial release — v1.0.0. Ships SKILL.md with 16 production-ready web micro-interaction patterns (magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more), references/ with per-pattern implementation guides, and two live demo pages in examples/.
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip micro-interaction-ui-v1.0.0.zip -d ~/.claude/skills/micro-interaction-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 28 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Claymorphism UI
Claymorphism UI
Design websites in the Claymorphism style — puffy inflated 3D surfaces like modeling clay, pastel colors, big rounded corners, triple-layer shadows (soft outer drop + inset top-left highlight + inset bottom-right shade), rounded display type, and springy bouncy motion.
Claude Code · Codex · Cursor · Copilot +3
Emil Kowalski Design Skills
Emil Kowalski Design Skills
Give your coding agent taste. 11 design-engineering skills from Emil Kowalski (ex-Vercel, ex-Linear) — animation decisions, motion review, Apple design principles, and UI polish. MIT-licensed, curated with attribution.
Claude Code · Codex · Cursor · Copilot +3
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3
Vercel-Style UI Design
Vercel-Style UI Design
Teach your AI agent to design like Vercel: monochrome palette, oversized tight typography, hairline borders, subtle gradient glows and grid textures. Ships with design tokens, copy-paste components, and a complete example landing page.
Claude Code · Codex · Cursor · Copilot +1