Nodlume01
Ripple effect
Expand a translucent circle from the pointer-down origin to connect touch and response.
Clip the ripple to the control and let the state change remain visible after the circle fades.
animation: ripple 450ms ease-out;Micro-interactions guide
Spatial feedback
Advanced UI Micro-Interactions
Spatial and physics-inspired effects can clarify depth, origin, and relationship when they are tied to a real state change. They also cost more attention and rendering work, so they need a stronger reason than ordinary hover or status feedback.
- Earn the motion
- Use spatial effects only when they explain behavior.
- Limit the surface
- Animate one focal element at a time.
- Profile the result
- Check transforms, blur, and shadow on modest devices.
Pattern examples
6 ways to communicate the state change
Hover, focus, press, or toggle the specimens. Each recipe keeps the durable state in semantic markup and uses animation as a supporting layer.
02
3D flip card
Rotate between two related faces when front and back are a meaningful model.
Use an explicit button on production cards; hover-only flipping is inaccessible on touch and can trigger accidentally.
transform-style: preserve-3d;
transition: transform 400ms ease-out;03
Magnetic hover
Pull a small decorative layer toward the pointer while the hit target remains still.
Never move the actual target away from the cursor, and disable the effect on touch or reduced motion.
transform: translate3d(var(--pointer-x), var(--pointer-y), 0);04
Expanding action button
Reveal a short action label beside an icon when extra context becomes useful.
Reserve room or overlay the expansion so nearby controls do not shift under the pointer.
transition: inline-size 220ms ease-out;Revealed section
05
Scroll reveal
Bring content in once as it enters the viewport to guide reading order.
Render content visible by default, then enhance it after JavaScript starts so failure never hides the page.
transition: opacity 300ms ease-out, transform 300ms ease-out;06
Heart pulse
Use one elastic pulse to confirm a favorite or like state.
Persist the selected state with fill, label, or pressed semantics after the pulse ends.
animation: heart-pulse 260ms cubic-bezier(.34, 1.56, .64, 1);Implementation check
Ship the fallback with the effect.
Test keyboard focus, touch, reduced motion, slow work, failure, repeated activation, and the final resting state. A robust interaction remains understandable when every transition is removed.
@media (prefers-reduced-motion: reduce) {
.motion {
animation: none;
transform: none;
transition-duration: 0.01ms;
}
}Continue the reference
Related micro-interaction guides
Compare the neighboring feedback patterns before choosing an effect.
Buttons & formsExplore toggle, search, checkbox, counter, and press micro-interactions with practical timing, accessibility, and CSS examples.Read guideFeedback & validationDesign loading, error, success, copy, notification, and tooltip micro-interactions that confirm actions without relying on motion alone.Read guideStatus & progressUse skeletons, progress bars, spinners, and pulsing dots to communicate loading states and task completion without layout shifts.Read guide
Plan the complete React experience.
Map the components and states around these interactions, then generate the project structure from one visual workspace.