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.
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.)
Personally I don't mind it, but would say the main advantages offered by JSX for this kind of work (see: React Three Fiber) are more in its ease of composition and structuring larger projects.
Often in R3F projects you'll end up running per frame animations via the normal declarative property API in the useFrame hook anyway, as adjusting props in a loop is not great for performance. The JSX instead becomes a way to easily understand the hierarchy and nesting of objects, as well as quickly mount/unmount new elements.
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 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 hate aislop as much as the next graybears but beauty and design matters, and just as important is respecting, if not understanding, that subjective nature of it.
CPU and GPU in the service of visuals are far more well spent than bombing and spying on people, for example
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.
Often in R3F projects you'll end up running per frame animations via the normal declarative property API in the useFrame hook anyway, as adjusting props in a loop is not great for performance. The JSX instead becomes a way to easily understand the hierarchy and nesting of objects, as well as quickly mount/unmount new elements.
All of this could have been avoided had we just gotten a "good job" and a pat on the back when we showed our jquery scripts!
Jokes aside, looks impressive!
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.
CPU and GPU in the service of visuals are far more well spent than bombing and spying on people, for example
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.