Show HN: Svader – Create GPU-rendered Svelte components

sokmastr | 189 points

This is very cool. However, I do wonder about your use case for making things like sliders.

CSS and HTML already have several decades of work on accessibility and cross platform support. It's far from trivial to recreate this.

For things like hero pages, I can see the benefit. But for basic UI like sliders, are you reinventing the wheel here?

esperent | 7 days ago

Any plans to integrate this with an animation engine? I've found Svelte animations little bit buggy however. Also are the limitations of 3D just a design choice? Thanks for the HN post.

rubatuga | 7 days ago

This is awesome, thanks for sharing!

0x1234567890 | 7 days ago

None off he examples work on Safari iOS 18.1.1

katamari-damacy | 7 days ago

On mobile, none of the examples work.

One makes my phone extremely sluggish.

It also breaks the browser history.

The page with the list of examples sometimes doesn't render at all. Which is weird bc. <ul> is a solved problem since like 1999.

"Sick stuff, bro!"

moralestapia | 7 days ago

This reminds me a little of the <shader-doodle> web component, which also works in any framework or plain HTML:

https://github.com/halvves/shader-doodle

spankalee | 7 days ago

My question, from using ThreeJs and @react-three{fiber, drei} and seeing this site, is why I do I continue to use CSS & HTML? The question is what is important, not the answer.

In my experience there are times when building HTML CSS components is an anti-user pattern. I know HTML-CSS well, but is it the best experience for users? In some cases my answer is no.

In particular, with complex websites I believe that using graphic navigation is superior to other alternatives. When we want to navigate using {Google,Apple,Etc} maps we do not have a list of hierarchical menus. One does not navigate to the continents menu, then countries, then states, then cities, etc. You zoom out, you zoom in or you type a location. A user can quickly and easily go from a street view in NYC to a street view in Osaka.

I suspect that direct 3D graphics could be used in other situations, but have not had a chance to explore them. Low hanging fruit first.

(And yes, this is not a bug free system. Getting things to work across platforms, browsers, etc can be tedious. On the other hand most {iPhones, Android phones } seem to have strong graphics capabilities that make them able to handle a modicum of graphics. :-) )

talkingtab | 7 days ago

Just fyi, Dark Reader (Firefox extension) completely broke the more interesting experiments and I had to disable it to see them. Only the 'square color gradient' experiments survived, for some reason.

mckirk | 7 days ago

[flagged]

doomlaser | 7 days ago