Show HN: Ambient CSS – Physically Based CSS and React Components

[kikkupico]

Hello! AmbientCSS is a side project I started 5 years ago because I found the lack of realism in CSS shadows jarring. So, I tried to create a more realistic and consistent shadow system for CSS. It grew too complex and I gave up. Now, thanks to LLMs, I was able to revive it. As such, it's good enough to play with but might not be good enough for production use.

[slowmotarget]

I dreamt about this for a long time. I started a similar endeavor thrice in the past. Congrats for making this a reality.

[lateforwork]

This is fun, but I couldn't figure out how to use the knobs. It turns in unpredictable ways.

[kikkupico]

Thanks for the feedback! Click and scroll up/down to turn the knobs. I will fix this as it isn't an intuitive way to control knobs. EDIT: Done! Please disregard this comment.

[lateforwork]

Works very well now, but initially I was confused by why it was getting stuck occasionally. Turns out you can't move it between 4'o clock and 8'o clock, which is reasonable, but there is no visual indication of these limits, so it is hard to understand.

[kikkupico]

Thanks for the feedback! I agree there needs to be visual indication for the knobs' min and max points. I'm thinking about how to do this without adding visual clutter.

[treetalker]

For me the gesture is drag up/down (works like a vertical slider but with different chrome).

[kikkupico]

Thank you! I just changed the knob control gesture/drag logic and it doesn't work like a vertical slider anymore.

[kikkupico]

Made the knob controls more intuitive now. Please check it out!

[siisee11]

Awesome! looking forward to the production ready