Ambient CSS v3 – Blender meets CSS(ambientcss.vercel.app) |
Ambient CSS v3 – Blender meets CSS(ambientcss.vercel.app) |
Sigh.
People always miss out the fact that older information-dense UIs were... information dense. We get this weird simulacrum of information density where the LLM has slapped on "every pod has a machine", a made-up PDU for pods with a watt rating somehow, and random status labels EVERYWHERE. All it's missing is the green circle "LIVE" label that every claude app seems to have...
> "every pod has a machine"
Everything you mentioned is annoying, but I think this one is the worst. I don't know why it loves slapping on meaningless info blurbs like that. I guess it carries over from training on test/demo programs where the functionality is clearly spelled out, but on a production UI it looks so bad.
Even comprehensive design skills like impeccable miss filtering them out (it only detects “eyebrow chips” and not the prolific barrage of basic eyebrows.)
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.
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.
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.
That would actually be pretty cool imo. Probably too performance intensive to do with css hacks though
Also, early on, there was an idea that cyberspace should resemble meatspace so the meats don't get confused. That's no longer much of a concern.
Unfortunately, they didn't replace it with good, clean design.
From bespoke to Bootstrap, to Tailwindshitification
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)
A 30-second demo video on the landing page would be absolutely fine, or half a dozen large screenshots showing the features.
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.
I love the look, though!
They love fiddly round knobs which are terrible to control with a mouse or touchpad, and are bad for accessibility. They also tend to have a bunch of mystery meat navigation because the historic hardware UIs they're emulating were forced to bury stuff behind menus due to limitations of the technology, and cost limitations, at the time. Some are better than others, but the priority is often looking cool in screenshots rather than being comprehensible and discoverable.
I don't mind shadows and shapes that look three dimensional; affordances that indicate what you can do with an interactive element is great and an improvement over the flat trend. But, VST GUIs are among the worst examples to copy. And, round knobs are probably never the right choice for a computer GUI.
I can’t deny I love the look, though.
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/
I was pretty disappointed when I saw that, but they’ll probably expand it
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.
But still, I love it!
It was founder therapy first and foremost (and an exercise in serious play).
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 :)
Consistency in the interface allows users to transfer their knowledge and skills from one application to another. Use the standard elements of the Aqua interface to ensure consistency within your application and to benefit from consistency across applications. Ask yourself the following questions when thinking about consistency in your product:
- Is it consistent with Mac OS X standards? For example, does the application use the reserved and recommended keyboard equivalents (see "Keyboard Shortcuts Quick Reference" (page 309)) for their correct purposes? Is it Aqua-compliant? Does it use the solutions to standard tasks Mac OS X provides? (For more information on these solutions, see "Using Mac OS X Technologies" (page 61).)
- Is it consistent within itself? Does it use consistent terminology for labels and features? Do icons mean the same thing every time they are used? Are concepts presented in similar ways across all modules? Are similar controls and other user interface elements located in similar places in windows and dialogs?
- Is it consistent with earlier versions of the product? Have the terms and meanings remained the same between releases? Are the fundamental concepts essentially unchanged?
- Is it consistent with people’s expectations? Does it meet the needs of the user without extraneous features? Does it conform to the user’s mental model? (For more information on this concept, see "Reflect the User’s Mental Model" (page 40).)
Meeting everyone’s expectations is the most difficult kind of consistency to achieve, especially if your product is likely to be used by an audience with a wide range of expertise. You can address this problem by carefully weighing the consistency issues in the context of your target audience and their needs. See "Know Your Audience " (page 25) for more information on how to define your audience
Compared to today's version https://i.imgur.com/OfFcJ0k.png
From 2026 HIG:
> Create a list of common terms, and reference that list to keep your language consistent. Consistent language, along with a voice that reflects your app’s values, helps everything feel more cohesive.
> Build language patterns. Consistency builds familiarity, helping your app feel cohesive, intuitive, and thoughtfully designed. It also makes writing for your app easier, as you can return to these patterns again and again.
https://developer.apple.com/design/human-interface-guideline...
I'm sure there's others
But otherwise I agree I liked old MacOS design.
