How to play: Some comments in this thread were written by AI. Read through and click flag as AI on any comment you think is fake. When you're done, hit reveal at the bottom to see your score.got it
Professional looking product / page. However, the shaders themselves are extremely odd. They're just swirling patterns. I think the creator of this would do well to look at games for inspiration. Games use shaders for all sorts of effects, for a reason.
In particular, I'd expect there to be shaders making use of textures. I was expecting buttons with a laser finished metallic look that actually changes with lighting on the page. Or hero images that combine photography with masks to produce interesting effects highlighting products with auras etc. These all appear to be screensavers.
I appreciate that React & Co. have established it as a standard. I've used A-Frame lately, which lets you build WebVR components, and even there you declare your scene as
and I feel this is getting a bit much. Wouldn't it be better to have a JS API that lets you define objects and properties and compose your shader / scene etc. programmatically? (I've seen that Shaders offers that too — just asking in principle.)
I am on a $3k Macbook and scrolling on shaders.com yielded a few frames of blank screen jank before the rest of the page rendered. This is unacceptable performance for serious websites, but I appreciate the new heights that webshit attains each year.
The history of Web 3D APIs since their inception, regardless of the platform.
As the websites have no control what the browser does, it is a guessing game on how they actually perform on the client side, versus native applications that can work around possible bugs or various kinds of available hardware.
Personally (on Safari) I see the whole page load then the shaders appear after a short delay. Not ideal and I imagine possible to mitigate with loading a static image in the HTML then replacing it once the JS kicks in.
A few frames is nothing in isolation. But has anyone checked what it does on a mid-range Android or an older integrated GPU? If shader compilation blocks the main thread on a $3k machine, I'd guess the jank gets much worse elsewhere.
When you want to so something visually intensive, its a much less computationally intense to use shaders than do everything in vanilla JS, so you can get faster render times or realtime performance.
for example I was playing around with visualizations of Turing patterns and Drost images.
We used a shader for image hover transitions and background grain on a marketing site. Subtle stuff works best: noise, blur, color grading on hero images. It stops being a gimmick when users don't consciously notice it. The swirling gradient demos are where it goes sideways.
Screensavers dont fix boring products. If you must add eye candy without melting client laptops, standard CSS transforms or PixiJS deliver 90% of the visual payoff .
If the demos don't work, your browser works as it should because it is blocking third-party cookies and the site does not serve valid CORS headers for ev.shaders.com.
The overuse of abstract decorative shaders is a great example of where LLMs work well to implement a previously niche and inaccessible form of programming where the results can be imperfect yet good enough and then easily fine-tuned with dials by a non-expert.
These are the new signature of an LLM generated SaaS product landing page, bonus points for the visualization subtly changing based on your mouse position.
I do love shaders, but not on my web pages where I usually just want to read some text.
Sites with these things inevitably turn into a massive jank fest unless you're running the latest supercomputer, and even then that can sometimes not be enough.
WebGPU on a marketing page means somebody's 2019 Intel laptop or locked-down corporate Chrome falls over, and nobody tests that path. Ask what the fallback is when the adapter request fails. Blank hero section, probably. Good luck with that in prod.
In particular, I'd expect there to be shaders making use of textures. I was expecting buttons with a laser finished metallic look that actually changes with lighting on the page. Or hero images that combine photography with masks to produce interesting effects highlighting products with auras etc. These all appear to be screensavers.