Jake Young
Motion is the quickest way to make a website feel expensive, and the quickest way to make it feel cheap. A slow reveal on a new laptop reads as craft. The same reveal stuttering on a two year old phone, while the headline waits to appear, reads as a template trying too hard. Visitors can’t name the difference. They feel it in the first second.
Generative video has raised the stakes. Anyone can now produce a moody product loop in minutes, so motion is everywhere, and most of it ships with no budget, no system and no thought for the phone in someone’s hand. The sites that still feel premium treat every movement as a design decision with a job and an engineering decision with a cost, and they measure that cost on the worst device their visitors own.
The Worst Frame Sets the Impression
Google assesses Core Web Vitals at the 75th percentile of real page loads, so a quarter of your visits are worse than the number you report. A page passes when Largest Contentful Paint (LCP) is 2.5 seconds or less, Interaction to Next Paint (INP) is 200 milliseconds or less, and Cumulative Layout Shift (CLS) is 0.1 or less.
INP replaced First Input Delay in 2024, and it changed what motion costs. The old metric timed only the first interaction. INP watches every tap, click and key press across the visit, so a scroll library that keeps the main thread busy now shows up in the score.
The Four Budgets
Every moving thing on a page spends from four budgets at once, and every proposed animation has to justify what it spends.
Bytes: what it costs to download, and when
Nothing that moves may compete with the LCP element for bandwidth. On our own site, every 3D loop waits until the page has loaded and the browser is idle, then loads only when it’s within about one screen of the viewport. Phones get a 540 pixel file.
Main thread: what it costs to run
JavaScript running during an animation competes with input handling, which is exactly what INP measures. Google treats any task over 50 milliseconds as a long task, and a scroll handler that reads layout and writes styles on every event can produce them continuously.
Frames: what it costs to paint
Google’s guidance is to animate only transform and opacity, which the browser handles at the compositing stage without recalculating layout, and to use will-change sparingly. Every promoted layer costs GPU memory, and too many stutter on exactly the devices you wanted to impress.
Attention: what it costs the visitor
Our rule is one focal movement per screen. Two things moving at once compete for the eye, and people resolve the conflict by ignoring both.
Where Motion Breaks Core Web Vitals
The most common self inflicted wound is the fading hero. LCP ignores elements with an opacity of 0, so a headline that fades in from invisible doesn’t count until the animation paints it. If the fade waits for a JavaScript bundle, LCP now includes the download, the parse and the delay. Keep the LCP element visible in the first paint and animate something secondary.
For a video hero, LCP uses the poster image or the first frame, whichever arrives first. That makes the poster your LCP image: size it for the viewport, serve a modern format, preload it, and never lazy load it.
Layout shift comes from animating the wrong properties. Changing top, left, width or height counts against CLS, while transform doesn’t. Shifts within 500 milliseconds of a tap are excused, but scrolling isn’t input, so a section that grows as it scrolls into view shifts everything below it on your score.
Interaction cost comes from JavaScript animation, so move what you can to CSS. Scroll driven animations, using animation-timeline with scroll() and view(), ship in Chromium browsers and Safari 26, and Safari 26.4 runs them on the compositor thread, where they stay smooth while the main thread is busy.
Choosing the Medium
We pick the cheapest medium that can carry the idea. CSS and the Web Animations API handle state changes, reveals, feedback and page transitions. Cross document view transitions, which animate between two separate pages with a few lines of CSS, work in Chrome and Edge 126 and Safari 18.2. They cost almost nothing and can’t do organic movement or real depth.
Lottie and Rive suit illustration, icon motion and interface diagrams, with small files that scale to any size. The cost is in the runtime. A Lottie player updates the page from JavaScript every frame, so a file with hundreds of layers can cost more per frame than a video of the same thing.
Video covers anything photographic or physically lit, and because decoding runs on dedicated hardware, a loop is usually the cheapest way to show rendered 3D.
Real time 3D with WebGL or WebGPU is for moments where the visitor controls the thing: a configurator, an object they can turn. It costs the most in every budget, so the scene loads after the page is interactive and starts from a still that matches its first frame. If the camera path is fixed, render it to video instead.
Walkthrough: Shipping a Transparent 3D Loop
Transparent video lets a rendered object float on any background, and no single format plays it everywhere. Safari supports HEVC with an alpha channel, which Apple introduced in 2019. Chrome and Firefox support VP9 with alpha in WebM, and Safari plays VP9 but ignores its alpha. So every loop ships twice.
First, decide premultiplication before you encode. Render a lossless master with alpha, then settle whether the colour is straight or premultiplied, because encoders and decoders disagree. Apple’s WWDC session on HEVC with alpha recommends premultiplied as the default, and we learned why: a straight alpha file played on an iPhone showed soft glows and shadow edges blown out toward white.
Second, encode both formats: VP9 through ffmpeg’s libvpx-vp9 encoder with the yuva420p pixel format, and HEVC through Apple’s VideoToolbox encoder or Compressor. Expect the HEVC file to be heavier. In Jake Archibald’s comparison, the same clip was 1.1 MB as VP9 and 3.4 MB as HEVC.
Third, prove the alpha survived. Some decoders drop it without warning, ffmpeg’s built in VP9 decoder among them. Decode a frame from every output and measure the mean alpha. A reading of 255 means fully opaque, the alpha is gone, and the build should stop.
Fourth, order the sources. List the HEVC file first with codecs set to hvc1, then the WebM, so Safari takes the first and other browsers skip to the second. Test a Chromium browser with hardware HEVC decoding as well, because one that decoded HEVC without its alpha would show a black rectangle.
Fifth, load late and version everything. Serve a smaller file to phones, attach no source until the page has loaded, and play only while on screen. Media deserves long immutable caching, so a re-rendered loop needs a new filename.
The iOS Traps
The viewport changes height as the address bar grows and shrinks, so anything sized in vh jumps. Use svh for layouts that must fit with the toolbar showing, lvh for backgrounds that should fill without it, and dvh only where a resize mid scroll is acceptable.
Momentum scrolling and toolbar resizes make scroll linked transforms trail the finger, so on our own site parallax runs only on devices with a fine pointer.
Low Power Mode throttles requestAnimationFrame and CSS animations to 30 frames per second, and there’s no reliable way to detect it. Design easing that still reads at 30. Autoplay can be refused too, so every video needs a poster that works as a finished design.
Reduced Motion Is a Second Design
prefers-reduced-motion is a request from people for whom movement causes harm. WCAG’s criterion 2.3.3 names vestibular disorders, which motion can turn into dizziness and nausea, and cites parallax as non essential. We treat it as the brief for a second version of the site.
Reduced motion should keep meaning and drop travel: crossfades instead of slides, a still where a loop was. On our site, reduced motion and the Save-Data header both load stills and fetch no video. WCAG 2.2.2 separately requires a way to pause anything that moves on its own for more than five seconds.
Motion as a System
Premium motion is consistent, and consistency needs a system. We define motion tokens the way we define colour: a few durations, a few easing curves and one or two distances, each named for its purpose. Components reference tokens, never raw values, so a brand that needs to feel calmer changes a handful of numbers and the whole site slows together. Choosing those numbers is a matter of taste.
Choreography is the order things move in, and we write it down per template like copy. The element the visitor touched responds first. Related elements follow in reading order. Nothing important waits for decoration, and exits run faster than entrances.
What Generative Video Changes
Video models such as Google’s Veo, Runway and Kling can produce a convincing product shot or a slow camera move from a sentence. When anyone can put a cinematic loop in a hero, the loop stops signalling much. Generated clips also hide production problems: most arrive without alpha, lighting drifts between shots, and nobody can adjust a single keyframe.
The subtler risk is sameness. Generated motion and template libraries drift toward the same curves and the same fade up reveal, which is why so many sites now feel alike, as we argue in Taste Is the Last Moat. The answer is a motion system with a point of view.
Our prediction: within two years, generated video will be default hero filler in most categories, and the brands that stand out will have motion that is recognisably theirs.
What to Do This Quarter
Pull your field data for LCP, INP and CLS at the 75th percentile on mobile, and find which moving element is involved in each failing metric.
Inventory every animation on your five busiest templates and cut anything without a job. Make the LCP element visible in the first paint, and turn raw durations and curves into tokens.
Test on a mid range phone in Low Power Mode, then with reduced motion on, then with JavaScript disabled, and fix what breaks in that order.
Motion is where a brand shows it’s paying attention. If you want movement that feels expensive on every device and unmistakably yours, we’d like to talk. We usually start by auditing your top templates against the four budgets.
