Motion demo // Micro-interactions
Pointer, focus and press feedback that makes static CSS feel alive.
Micro-interactions are the layer between layout and motion. Immediate visual response under 100ms perceived latency builds trust and makes the interface feel responsive before any data loads.
<100ms perceived
Consistent language
Documented curves
Act I // Immediate response
Visual response under 100ms makes static HTML feel as responsive as a native app.
The framework uses hover-depth-press, hover-prism and hover-card-stack effects that fire on pointer-enter with GPU-only transitions—no layout reflow, no jank.
<!-- Apply pointer feedback with a single HTML attribute --> <button vl-effect="hover-depth-press">Primary CTA</button> <!-- 3D tilt card following cursor position --> <article vl-effect="hover-prism">...</article> <!-- Lift with sibling stack compression --> <article vl-effect="hover-card-stack">...</article>
All three effects use GPU-only transforms — zero layout reflow, zero JavaScript.
Act II // Interaction language
Buttons, links and cards share the same interaction vocabulary.
Consistent feedback means users learn one mental model: hover lifts, press compresses, focus outlines. Whether the element is a CTA button or a card, the language is identical.
Hover: scale 1.02
Press: scale 0.97
Focus: 2px ring
Transition: 80ms snap
button interaction
[vl-effect~="hover-depth-press"]:hover {
scale: 1.02;
box-shadow: var(--vl-shadow-lg);
}
card interaction
[vl-effect~="hover-depth-press"]:active {
scale: 0.97;
box-shadow: var(--vl-shadow-sm);
}
Act III // Documented curves
Every interaction curve and shadow value is documented alongside the component.
The micro-interactions spec records easing function, duration, shadow delta and scale factor for each interactive state. Designers and developers reference the same source of truth.
Act IV // Applied interactions
Feedback, consistency and documentation make micro-interactions predictable and maintainable.
Respond instantly, use the same language across all interactive elements, then record every value in the spec alongside the component.