Motion Lab
Seventeen landing pages. Seventeen techniques. One performance budget.
Seventeen landing pages, each built around a different animation technique — five fictional brands and twelve industry templates — and every one of them holding a Core Web Vitals budget while it does it.
Everything behind this film is on this page. Every brand is invented; the engineering is not. Built by Adesh Shukla.
Seventeen pages, seventeen techniques
Five fictional brands, each demonstrating one discipline, and twelve industry templates built to be adopted. Every brand is invented; the engineering is the deliverable.
- 01AetherBrand experienceImage-sequence canvas scrub
- 02VersoBrand experienceKinetic typography
- 03TidepoolBrand experienceHorizontal scroll and parallax
- 04HalcyonBrand experienceSVG storytelling
- 05MonolithBrand experienceScroll-driven WebGL
- 06Copper & RyeRestaurant templateThis week
- 07Keystone RowEstate agency templateEvery room, measured
- 08Cadence ClubGym and coaching templateThe timetable
- 09LedgerlySoftware templatePricing
- 10OffcutRetail and e-commerce templateThe range
- 11NocturneLive music venue templateOn sale now
- 12Meridian RoutesTravel and tours templateDepartures
- 13WheelhouseStudio pottery templateSeconds, with the fault written down
- 14QuoinLetterpress printing templateWhy a hundred costs nearly as much as five hundred
- 15MurmurDrone light shows templateWhat a show costs, and why the second one is cheaper
- 16ColdsetSteel frame building templateWhat it costs and how long you wait
- 17CairnLand survey and drone mapping templateWhat a survey costs
Measured, not claimed
This is your device, right now
A page that scores well and a page that moves well are usually two different pages. Everything here had to be both: every technique on this site was kept only if it survived a throttled mid-range Android, which is why some of them were cut, and why the numbers are published rather than claimed.
The live frame chart is off because this device asked for reduced motion or reported itself as low-powered. The figures below are the ones CI enforces regardless.
- 2.47 s
- Largest Contentful Paintbudget 2.5 s
- 106 ms
- Total Blocking Timebudget 200 ms
- 0.000
- Cumulative Layout Shiftbudget 0.1
- 189 KB
- Route JavaScriptbudget 220 KB