Shaders, WebGPU Components for React, Vue, Svelte, Solid, JavaScript and Framer

popalchemist

It's unclear where the boundary is between the open source repo and the paid product. Which is which and can the repo be used without the product?

mavbo

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.

tommica

20 years ago front-end devs really took that "front-end is not real programming" statement personally... 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!

bschwindHN

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.

samstress

I'm genuinely curious — do people really prefer this HTML-style syntax like <LinearGradient colorA="#0f172a" colorB="#7c3aed" /> <CursorTrail /> 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 <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> </a-scene> 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.)

392

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.

exceptione

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.

dabinat

These are very cool visually but I’m honestly struggling to imagine ways to use this without it being a gimmick.

Benjamin_Dobell

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.

monocasa

> Used on thousands of websites by 16,000+ design engineers. With a repo who's initial commit was a week ago?

preommr

It feels like I am one of the last people without WebGPU. I am on linux/chrome and it still isn't enabled by default yet.

soltanov

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 .