research
We instrumented the 25 best DTC landing pages. Only 2 were playing video.
Summary: On 18 April 2026 we opened 25 leading DTC landing pages and recorded what the browser was actually doing at five scroll depths. 15 of the 25 shipped at least one autoplay video in the DOM. At a top-of-page sample, 2 were playing one. Warby Parker ships 2,753 CSS @keyframes rules; exactly 1 fired on a page view. One in five sites locked scrolling behind a modal while we watched.
Every landing page teardown you have read is a screenshot exercise. Someone opens a page, takes a picture, and describes the picture. That tells you what the team intended to ship.
It does not tell you what a shopper experiences, because the gap between "we shipped a video hero" and "a visitor saw motion" turns out to be enormous.
So we measured the second thing instead.
Method
We loaded 25 landing pages in a real browser and stepped each one through five scroll positions — 0%, 25%, 50%, 75%, 100% — plus a scroll-back-to-top pass. At every step we recorded runtime state, not markup:
- Which videos were playing right now, by reading the
pausedproperty on every<video>element rather than countingautoplayattributes. - Which CSS animations were live-attached, via
getAnimations()on rendered elements, versus how many@keyframesrules the stylesheet defined. - Popup, sticky, carousel and marquee elements in the viewport at each depth.
- DOM deltas between steps, so scroll-triggered behaviour was attributable to a specific depth.
Captures used an iPhone 14 Pro viewport (390×844, DPR 3); live scroll observation ran on desktop Chrome at ~1030px. The set was 10 DTC/Shopify brands, 8 design-award sites, and 7 chosen for conversion or revenue reputation. Sample date: 18 April 2026.
Two honest limitations. This is a single observation per site, so a video gated on a slower IntersectionObserver could be missed. And regional redirects sent some sites to Singapore storefronts, though brand design language is shared across regions.
Finding 1: autoplay video mostly does not autoplay
15 of 25 sites had at least one autoplay-attributed video in the DOM. At a 0%-scroll sample, two brands had a video actually playing — Olipop and Glossier.
The rest were paused, gated behind an IntersectionObserver that never fired at the sampled depth, blocked by browser autoplay policy, or sitting below a consent modal.
The two that worked did it deliberately. Olipop's hero video plays at 0%, pauses the moment it scrolls out of view at 25%, stays paused through 100%, and resumes when the visitor scrolls back to top. Glossier's fires at 50% and 75%, then pauses at 96%. Both are textbook IntersectionObserver gating — motion is spent only when someone is looking.
Autoplay video is one of the most expensive things a brand can commission for a landing page. On this sample, most of that spend was not being delivered at the moment it was supposed to matter.
Finding 2: animation libraries ship almost entirely dormant
The single most striking number in the set:
Warby Parker ships 2,753 @keyframes rules. Exactly 1 fired on a page view.
That is 99.96% of an animation library downloaded, parsed, and never run. Bombas ships 7 rules total.
Live-attached animation counts across the set, against rules defined:
| Brand | @keyframes defined | Observed live |
|---|---|---|
| Warby Parker | 2,753 | 1 |
| Ridge | 203 | 6 |
| Gymshark | 167 | 5 |
| Ghia | 77 | — |
| Magic Spoon | 71 | — |
| Olipop | 54 | 0 on content |
| Away | 48 | — |
| Poppi | 45 | — |
| Allbirds | 15 | 2 (both chrome) |
| Bombas | 7 | — |
Where animation was live, it was almost never the hero. Gymshark's five continuously-attached animations power the snackbox, nav, and quick-add button. Ridge's six include two that drive mega-menu transitions. Allbirds' two live animations were a cookie-banner fade and our own instrumentation pulse.
The pattern: motion budget is spent on UI chrome, not on the persuasion surface.
Finding 3: one in five sites locked scrolling while we watched
5 of 25 brands scroll-locked the page during observation — Magic Spoon, Away, Brooklinen, Ghia, and Fenty Beauty. Fenty's cause was diagnosable: an open cart drawer.
A measured 20% scroll-lock rate on a curated list of best-in-class pages is not a rounding error. These are the sites other teams copy.
Allbirds did not lock scroll but blocked the viewport with a geo-shipping modal before any product was visible, and Escape did not dismiss it. Forced country choice, before the value proposition.
Finding 4: interference counts vary by three orders of magnitude
Popup containers present at first paint:
| High | Low | ||
|---|---|---|---|
| Gymshark | 87 | Graza | 0 |
| Glossier | 68 | Apple | 0 |
| Ghia | 61 | Warby Parker | 0 |
| Brooklinen | 41 | Jones Road | 1 |
| Liquid Death | 40 | Away | 2 |
Carousels: Jones Road 279, Chubbies 236, Fenty 216, Gymshark 161 — against Bombas 0 and Apple 0.
Sticky elements: Ghia 40, Brooklinen 38, Chubbies 26 — against Warby Parker 2 and Apple 4.
There is no consensus. Brands widely regarded as conversion-competent sit at both extremes, which should make anyone cautious about "best practice" claims in this area.
Finding 5: the sharpest scroll event in the set
Death Wish Coffee's marquee count goes 0 → 62 at exactly 25% scroll, then back to 0.
Other scroll-gated behaviour worth noting: Glossier's Klaviyo email capture is attached at 25% scroll, not on a timer — a scroll-depth gate rather than a time gate. Ridge's sticky count steps from 6 to 7 at 25% as the secondary nav pins in.
Page heights ranged from Warby Parker at 16,680px and Gymshark at 11,613px down to Omsom at 932px, where scrollHeight equals innerHeight — a genuine single-fold page.
What we take from this
Three things worth carrying into your own pages.
Verify delivery, not intent. A video element with an autoplay attribute is a plan. video.paused === false at the scroll depth where the visitor is looking is a fact. These diverged on 13 of the 15 sites that shipped one.
Audit motion at runtime. If you ship 2,753 keyframe rules and run one, you are paying transfer and parse cost for a library your visitors never see.
Treat modal scroll-lock as a release blocker. A fifth of the best-regarded pages in DTC were, at the moment we looked, preventing the scroll that every one of their below-fold sections depends on.
Method notes and reproducibility
The capture harness is a Playwright script that steps each URL through the five scroll depths, polls until every above-fold image reports naturalWidth > 1, and serialises runtime animation and video state at each step. Three sites needed handling: one domain was parked and was replaced with a same-category substitute, one required stronger network-idle waits to avoid capturing a redirect in progress, and one needed the image-decode poll because a hero bitmap had not reached the compositor when the snapshot fired.
Single-observation-per-site is the main limitation. We would expect a repeated-measures version of this study to raise the "video actually playing" count somewhat — but not to 15.
Lutiq predicts, for every paid click, which on-brand page to show — and measures lift against a live holdout. Figures above are first-party unless attributed.