CSSer14 days ago
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.
graypegg14 days ago
UI greebling [0] is something I'm not looking forward to.
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...
ipdashc14 days ago
Wow, greebling is a good metaphor for it that I never would have thought of.
> "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.
bargainbin14 days ago
I had no idea “eyebrows” was a term until I started using Claude to generate designs. That model is eyebrow crazy, every section of the output has them.
Even comprehensive design skills like impeccable miss filtering them out (it only detects “eyebrow chips” and not the prolific barrage of basic eyebrows.)
andai14 days ago
I'm waiting for Skeumorphism to make a comeback, but that will require a superior AI paradigm.
slj14 days ago
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.
dmix14 days ago
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
wlesieutre14 days ago
Has anyone tried giving it the Apple HIG from 20 years ago instead?
theturtle3213 days ago
This! That was, IMO, a golden era for UI design. We've lost SOO much to the wild west experimentation brought on by the advent of touch interfaces. A really strong shared design language across apps and vendors is an unbelievably valuable productivity enhancer that lets people apply the intuition they've learned in one app to a UI in a different app that they've never seen before. When everyone tries to make their app look and feel and operate with uniqueness and visual distinction, much is lost.
wlesieutre13 days ago
In the words of the old HIG:
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
dmix13 days ago
You were filtering the sidebar for "consistency", that's not a search box.
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.
wlesieutre13 days ago
Oh you're right, well in that case I'd like to complain about turning the big PDF into a linked web document and not giving it an obvious whole-HIG search box. Worse experience than cmd-F 20 years ago.
scythmic_waves14 days ago
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.
CSSer14 days ago
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.
mminer23714 days ago
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.
danudey14 days ago
It supports a dark theme but then you can't see 90% of what it actually does because drop shadows on dark backgrounds just plain don't work.
JackFr14 days ago
And knobs are a useless control on in any mouse/pointer based interface.
dkersten14 days ago
It’s also glitchy and flickery for me on iOS.
alexaholic14 days ago
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?
mcdonje14 days ago
There was a lot of one-upsmanship at the time. People did it because it was hard. When it wasn't difficult to do anymore, they stopped because it wasn't actually good clean design.
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.
thesuitonym14 days ago
> they stopped because it wasn't actually good clean design.
Unfortunately, they didn't replace it with good, clean design.
dleeftink14 days ago
Remember motiongerm and the whole sleek 60fps flash design thingamabob? Bespoke interfaces everywhere
alexaholic14 days ago
> Bespoke interfaces everywhere
From bespoke to Bootstrap, to Tailwindshitification
phoronixrly14 days ago
... To Claudification... All of this project is completely vibecoded.
graypegg14 days ago
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.
kikkupicoop14 days ago
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.
DrinkerOfBeers14 days ago
>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
ricardobeat14 days ago
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.
kikkupicoop14 days ago
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.
rf1514 days ago
Some of these seem incredibly far off for no reason
ricardobeat14 days ago
Indeed. Those are even more off. It's like they haven't actually looked at what the AI produced - or the agent is also the one writing the replies here.
charlesrice14 days ago
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
rrr_oh_man14 days ago
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)
fugaziboutit14 days ago
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.
rrr_oh_man13 days ago
I agree with your sentiment, but it's totally fine if no one uses it.
It was founder therapy first and foremost (and an exercise in serious play).
BorisMelnik14 days ago
well done! very nicew
rrr_oh_man13 days ago
Thanks, Boris
trueno14 days ago
vercel apps really do have a reputation
drfloyd5114 days ago
Worked like crap on mobile as well.
isodev14 days ago
I love the concept but (at least on mobile Safari) most of it feels unusable.
fwip14 days ago
The knobs are especially difficult to use (on desktop here). The first two knobs only respond to click & vertical drag - moving up rotates clockwise, moving down rotates ccw. Moving left or right does nothing. The second knob's grab handle is just totally wrong, appearing in only about the 4 o'clock to 6 o'lock position.
SwellJoe14 days ago
Round knobs are just a terrible idea. They never work comfortably with a mouse or touchpad, and are often an accessibility challenge.
kikkupicoop14 days ago
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.
esperent14 days ago
Same on Brave on Android. But I think that's largely orthogonal to the design, which I like a lot.
som14 days ago
Both performance and mechanics of the knobs :|
troupo14 days ago
Isn't this just short-lived neumorphic design from a few years back? https://neumorphism.io/#e0e0e0
smallnix14 days ago
It does take the idea further by anchoring the design system in real world objects.
woodrowbarlow14 days ago
so, skeuomorphic
wasmperson14 days ago
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!
tuvix14 days ago
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
SwellJoe14 days ago
Counterpoint: I hate VST GUIs. They're often skeuomorphic hell.
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.
tuvix14 days ago
Haha yeah I think I’m mostly speaking from nostalgia. I do remember wrestling with knobs in Massive or whatever free VSTi back in the day was pretty terrible.
I can’t deny I love the look, though.
immmmmm14 days ago
While I have a massive collection of VSTs I always end up using my very limited modular and Rytm mk1. And Elektron machines are an UI nightmare.
tuvix14 days ago
If you can learn Elektron gear it’s like a music creation superpower though. I tried with a Digitakt and couldn’t get into the flow
QuantumNomad_14 days ago
> 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/
tuvix14 days ago
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
QuantumNomad_14 days ago
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 :)
thenthenthen14 days ago
Same, a Teenage Engineering VST =D
noduerme14 days ago
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.
varispeed14 days ago
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!
stevage14 days ago
I don't really see the Blender connection here? This just seems to be a component library leaning heavily on 3D effects and lighting?
dnpls14 days ago
Glad I'm not the only one. It's just skeuomorphic CSS? I guess mentioning Blender must be better for SEO, or maybe that's just what the GPT suggested...
kikkupicoop14 days ago
The Blender connection - https://github.com/kikkupico/ambientcss/blob/master/ambient3...
__alexs14 days ago
This has mid 2000's LiteStep theme vibes.
yboris14 days ago
LiteStep forever in our hearts ♥
rahulmax14 days ago
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.
dzonga14 days ago
that's a beautiful ui
eigenblake14 days ago
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
TechSquidTV14 days ago
I had tried (and failed) to do something similar. https://analogui.com/
rahulmax14 days ago
This is fantastic. Why do you say failed? Fellow 'skeuomorphist' here. (typestax.com)
TechSquidTV10 days ago
It's incredibly poor performance, unfortunately.
nekooooo14 days ago
you definitely reached the limits of skeumorphism. click and drag, especially along an invisible, curved path, is not user-friendly.
dnpls14 days ago
yeah the light and shadows constantly spinning are a bit much, but it's not all bad!
inexcf14 days ago
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.
SwellJoe14 days ago
When a page about a new GUI thing fucks around with well-defined behaviors, back-button, scrolling, widget interaction, I know I can't trust their judgement. We don't want the same things and it's best if I move on.
cluckindan14 days ago
Isn’t it just scroll-snap?
inexcf14 days ago
Nah, this one stops you while you are scrolling and only lets you move on if you stop for a moment.
voidUpdate14 days ago
I enjoy how much the page lags when it loads in a new section. Also how is this related to Blender?
drcongo14 days ago
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.
Prydown14 days ago
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.
dvt14 days ago
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.
Trace8814 days ago
Reminds me of earlier visual CSS tools; the output code was always the problem. Curious if this iteration solves that.
MetroWind12 days ago
I'm not sure why they had to mention Blender. It's just regular CSS?
xgulfie14 days ago
Imagemap still works btw
BugsJustFindMe14 days ago
Nobody who cares about UX adds virtual knobs to flat interfaces.
noncovalence14 days ago
Nitpick, but that font really needs a slashed zero.
BorisMelnik14 days ago
badass. i so desperately want to use this on a small business website
Quitschquat14 days ago
Why must UI/UX be a fashion. I knew this skeuomorphic shit would return eventually.
Y-bar14 days ago
I’ve been clamouring for the return of usable and at-a-glance understandable interface elements like this!
vivzkestrel14 days ago
material design 3.0?
caxco9314 days ago
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
ricardobeat14 days ago
It is meant to be based on Blender renders: https://kikkupico.github.io/ambientcss/ambient-css/grounded
wigster14 days ago
is it too much to ask for a button in a different colour to the background. ffs
topoheal14 days ago
[flagged]
[deleted]14 days agocollapsed
andrewmcwatters14 days ago
[dead]
sriniwasx14 days ago
[dead]
Saltloaf14 days ago
Blender for CSS? The mental image alone is wild. If it simplifies complex layouts, I'm all for it.
irickt14 days ago
microflash14 days ago
> A user you’ve blocked has previously contributed to this repository.
Sigh.
jdiff14 days ago
Only 5 "contributors," did you block one of the AI bots bouncing around in there?
microflash14 days ago
Yup.
jdiff14 days ago
Just Claude or have you managed to block Jules as well? I haven't figured out Jules yet myself.
