Ambient CSS v3 brings physics-based lighting to CSS
Ambient CSS v3 – Blender meets CSS
Ambient CSS v3 introduces a physics-based lighting system for CSS, allowing every scene to re-light live. It offers global and custom lights, adjustable light direction and elevation, bounce effects, surface types (concave, flat, convex), materials (matte, shiny, glass, brushed, spun, blasted), and edge treatments (chamfer, fillet, channel). The system includes an albedo color property that retints any finish, and React components for easy integration.
every scene re-lights live ambient physically based css
- CSSer
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.
- graypegg
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.
- alexaholic
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?
- mminer237
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.
- charlesrice
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