alt Hacker NewsAnthropic uses it across all their websites, here's a typical example where the effect is obvious as you scroll down: https://claude.com/solutions/agents
I could be wrong, but my simple guess is that it's become widespread in LLM-generated websites partly because of Anthropic's own style guides getting adopted through Claude-bundled skills and such.
Replies
That's a bit different since those are separate chunks of content rather than running prose (and they're mainly meaningless marketing fluff anyway). I don't find it all that annoying compared to the original article.
I used to inject a prefers-reduced-motion: true to most websites a few years back when this trend really picked up; and generally have all animations turned off at the OS level and at least on mac that injects reduced motion preference to the browser.
So for example on claude's website I get no animations, pretty good QoL improvement. Now webdevs HONORING prefers-reduced motion, that can vary.
On top of that, that page took 10 seconds to load. On a Gbit network connection, lol
This is a great example of LLM feedback loops. Anthropic's site uses scroll fade, Claude's training data includes Anthropic's site, Claude recommends scroll fade to users, those sites become future training data. The web converges on one aesthetic and nobody remembers choosing it.
https://webflow.com/ is what i blame for the fade-in on scroll module.
15 years ago it did look very polished, boutique, professional. Now that it's a module everyone can do, everyone literally does it for every module.
Also there's tailwind that likely has a module for all the modules in webflow.
Are the little hand animation graphics meant to flicker like they're an epilepsy test? That was so awful I didn't have brain power left to notice the fade scroll.
You are absolutely right!
Parts also seem to ignore prefers-reduced-motion.
the effect in this example fine though, and not obnoxious like OPs? I don't get it
It is partly to blame, yes. This is from Claude’s official frontend skill:
“Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.”