Birbla

Join the discussion

Write your take first — we'll ask for email only when you're ready to publish.

Sign in
  • Hacker News
  • I don't really see the Blender connection here? This just seems to be a component library leaning heavily on 3D effects and lighting?
    by stevage
  • The Blender connection - https://github.com/kikkupico/ambientcss/blob/master/ambient3...
    by kikkupico
  • 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...
    by dnpls
  • 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!

    by varispeed
  • 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.

    https://thestrikeagency.com

    by noduerme
  • 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
    by tuvix
  • Same, a Teenage Engineering VST =D
    by thenthenthen
  • > 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/

    by QuantumNomad_
  • 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.

    by SwellJoe
  • 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!

    by wasmperson
  • Isn't this just short-lived neumorphic design from a few years back? https://neumorphism.io/#e0e0e0
    by troupo
  • It does take the idea further by anchoring the design system in real world objects.
    by smallnix
  • I love the concept but (at least on mobile Safari) most of it feels unusable.
    by isodev
  • Both performance and mechanics of the knobs :|
    by som
  • Same on Brave on Android. But I think that's largely orthogonal to the design, which I like a lot.
    by esperent
  • 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.

    by kikkupico
  • 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.
    by fwip
  • 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
    by charlesrice
  • Worked like crap on mobile as well.
    by drfloyd51
  • vercel apps really do have a reputation
    by trueno
  • 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)

    by rrr_oh_man
  • 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.

    by graypegg
  • 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.

    by kikkupico
  • 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?
    by alexaholic
  • Remember motiongerm and the whole sleek 60fps flash design thingamabob? Bespoke interfaces everywhere
    by dleeftink
  • 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.

    by mcdonje
  • 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.

    by mminer237
  • It’s also glitchy and flickery for me on iOS.
    by dkersten
  • And knobs are a useless control on in any mouse/pointer based interface.
    by JackFr
  • 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.
    by danudey