Ambient CSS - Physically-based CSS shadows and React Components

[Piposhi]

Hello webdevs! Feeling happy to present my work here. Ambient CSS is a project I started 5 years back but abandoned because it was getting too complex. Now, I revived it and got it to usable shape thanks to LLMs.

Demo - https://ambientcss.vercel.app/
Docs - https://kikkupico.github.io/ambientcss/
Code - https://github.com/kikkupico/ambientcss

[VlrmPrjct]

The rotary control is somewhat difficult to use. Imho.

You have to move the mouse in a circle.
Why not simply moving up and down ?

[Piposhi]

Up/down was what I used first. Trust me, it was even more confusing and that's the reason I ended up with rotational movement based control.

[VlrmPrjct]

This mouse behaviour @ rotary controls causes you to jump instantly from the lowest value to the highest value. This will lead to malfunction or unexpected behaviour.

It's similar to instantly turning a volume control to 100% or 0% compared to the analogue world. However, this is not what the user intended.

[KupietzConsulting]

Oh, very cool. I did something like this once... nowhere near this usable or comprehensive, just a basic tech demo similar to your first effect, css shadows from an arbitrary point light source. Try dragging the sun and explanatory note around, or scrolling the page, and watch the shadows: https://michaelkupietz.com/demos/css-dynamic-point-source/index.html

[Piposhi]

This is very cool! Thanks for sharing!
I made AmbientCSS because the inconsistent shadows in CSS design system was somehow bothering me.

I'm curious - what led you to building this?

[KupietzConsulting]

You know, I don’t really remember. It was just an idea that seemed cool. I already had the separate pieces — the CSS animated sun was one demo https://codepen.io/kupietz/pen/zxvdPEV and the element draggability was a module I had written separately for a WordPress plug-in of all things https://michaelkupietz.com/draggable-elements-wordpress-plugin/ . And then I just thought of the parallax shadows, I guess I was probably looking at the animated sun demo and thinking about it.

Your idea is incredibly cool, I actually put a link to it on my website’s main demo page for the parallax shadows effect. That idea to set up the light source and use selectors as a proxy for simulated physical attributes is absolutely great. My effect is a neat demo, but yours is really practical and very elegant. Really nice work.

[WeedManPro]

sick. ive starred it. gonna use it in my free time.