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

61–70 of 104 posts

Re: Ambient CSS v3 – Blender meets CSS

#61

Post by scythmic_waves »

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…

What's a good example that comes to mind for you of it done right? I don't do much frontend so I think I just uncritically accept whatever design is put in front of me.

Re: Ambient CSS v3 – Blender meets CSS

#63

Post by wlesieutre »

dmix wrote: post #56
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…

Pro-tip: ask Claude (or Claude Design) to reference the Apple HIG https://developer.apple.com/design/human-interface-guideline... and then review your interfaces

Has anyone tried giving it the Apple HIG from 20 years ago instead?

Re: Ambient CSS v3 – Blender meets CSS

#64

Post by CSSer »

scythmic_waves wrote: post #61
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…

What's a good example that comes to mind for you of it done right? I don't do much frontend so I think I just uncritically accept whatever design is put in front of me.

I can’t teach someone design in a day, but I can elaborate on the reference and point out some of the worst habits. A lot of these designs feature ornamentation without purpose. Look critically at the content in a design it produces. Ask yourself if each piece of information is serving a purpose for the end-user. This used to be, at least a little, harder to get wrong when adding noise came at the cost of more effort. The other thing is most often just typography. For a number of reasons, text below 16px should be treated very seriously. Claude throws it around everywhere.

Re: Ambient CSS v3 – Blender meets CSS

#65

Post by kikkupico »

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 threejs 3d scene - https://kikkupico.github.io/ambientcss/guide/concept/#how-it... . Hope it helps!

Regarding the textures, they respond to lighting but not especially well. In the demo app, you can scroll to the materials page and use the theme switcher at the top to see how the texture respond.

Re: Ambient CSS v3 – Blender meets CSS

#66

Post by kikkupico »

isodev wrote: post #5

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

With the knobs, I just figured out the problem was a stray div from an earlier version of the app overlapping the knobs in the components section of the demo app. I've fixed that now. Checked in both desktop and android Chrome and looks ok. haven't tested in mobile safari yet.

P.S: I agree knob controls in general are terrible UX. A real knob is usually turned with two fingers and the way on-screen knobs are operated is nothing like that.

Re: Ambient CSS v3 – Blender meets CSS

#67

Post by tuvix »

QuantumNomad_ wrote: post #53
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

> Reminds me of VST GUIs I was thinking the same thing. And I was also thinking, now that Ableton Live has a JavaScript toolkit [1], maybe this Ambient CSS could be useful in that context. I’m still on Ableton Live 11 so the Ableton Live Extensions SDK is not available for me. Therefore I cannot try this idea myself yet. [1]: https://www.ableton.com/en/blog/introducing-extensions-sdk/

From what I remember reading it was pretty limited and only applied to context menu actions.

I was pretty disappointed when I saw that, but they’ll probably expand it

Re: Ambient CSS v3 – Blender meets CSS

#68

Post by QuantumNomad_ »

tuvix wrote: post #67
QuantumNomad_ wrote: post #53

Earlier quoted context omitted.

> Reminds me of VST GUIs I was thinking the same thing. And I was also thinking, now that Ableton Live has a JavaScript toolkit [1], maybe this Ambient CSS could be useful in that context. I’m still on Ableton Live 11 so the Ableton Live Extensions SDK is not available for me. Therefore I cannot try this idea myself yet. [1]: https://www.ableton.com/en/blog/introducing-extensions-sdk/

From what I remember reading it was pretty limited and only applied to context menu actions. I was pretty disappointed when I saw that, but they’ll probably expand it

I was also unsure about that. A couple of YouTube videos I saw gave me the impression that it is possible to spawn a web view with your own HTML, JS and CSS. But without being able to try it out myself yet, I can’t really know if I understood correctly or not. But they did say that in terms of what you can do API wise it is very limited still indeed. But also that they are going to expand the capabilities of what you can do over time.

It being pretty limited is also part of the reason why I’ve not yet decided if I should pay for the upgrade from 11 to 12, or if I should wait it out until say Ableton Live 13 or 14 or 15 comes out.

I have the Suite version, so if I upgrade it will be a pretty expensive upgrade. Although, I did see that they also have a rent-to-own option to pay little by little over several months. And then there is also the possibility of discounts on Black Friday and Cyber Monday, which is only a couple of months away.

Also there is still a lot of content and capabilities in Ableton Live Suite 11 that I haven’t even made use of yet, including the full M4L that comes included with Suite. So even if I were to wait years before upgrading I wouldn’t run out of things to learn about the version I currently have anytime soon :)

Re: Ambient CSS v3 – Blender meets CSS

#69

Post by ricardobeat »

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…

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.

Re: Ambient CSS v3 – Blender meets CSS

#70

Post by kikkupico »

ricardobeat wrote: post #69
kikkupico wrote: post #65

Earlier quoted context omitted.

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…

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.
Post reply on HN