Interface-animaties, motion die de UI uitlegt, geen motion voor zichzelf.
Interface-animatie heeft één taak: de state-change van het product leesbaar maken. Goede motion verheldert; slechte vertraagt. We ontwerpen en opleveren de animatie-laag naast het statische design zodat het product bedoeld aanvoelt, geen 'designer voegde een bounce toe'.
Wat we bouwen
Easing + duration als tokens, geen magic numbers
Benoemde easing-curves (`ease-out-quart`, `ease-out-expo`) en duration-tokens (`fast`, `medium`, `slow`) staan in het design system. Engineers refereren tokens; de motion voelt consistent over components zonder dat designers elke PR reviewen.
Imperatieve motion voor interacties, Lottie voor de rest
Interactieve product-motion in code met juiste layout-animaties en presence-handling. Decoratieve motion (hero-loops, loading-states, success-affirmaties) als Lottie-files geëxporteerd uit After Effects. Juiste tool per oppervlak.
Reduced-motion als first-class state
Elke animatie respecteert `prefers-reduced-motion`. Kritische state-change animaties downgraden naar opacity-only crossfades; decoratieve motion wordt helemaal uitgezet. Toegankelijkheid is ingebakken, geen audit later.
Page-transities die niet vechten met de router
Route-change animaties die werken met streaming, server-rendered route-changes. Geen flicker, geen layout shift, geen kapotte back-knop. Animatie draait bovenop het framework, niet ertegen.
Loading-states die het wachten verdienen
Skeleton-schermen in de vorm van de inhoud die laadt. Progress-indicators op operaties die tijd kosten. Optimistische UI op operaties die dat niet doen. Het wachten is gestructureerde informatie, geen generieke spinner.
Animatie-budget afgedwongen in CI
Lighthouse CI trackt Total Blocking Time en INP. Animaties die de main-thread blokkeren falen de build. Het animation-team ziet het budget; niemand levert op een 60kb Lottie die LCP tankt.
Waar dit past
Je product is functioneel af maar voelt statisch; het team zegt al twee kwartalen 'we polishen de motion later'.
Je animaties zijn inconsistent over het product omdat elke engineer easing-waarden op gevoel kiest.
Je motion is zwaar en het performance-team heeft het geflagd maar design wil het niet weghalen.
Tech stack
- After Effects
- Lottie
- motion/react
- Easing Tokens
Wil je dit voor je team?
30 minuten om vast te stellen wat je nodig hebt. Geen pitchdeck, geen verplichtingen. We zeggen je eerlijk of Stacklane past.