skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

micro-interaction

Implement UI micro-interactions with Framer Motion and modern CSS animation techniques.

52|3|Updated Aug 20, 2026
Search Tags:#accessibility#React#Framer Motion#transitions#micro-interactions#CSS animation#ui motion
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill micro-interaction-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: micro-interaction
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/micro-interaction
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill micro-interaction-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires motion, and includes references (resource) components.

What problem does it solve? Interfaces without motion feedback feel unresponsive and disconnected. This Skill provides concrete patterns for adding functional UI motion — hover/press feedback, toggles, toasts, drawers, list reordering, and shared-element transitions — using Framer Motion (motion/react) or pure modern CSS, with correct timing, easing, and accessibility. ## Core Features & Use Cases - Gesture and spring animations: whileHover/whileTap press feedback, spring tuning (stiffness/damping), and enter/exit animations with AnimatePresence. - Layout and shared-element transitions: the layout prop for reordering and resizing, layoutId for magic-move transitions, and Reorder for drag-to-sort lists. - Pure CSS path: @starting-style for enter animations, transition-behavior: allow-discrete for animating to/from display:none, popover/dialog exit animations, and @property for animatable custom properties. - Use Case: You need an animated like button and a toast stack that slides in and collapses smoothly. The Skill gives you the AnimatePresence popLayout pattern, spring defaults, and a reduced-motion guard, delivered as one standalone HTML file. ## Quick Start Ask the AI to build an animated toggle switch with press feedback and a toast notification as a single standalone HTML file using Framer Motion from CDN.

Frequently Asked Questions about micro-interaction

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate a component mounting and unmounting in React?▼

Wrap conditionally rendered children in AnimatePresence from motion/react and give each child a stable key with initial, animate, and exit props. Use mode="popLayout" for lists and toasts so removed items do not hold layout space while exiting.

How to create a shared-element transition with Framer Motion?▼

Assign the same layoutId to two elements in different components; Framer Motion animates between them as one mounts and the other unmounts. Watch for border-radius and text distortion during scale, and use layout="position" when only position should animate.

Framer Motion vs pure CSS for UI animations?▼

Framer Motion suits gesture-driven, stateful, and layout animations like drag-to-reorder and shared-element moves. Pure CSS with @starting-style and transition-behavior: allow-discrete now handles enter/exit and display toggles with zero JavaScript, ideal for simpler interactions.

Can CSS animate an element to display:none?▼

Yes, modern CSS supports this via transition-behavior: allow-discrete, which keeps the element displayed through its exit transition before flipping display. Combine with @starting-style so the element also animates in on first render; baseline in current Chrome, Edge, and Safari.

Why does my layout animation distort border-radius and text?▼

A plain layout element scales non-uniformly during measurement, distorting border-radius and text. Add layout to direct children that should counter-scale, animate borderRadius and boxShadow as motion values, or restrict to layout="position".

How do I respect prefers-reduced-motion in animations?▼

In CSS, add a media query that reduces animation and transition durations. In Framer Motion, use the useReducedMotion hook or wrap the app in MotionConfig with reducedMotion="user" to strip transform and layout motion while keeping opacity feedback.

Related Skills

Explore More Design & Creative Skills→
H2OSLabsH2OSLabs

frontend-design

Implement production-grade frontend interfaces from design concepts.

Official
Advanced
lucidlabs-hqlucidlabs-hq
2

visual-verify

Capture interactive states and visual snapshots of a running frontend with agent-browser.

Official
Advanced
vmitsarasvmitsaras

accessibility-validation-planner

Plans accessibility validation covering semantics, keyboard, focus, screen readers, and automated checks.

Community
Intermediate
HardyLiu6HardyLiu6

gsap-timeline

Sequence GSAP animations with nested timelines, position parameters, and labels.

Community
Intermediate