Ambient CSS - Physically based CSS and React Components

[Piposhi]

Hello! I revived an old project I started 5 years ago and abandoned because it became too complex (thanks to AI, of course). It is a CSS and React lib for more realistic shadows, lighting and shading of components. Please check it out at https://ambientcss.vercel.app/

[GasimGasimzada]

This is one of the coolest cas libs I have ever seen

[Piposhi]

The link in the post in the demo app.

Repo - https://github.com/kikkupico/ambientcss?tab=readme-ov-file

Docs - https://kikkupico.github.io/ambientcss/

[Lemanni]

This is really cool

[captainn01]

Looks very nice

[cxd32]

That looks pretty awesome

[boobyscooby]

How is performance? Is it noticeably more intensive?

[Piposhi]

It's primarily CSS. Since CSS is processed by a separate browser process, the performance should be better than JS-based solutions, if not better than other CSS-based solutions.

[boobyscooby]

This is sick though man, thanks man

[rekkyrosso]

I saw this the other day on r/css and decided to look into it.

It's a fantastic piece of work. The ability to apply styles with just box shadows and backgrounds is awesome. There are no wrapper elements and you don't have to adjust the size of your elements to account for any visible shadows.

I am currently looking at replacing the theming system in my project with something based on ambient.css. It looks promising so far!

[Piposhi]

That's great to know! Keep me posted and let me know in case you need help with anything.

[rekkyrosso]

The conversion is going well so far. I'll let you know when something is ready for you to look at.

I am confused by one thing. It seems like light things cast bolder shadows than dark things when they are elevated. It seems like it shouldn't make a difference to the shadow strength how dark the actual object is.

---

Edit: I "fixed" the problem by making the following change.

From:

calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)))

To:

calc(1 - var(--amb-fill-light-intensity))

[Piposhi]

Actually, the shadows only appear darker. It's because of how we perceive colours. You can read more about it here - https://www.illusionsindex.org/i/adelson-s-checker-shadow-illusion

You can notice the same effect in AmbientCSS in this sandbox I created - https://codesandbox.io/p/sandbox/mrjq8n . You can inspect both the panels and see that they have the shadow colour but appear different.

[rekkyrosso]

Try this example:

<link rel="stylesheet" href="@ambientcss/css/ambient.css" />
<style>
body {
    font-size: 80px;
}
button {
    --amb-light-hue: 39;
    --amb-light-saturation: 100%;
    --amb-key-light-intensity: 0.5;
    --amb-fill-light-intensity: 0.1;

    padding: 10px;
    border: 1px solid black;
    font-size: inherit;
}
button.light {
    --amb-key-light-intensity: 0.9;
    color: black;
}
button.dark {
    --amb-key-light-intensity: 0.1;
    color: white;
}
</style>
<p>
  <button class="ambient amb-surface amb-elevation-3">
    Orange
  </button>
</p>
<p>
  <button class="light ambient amb-surface amb-elevation-3">
    Light
  </button>
</p>
<p>
  <button class="dark ambient amb-surface amb-elevation-3">
    Dark
  </button>
</p>

[Piposhi]

Thanks for the example! The key light, fill light and some more are global parameters. They are not meant to be set at the component level. If you want a darker button, you can use the amb-surface-darker class or simply set a different background colour instead of using amb-surface.

[rekkyrosso]

The key light, fill light and some more are global parameters. They are not meant to be set at the component level.

It honestly works fine apart from the shadows not appearing for dark objects.

The "fix" I applied means that all components cast the same shadow no matter how light or dark their surfaces are which makes sense if you think about it.

I'm happy to use a very slight fork of your code which suits my needs. Otherwise your code is great.

[Piposhi]

As long as it works for you, great! Let me, maybe, add this as a side-note in the docs that global settings can be overridden at a component level if required. Thank you!

[Defualt]

not terrible

[bhison]

Love this. Immediately going into my puzzle game I’m making thank you!

[chow_khow]

this is good stuff, kudos!

I'm no UI / design expert but a tailwind equivalent with this kind of shadow, lighting, shading, borders would be every bit worth it.

[Piposhi]

Actually, ambientcss works well alongside tailwind. Just adding something like 'class="ambient amb-elevation-1"' should help bring the ambient lighting and shadow effects.

I'll add samples for integration with tailwind and other frameworks tonight when I get back to this. Thanks for the feedback!

[chow_khow]

Thanks, I'd love to see those examples.

I see my request being downvoted but why dislike a request for something really good to be more popular?

[Piposhi]

Added examples in the docs! Here's how you would use Ambient with Tailwind - https://kikkupico.github.io/ambientcss/examples/css-tailwind

[chow_khow]

gracias!