Micro-Animations

A button that instantly changes color on hover feels dead. A button that shifts its background over 200ms feels alive. The difference is imperceptible if you're looking for it and unmistakable if you're not. Micro-animations are the subconscious language of quality.

The 200ms Threshold

Research on human perception puts the sweet spot for UI transitions between 150ms and 300ms. Below 150ms, the change feels instant, no animation perceived. Above 300ms, the interface feels sluggish. The 200ms range is where motion registers as smooth without feeling slow.

In Persephonie, every interactive element lives in this range. Hover backgrounds fade in. Focus rings appear. Active states shift. None of these movements are dramatic. All of them are felt.

The best micro-animation is one you'd miss if it were gone but never consciously notice while it's there.

Emotional Connection

• Smooth transitions signal a crafted, intentional product
• Consistent timing creates a sense of reliability
• Physical-feeling easing curves trigger spatial intuition
• Responsive feedback builds trust in interactivity

One Source of Truth

Every duration and easing curve in Persephonie comes from a single configuration file. Change one number and every animation in the product updates in concert. This isn't just engineering discipline. It's a design principle. The interface should move as one organism, not a collection of independent parts. When timing is unified, the product feels alive. When it's scattered, it feels assembled from spare parts.