Back to docs
Recipe
Microinteraction patterns
Small moments that make Meridian feel alive. Hover states, loading pulses, and tactile feedback loops that reward every click.
Button pulse
Primary action
Secondary
Scale + shadow lift on hover. 150ms ease-out. Keep it snappy.
Skeleton loader
Tailwind animate-pulse on muted backgrounds. No layout shift when content arrives.
Focus ring
Violet ring on focus. 200ms transition. Never removeoutline without replacing it.
Success pop
License activated
Icon + brief text. Auto-dismiss after 2.5s. Emerald for success, rose for errors.
Rule of thumb: every interaction under 200ms feels instant. 200–400ms needs a loader. Over 400ms needs a progress indicator. Meridian ships with all three baked into the design system.