I really dislike how the dribbble/envato style somehow escaped containment into Claude and now I’m seeing it everywhere mixed with mediocre design layouts. I think to myself that maybe stuff like this will help counteract that but then I see it in use with 12px typography (the kubernetes 3D dashboard thing) and I recoil in horror. Please consider this a PSA: Claude doesn’t understand UX or good design principles out of the box. Please go hug a designer.

Neat idea, but feels very poorly made.

The light direction governs the whole grid for some reason but stops outside an arbitrary div and often just stops working period, on top of feeling laggy for such a simple effect.

Channels are messed up. The example doesn't seem to work, while in the video it just makes two edges white for some reason?

The color options and textures are kinda ugly. The glass colors clearly just don't work. "Brass" turns into "Olive" on the last one for no reason?

The radio buttons are a bad idea for a digital interface, implemented completely inconsistently(‽), and the middle one just doesn't work at all.

Buttons have virtually no feedback if they're pressed or not.

Reminds me a lot of Google's material design, at least the older versions of it, just much sloppier and less usable and less colorful.

We used to do this during the Web 2.0 era with PNGs, GIFs and `progid:DXImageTransform` because back then you couldn't do it with standard CSS alone. Then as CSS (and MS!) evolved to enable it, the world moved on to flat UIs. It's ironic, isn't it?

Nitpick, but elevation would make much more sense if you assumed a base plane + set a perspective, and then translate3d'd upwards on the Z axis. It would grow the size of the element as well.

Saying that, probably annoying to work with transformed DOM nodes, but the background being the only thing moving in the "bounce" example just stood out to me as weird.

Also, the texures seem to be just gradients or embedded texture data. Was thinking this would use https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V... and fall back to gradients/premade images for firefox.

My favorite is the knobs where some of them you can grab and rotate like they are physical but other ones only react to the vertical position of the cursor so you feel like a crazy person trying to use them

I love the concept but (at least on mobile Safari) most of it feels unusable.

Isn't this just short-lived neumorphic design from a few years back? https://neumorphism.io/#e0e0e0

The keyboard controls to select a radio button shouldn't depend on the visual orientation of the radio buttons. Browsers get this right by default, but the radio buttons aren't implemented with `<input type="radio">` and instead are just a row of plain buttons and a bunch of javascript. A quick check in the dev tools confirms the other widgets are similarly implemented :(

I love the look, though!

Reminds me of VST GUIs, looks great! But, like other commenters have noted, I think a number of these controls might be desktop only, which is totally fine. There’s too much UI stuff centered around mobile anyway these days

I wrote something a bit like this years ago as an experimental portfolio site... a sort of responsive engine managing flat "cards" with CSS shadow cues for depth. (The responsive aspects are all JS on a loop that tweens everything). Ever since Photoshop released drop shadows on the world, I've generally thought that their overuse was a way to mask bad design, but I thought it was interesting at the time to see how far you could get using only drop shadows. Note: This site hasn't been updated in a decade. Not made for dark mode.

https://thestrikeagency.com

Looks cool, but I can't see myself using something like this. The readability is poor, it is difficult to gauge if button was pressed or what is selected.

But still, I love it!

I don't really see the Blender connection here? This just seems to be a component library leaning heavily on 3D effects and lighting?

This has mid 2000's LiteStep theme vibes.

I'm going to try using this for enhancing my UI on http://typestax.com

Typestax is where you can pick and choose different typefaces and adjust it, preview them in a website and blog format, and also export your tokens in different formats.

For a course I'm taking, I made an "Exposure Triangle" demo inspired by Duolingo. This feels like I just struck gold. Whether I use this implementation or another, I'd like to develop a library of these Skeumorphic components. I want to make a later version of my application -- where I make explanatory mathematics and this kind of minimal diegetic interface is exactly what I need to pull that off

I had tried (and failed) to do something similar. https://analogui.com/

God this site has atrocious scrolling behavior. Allowing me to scroll halfway to the next "page" but then forcing me to stop scrolling and start again to get to the next one made me close the page half way through.

I enjoy how much the page lags when it loads in a new section. Also how is this related to Blender?

You see a lot of this kind of look in AUv3 plugins on the iPad and I love it - it's so nice to have visually tactile interfaces rather than the flat shit that OSs have been forcing on us.

Interesting concept, but CSS alone already feels like I'm wrestling a 3D renderer some days. Hope it doesn't add too much cognitive load.

Skeuomorphism is back, baby! Apart from the wonky dragging on some of the knobs, I really like these. Kind of reminds me of teenage engineering.

Reminds me of earlier visual CSS tools; the output code was always the problem. Curious if this iteration solves that.

I'm not sure why they had to mention Blender. It's just regular CSS?

Imagemap still works btw

Nobody who cares about UX adds virtual knobs to flat interfaces.

Nitpick, but that font really needs a slashed zero.

badass. i so desperately want to use this on a small business website

Why must UI/UX be a fashion. I knew this skeuomorphic shit would return eventually.

material design 3.0?

can we remove the Blender part of the title? it's totally misleading to say the least. if anything a more accurate word would be PBR or something

is it too much to ask for a button in a different colour to the background. ffs

Blender for CSS? The mental image alone is wild. If it simplifies complex layouts, I'm all for it.