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`) leven in het design system. Engineers refereren tokens; de motion voelt consistent over components zonder dat designers elke PR reviewen.
motion/react voor React, Lottie voor declaratief
Interactieve product-motion in motion/react 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 Next.js
Route-change animaties die werken met het streaming-model van de App Router. 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 met een oprichter of ervaren ontwikkelaar. We bepalen wat je nodig hebt en zeggen je eerlijk of Stacklane past.
Plan een gesprekVerwante capabilities