Микро-интеракции

Design an interface where micro-interactions carry the personality: buttons that compress 2% and bounce back on press, a like-icon that bursts into 5-6 particles, inputs whose borders glow and labels float up on focus, a success state where the submit morphs into a checkmark circle, hover cards lifting with shadow growth, toggle switches with springy overshoot (cubic-bezier(0.34,1.56,0.64,1)). Each animation 150-400ms, meaningful (confirms, guides, or delights) and interruptible. Dark neutral canvas (#0f1115) with a mint signal color (#34d399) so feedback reads instantly. Avoid: decoration-only motion, anything over 500ms on frequent actions, animating layout properties (stick to transform/opacity). Build an original, complete composition around the actual business and its visitor task. Use the live demonstration as a visual reference, not a universal section template. Lead with specific objects, useful content and appropriate photography. Use supplied real project imagery; label fictional concepts and generated imagery honestly. Never invent clients, testimonials, awards, usage counts or results. Give every visible control a useful outcome and an accessible name. Use deliberate motion for spatial relationships and state changes; support keyboard, touch and prefers-reduced-motion. Verify desktop and mobile layouts, image loading, contrast and form states. Avoid generic AI slogans, rhetorical em dashes, arbitrary decorative badges and repetitive three-card sections.