Design
A website that moves as you scroll is cheap to make now. Speed and motion settings decide whether it works
The hero that plays like a film as the visitor scrolls used to need a 3D artist. Today it is a generated clip and a few dozen lines of code. What has not changed is Google's 2.5 second target for the main content and the W3C criterion that motion triggered by scrolling can be turned off
A portrait that turns into chrome under the cursor. A product that rotates as you scroll. A scene the camera pushes into, frame by frame, as the page moves. These sites look like agency work with a 3D budget behind them.
Most of them are much simpler. The movement is one short video, usually 5 to 8 seconds, and the page picks which frame to show from how far the visitor has scrolled. Some are just two aligned still images and a mask. Generative video tools now produce the clip in minutes, and an AI coding tool writes the page around it.
So the cost of making one has dropped. The two things that decide whether it helps or hurts have not.
The first check: does the main content appear in 2.5 seconds
Google measures loading with Largest Contentful Paint, the moment the largest image, video or text block on the first screen appears. Its guidance on web.dev puts good at 2.5 seconds or less, measured at the 75th percentile of real page loads, with mobile and desktop counted separately.
Google Search Central states that it highly recommends site owners achieve good Core Web Vitals for success with Search.
A scroll driven video works against that target. For the page to jump to any frame instantly, the video is encoded so that every frame is a full picture. That makes the file much heavier than the same clip encoded for normal playback. If that video is the largest thing on the first screen, the visitor waits for it, and so does the measurement.
The fix is standard and cheap:
- A still image of the first frame loads first and stands in for the video.
- The clip stays short and is sized for a background, not for a cinema screen.
- The video loads after the page is usable, and phones on slow connections can keep the still image.
The second check: can the motion be turned off
Large movement tied to scrolling can make people with vestibular disorders dizzy or nauseous. WCAG 2.2 addresses it in success criterion 2.3.3, Animation from Interactions: motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
That criterion is Level AAA. The Level AA that most standards point at, including EN 301 549 in the EU and JIS X 8341-3 in Japan, does not require it. It is still one of the cheapest things on the list to do.
Operating systems already let people ask for less motion, and browsers pass that setting to the page as prefers-reduced-motion, defined by W3C in Media Queries Level 5. A site that listens to it can show a calm, complete version: the final frame as an image, the text in place, nothing moving. Nobody has to find a switch.
A third point the search engines will notice
Words drawn into the video are invisible to search engines, to AI assistants that quote websites, and to screen readers. The headline, the company name and the offer need to stay in the page as real text on top of the video.
What to ask whoever builds it
- On a mid range phone with a throttled connection, how long until the first screen shows its main content?
- How heavy is the video, and what shows while it loads?
- What does the page look like with reduced motion turned on in the operating system?
- Is every headline and piece of copy real text in the HTML?
- Does it still work on a phone held upright, with a thumb, scrolling fast?
If the answers are clear, the effect is working for the brand. If they are not, the site will look impressive in the pitch and slow in the hands of the people it was built for.
Sources
- Google, web.dev, Largest Contentful Paint (good is 2.5 seconds or less, measured at the 75th percentile of page loads, mobile and desktop separately)
- Google Search Central, Understanding Core Web Vitals and Google search results
- W3C, Understanding WCAG 2.2 Success Criterion 2.3.3 Animation from Interactions (Level AAA)
- W3C, Media Queries Level 5, prefers-reduced-motion