ambientcss · shadows solved from one light
ambientcss
Everything on a screen is flat. The shadow under a button is a grey smudge somebody nudged around by eye. Ambient CSS is one file you add to a web page. You put a light on the page, and every edge works out its own shadow from where that light is. Those shadow numbers came out of Blender, the free 3D program animators use.
These two frames are the same page, one click apart
The project’s demo has three discs: one dished in, one flat, one domed out. You tell the container where the light is, then you tag each box inside that container. One click moves the lamp to the other corner and turns the lamp down. The bright side of every disc swaps over, the shadows swing across, and the whole panel goes dark.
The blur under a button is a number somebody chose
Where do the numbers in a shadow come from? Usually from a person. Somebody types a number, looks at it, types a bigger one, and stops when it looks right. That is a taste decision. This file answers that question differently.
Five shadow bands, and every distance in them is arithmetic
Here is one box with Ambient CSS on it. Its shadow is five separate bands stacked on top of each other, and each band draws a different part of the edge. First, the shadow the box throws on the page. Then a bright band and a dark band along the bevelled edge, the cut around the rim. Then two softer bands just inside them. And here is what the file actually says for that drop shadow. Every distance in it is arithmetic: which way the light points, multiplied by how high the box sits at six point eight pixels a level, plus how thick it is at three point eight pixels a level.
The shadow numbers come out of a Blender render
So somebody had to know that six point eight pixels. The project ships the lab that made it. The author built the part in Blender and lit it on a plain studio backdrop. One command renders the reference parts, one picture each. A second command measures how the light fades off every edge in those renders, fits a curve to each one, and writes the answers into a single file. That calibration setup is about half of what is in the project. And back in the file a browser downloads, the drop shadow carries a comment naming the exact lab note its numbers came from.
The measurement file says 1.571. The stylesheet says 1.57.
Here is the whole round trip, closed on one band. The measurement file says the bright band along a bevelled edge is one point five seven one times the main lamp, plus zero point eight five one times the softer fill lamp, minus one point zero three two. The file a browser downloads says one point five seven, zero point eight five, one point zero three. They are the same three numbers, rounded. That constant is the answer to a measurement, and the measurement ships beside the constant.
The panel’s colour and the lamp’s colour are two different settings
The same rule covers colour. You give the panel its own colour, and everything inside the panel takes that colour: the grooves and the knobs. Turn the lamp red and the whole scene reads red, while the panel’s own colour sits where you left it.
There is no key and no account to set up
It installs in one line, and the licence is MIT, so you can use this in anything. The version lives on npm, where these packages get published. Right now it is three point zero point one. The docs site has a kit builder that assembles a knob and hands you the file.
You set the light once, and every edge follows
That hardware panel was one object shown twice: once traced ray by ray in Blender, once drawn by a browser. That is kikkupico slash ambientcss, on GitHub. New repo tomorrow.
