AmbientKnob
Rotary mechanisms
Distance drag, absolute angle, markers, materials, and keyboard control.
Live value
The actuator frame rotates; the base, scale ring, and light direction stay in the scene.
Physics-based lighting / live DOM
Ambient CSS Playground
Download Back To CSSScript.Com
A shared light vector shapes shadows, highlights, surfaces, edges, materials, and tactile controls in real time.
Every surface shares one lamp
Turn the light. Watch the geometry follow.
Drag the dial or use the controls below. The same lighting variables reach every sample on this page.
01 / Light model
Tune the scene.
Move the source, raise the key, soften it with fill, or shift the lamp's cast. The preview updates without a page refresh.
Live responseStudio / TL
Flat
Concave
Concave H
Convex
Choose a direction to apply the matching .amb-light-* position to the live scene.
02 / Surface language
Shape, depth, finish.
Surface curvature, edge cuts, physical height, and material response are separate layers. Combine them on the same element.
Each finish keeps the scene's light direction while changing how the surface reflects, diffuses, or breaks it.
Mattequiet diffuse body
Shinytight specular highlight
Glasstranslucent diffusion
Brushedlinear micro-relief
Spunradial micro-relief
Blastedsoft granular relief
Set a material's reflectance with --amb-albedo, then tune its tone with --amb-shade.
Citrine--amb-albedo / --amb-shade
The same surface can be chamfered, filleted, recessed, raised, or left paper-thin.
Chamfersingle cut
Chamfer 2xwide cut
Filletsingle round-over
Fillet 2xwide round-over
Elevation 0resting plane
Elevation 1short shadow
Elevation 2raised body
Elevation 3deep shadow
Thickness 0paper-thin sheet
Thickness 1button-scale body
Thickness 2knob-scale body
Bounceanimated elevation
Corner utilitiesbase / md / lg / xl / full
Corner scalemd / lg / xl / full
Red
Green
Amber
Cyan
Blue
White
Glow
03 / Tactile controls
Hardware, in the browser.
The controls share one state channel, so a part can paint itself from value, angle, travel, and pressed state.
AmbientTravel
Travel mechanisms
One straight motion model powers both a horizontal slider and an upright fader.
Output
Slider / channel
Click or drag along either track. Arrow keys change the same value with the control's orientation preserved.
AmbientPress
Press states
Momentary, toggle, and repeat modes use the same tactile key surface.
Presses
Hold the round key to repeat. The square key stays pressed until it is clicked again.
AmbientLatch
Latch and switch
A two-position actuator with a real switch role, optional LED, and scene-aware paint.
State
Power
Emissive indicatorClick the switch to relight
The lamp and the actuator read the same boolean. The control stays keyboard reachable as a switch.
AmbientBank
Selection banks
Shared selection, per-key state, glass diffuser caps, and a second radio-style skin.
Selected
Vertical glass bank
Round radio bank
Multiple selection
Use the arrow keys or click a key. Each option owns its own data-on state and indicator color channel.
AmbientKitProvider
Change the visual language
The mechanism stays the same while a kit swaps the parts around it.
Kit
−+
Console toggle
Console key bank
The console kit uses a bar pointer, a circular housing, and a track that reads --ambx-percent directly.
Disabled press
Disabled bank key