Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ambient CSS v3 – Blender meets CSS

ambientcss.vercel.app

Post reply on HN
Print view View original

71–80 of 103 posts

Re: Ambient CSS v3 – Blender meets CSS

#71

Post by slj »

andai wrote: post #57
CSSer wrote: post #8

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…

I'm waiting for Skeumorphism to make a comeback, but that will require a superior AI paradigm.

It will not take superior models or LLM processes to do skeuomorphism again. It was always possible to do skeuomorphic design, it just took hard work and a focussed design effort. Just as it’s now easier than ever to do any sort of UI/UX design now with LLMs, the missing link is the work, the effort. When you want to create a skeuomorphic design, don’t defer the hardest parts to the LLM, you should investigate for yourself the intentionality and thoughtfulness of each element you create. That’s what made the skeuomorphic design of yore so attractive, it was thoughtfully designed, down to the details.

Re: Ambient CSS v3 – Blender meets CSS

#74

Post by rf15 »

kikkupico wrote: post #70
ricardobeat wrote: post #69

Earlier quoted context omitted.

I'm sorry but that's just slop. The elevation in the actual CSS makes the shadow progressively lighter (technically correct, thought the proportions look very wrong, 2 is too dark), while the 3D model has it constant. There is nothing in this 'camera and lighting setup' that was translated to the styles.

The threejs scene in the docs is only for explaining the setup; it doesn't have a raytracer to render shadows accurately. The reference renders for the CSS were done in Blender. See https://kikkupico.github.io/ambientcss/ambient-css/grounded#... for examples.

Some of these seem incredibly far off for no reason

Re: Ambient CSS v3 – Blender meets CSS

#76

Post by thenthenthen »

tuvix wrote: post #10

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

Same, a Teenage Engineering VST =D

Re: Ambient CSS v3 – Blender meets CSS

#77

Post by fugaziboutit »

rrr_oh_man wrote: post #44
charlesrice wrote: post #15

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

Can I plug https://mydogisthebest.org ? If you're into skeumorphism, you'll love it. I put a lot of care into how the buttons and other elements work and interact with each other. (It's a free little dog journaling app I created with my partner to help us cope with losing our dog)

Please let a visitor explore (a) what it does, (b) what it actually looks like, before asking them to register. You need to show value before asking for user information even when what you're offering is free.

A 30-second demo video on the landing page would be absolutely fine, or half a dozen large screenshots showing the features.

Re: Ambient CSS v3 – Blender meets CSS

#78

Post by DrinkerOfBeers »

kikkupico wrote: post #65
graypegg wrote: post #7

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 tex…

Orthographic projection was chosen here deliberately - that's why elevation makes no difference to the size of the object but changes the shadow. Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls. Orthographic projection doesn't need to handle that. The docs have a page where the lighting and camera setup is explained with an actual…

>Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls.

That would actually be pretty cool imo. Probably too performance intensive to do with css hacks though

Post reply on HN