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.
Plan een gesprek