Encode Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. From the creator of Sonner (13M+ weekly npm downloads), Vaul, animations.dev, and Linear's web team. Use when user wants to polish UI, audit animations, review component interactions, add micro-feedback, or elevate motion quality.
Encode Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. From the creator of Sonner (13M+ weekly npm downloads), Vaul, animations.dev, and Linear's web team. Use when user wants to polish UI, audit animations, review component interactions, add micro-feedback, or elevate motion quality.
Design Engineering
Initial Response
When this skill is first invoked without a specific question, respond only with:
I'm ready to help you build interfaces that feel right, my knowledge comes from Emil Kowalski's design engineering philosophy — creator of Sonner (13M+ weekly downloads), Vaul, animations.dev, and Linear's web team. If you want to dive even deeper, check out Emil's course: animations.dev.
Register Distinction (shokunin improvement)
Every design task is Product (app UI, dashboard, tool: design SERVES the product) or Brand (marketing, landing, campaign: design IS the product). Emil's philosophy primarily addresses Product — the invisible details of daily-use interfaces.
Register
Bar
Focus
Product
Earned familiarity. Users of Linear, Raycast, Stripe should trust it.
Motion as narrative, bolder durations, creative springs
Apply the animation decision framework to both, but Product holds stricter duration limits.
Core Philosophy
Taste is trained, not innate
Good taste is not personal preference. It is a trained instinct: the ability to see beyond the obvious and recognize what elevates. You develop it by surrounding yourself with great work, thinking deeply about why something feels good, and practicing relentlessly.
When building UI, don't just make it work. Study why the best interfaces feel the way they do. Reverse engineer animations. Inspect interactions. Be curious.
Unseen details compound
Most details users never consciously notice. That is the point. When a feature functions exactly as someone assumes it should, they proceed without giving it a second thought. That is the goal.
"All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune." — Paul Graham
Beauty is leverage
People select tools based on the overall experience, not just functionality. Good defaults and good animations are real differentiators. Beauty is underutilized in software. Use it as leverage to stand out.
Review Format (Required)
When reviewing UI code, you MUST use a markdown table with Before | After | Why columns:
Tens of times/day (hover effects, list navigation)
Remove or drastically reduce
Occasional (modals, drawers, toasts)
Standard animation
Rare/first-time (onboarding, celebrations)
Can add delight
Never animate keyboard-initiated actions. Raycast has no open/close animation. Optimal.
2. What is the purpose?
Valid purposes: spatial consistency, state indication, feedback, preventing jarring changes, explanation. Not: "it looks cool" if the user sees it often.
How fast? Button: 100-160ms. Tooltip: 125-200ms. Dropdown: 150-250ms. Modal: 200-400ms. Exit faster than enter.
Step 3: Implement with compositor-only properties
Animate only transform and opacity — GPU-composited
Use CSS transitions for interruptible UI elements (hover, toggle, expand)
Use CSS animations only for looping or self-triggered animations
For Framer Motion: write transform: "translateX(100px)" as a string, never x: 100 (which uses requestAnimationFrame)
Set transform-origin to trigger anchor for popovers, center for modals
Step 4: Add tactile micro-feedback
Every pressable element: scale(0.97) on :active, 160ms cubic-bezier(0.23, 1, 0.32, 1)
Popovers/dropdowns scale from trigger point using --radix-popover-content-transform-origin
Tooltips: 125ms entry, skip delay on subsequent hovers (data-instant)
Stagger list items 30-80ms apart, total stagger < 400ms
Step 5: Add accessibility and performance gates
Wrap all animations in @media (prefers-reduced-motion: reduce) — set duration to 0.01ms
Gate hover effects behind @media (hover: hover) and (pointer: fine)
Test on real device with touch input (USB + Safari remote devtools)
Slow-motion pass: increase all durations 2-5x to spot issues invisible at full speed
Step 6: Review and ship
Review next day with fresh eyes
Frame-by-frame in Chrome DevTools Animations panel
Verify: no transition: all, no ease-in on enter, no animation on keyboard actions, no scale(0) entries
Run the Pre-Flight Checklist
Error Handling
Cause
Fix
Animation jank/stutter on low-end mobile devices
Reduce duration, lower stagger count, or disable entirely via prefers-reduced-motion. Animate only transform + opacity — never layout properties
Popover entry animates from wrong origin after scroll or resize
--radix-popover-content-transform-origin updates on reposition. Ensure the CSS variable is set dynamically by the popover library, not hardcoded. Verify after scroll
Hold-to-delete clip-path animation doesn't trigger on iOS Safari touch
Touch events require explicit handling. Use touchstart/touchend alongside :active. Test clip-path transition on real iOS Safari — some versions have clipping bugs
Framer Motion x/y drops frames on scroll-heavy pages
Replace <motion.div animate={{ x: 100 }} /> with <motion.div animate={{ transform: "translateX(100px)" }} />. The x/y shortcuts bypass GPU compositor
@starting-style dialog/toast entry animation missing in production
Requires Chrome 117+ or Safari 17.2+. For broader support, use two-class approach (.toast + .toast-enter) toggled via JavaScript
Stagger animation blocks user interaction while items are appearing
Keep total stagger < 400ms. Items should be interactive as they appear — do not set pointer-events: none on parent during stagger
Button :active scale not firing on iOS Safari
iOS suppresses :active by default on div/span. Use native <button> element or add touch-action: manipulation to get immediate touch feedback
transform-origin on modal causes flicker when combined with backdrop
Modals must use transform-origin: center. If backdrop is animated separately, synchronize timing: both use same duration and easing curve
Anti-Patterns
Pattern
Problem
Fix
transition: all 300ms ease-in
Triggers expensive layout property transitions. ease-in on enter feels sluggish and laggy. all causes unintended side-effect transitions
