The Effects We Deleted
About a third of what we prototyped never shipped. Here is what went and why.
Templates are usually judged by what they include. This one was shaped mostly by what we took out after testing it on a four-year-old Android handset.
Smooth Scroll Hijacking
The single most requested effect and the first one cut. Overriding native scrolling breaks keyboard paging, breaks find-in-page, fights momentum on trackpads, and on the test handset it introduced a visible lag between finger and page. No amount of easing fixed the fundamental problem of taking scrolling away from the browser.
Full-Page Transitions
A curtain wipe between routes looked wonderful and added roughly four hundred milliseconds to every navigation. Users experience that as the site being slow, not as the site being elegant.
Animated Blur
Animating filter: blur() on the hero shapes was gorgeous and dropped us to about forty frames on mid-range hardware. We kept the look by animating scale on an element that is already blurred, which is visually close and costs almost nothing.
Text Scramble
Letters shuffling into place on the headline. Genuinely fun, and a screen reader announced the intermediate garbage on every frame. There is a way to fix that with aria-hidden and a visually hidden live copy, and by then the effect was not worth the complexity.
What Survived
Twelve patterns, all of them transform or opacity, all of them tested at sixty frames on the same old handset, and every one switched off entirely under reduced motion.
