Hero-animaties, de eerste 5 seconden van elke landing, muted autoplay die het verhaal nog steeds vertelt.
Hero-animaties zijn het moment dat de landingspagina de scroll verdient of niet. We bouwen ze muted-by-default, performance-gebudgeteerd, en kort genoeg om te loopen zonder te irriteren. Lottie voor de brand-vormige motion, motion/react voor de interactieve laag, Spline waar 3D de payload verdient.
Wat we bouwen
Lottie voor de lichte brand-loop
After Effects-composities geëxporteerd via Bodymovin als Lottie JSON. Scherp op elke grootte, themable at runtime, meestal onder 100kb. De hero-loop laadt snel en rendert scherp.
motion/react voor het interactieve stuk
Als de hero reageert op scroll, muisposititie of focus, draagt motion/react de gesture. State-changes voelen echt; layout-animaties blijven performant.
Spline voor 3D als payload zinvol is
3D-scenes via Spline als het merk de bytes verdient. We benchmarken per-pagina Spline-payload tegen de rest van de pagina; als 3D ons over LCP-target duwt, levert op het niet.
Ontworpen om te loopen, geen om te wachten
Hero-motion loopt schoon zonder duidelijke cuts. Gebruikers die 3 seconden later scrollen merken geen restart; de loop-lengte is gevormd om omgeving te voelen, geen zichzelf aan te kondigen.
Performance-budget afgedwongen voor launch
LCP onder 1,5s. INP onder 200ms. CLS onder 0,1. De hero-animatie is hier de meest voorkomende oorzaak van regressie; we meten voor merge.
Statische fallback voor de traagste connecties
Statische poster-image rendert direct; de geanimeerde laag hydrateert eroverheen. Gebruikers op 3G zien het merk; gebruikers op breedband zien de motion.
Waar dit past
Je levert op een landingspagina en de hero is het moment dat de bezoeker scrollt of wegklikt.
Je huidige hero is een stock-pack illustratie of een trage auto-playing video die de pagina tankt.
Je merk heeft een sterke identiteit en de hero moet de motion-taal dragen, geen generieke templates lenen.
Tech stack
- After Effects
- motion/react
- Lottie
- Spline
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