Settings›Lighting
Lighting
Set the light once for the whole page. Every piece of glass picks it up, and any single element can change one setting without touching the rest.
import { setSceneLight } from "@edinstvo/glass";
setSceneLight({ direction: "top-left", intensity: "80%", color: "white", softness: 0.6, diffusion: 0.2 });These controls drive the real engine, and every example below follows them.
Global lighting
Nothing is set on these three. They all take the scene light, so turning it moves every highlight together.
Local lighting
Each element here sets its own light. Scene direction and colour no longer reach what it replaced.
Mixed lighting
The middle one replaces only the colour. Turn Direction: it moves with its neighbours. Change Color: it stays blue.
<edinstvo-glass light-color="blue"></edinstvo-glass>Every light setting works on its own, in one of three states:
| Value | What it does |
|---|---|
inherit | Takes the parent value: group, then CSS, then scene. Same as leaving it out |
| a value | Overrides this setting only |
default | Goes back to the engine value, past the scene |
Dynamic refraction (beta)
This effect is in beta and may change. Glass bends harder where the content behind it changes, and the shape sets how far. Off by default, and when off it costs nothing. Drag the glass over the word.
Environmental reflections
The curve mirrors what really sits around the glass, not a painted gradient, and takes on the scene or local light. Drag it to see the reflection change.
Combined effects
Scene light, a local colour, refraction and reflections, all in one pass.
Settings
| Attribute | Scene | What it does |
|---|---|---|
light-angle | direction | Where the light comes from: degrees or words like top-left |
light | intensity | How strong it is, 0 to 1 or a percent |
light-color | color | Colour of the light, any CSS colour |
light-softness | softness | Wraps light around the curve, 0 to 1 |
light-diffusion | diffusion | Spreads it across the surface, 0 to 1 |
dynamic-refraction (beta) and reflection take 0 to 1 per element; 0 turns them off. All of this also works as CSS variables, like --glass-light-color.