Optical Capsule
Highlights are generated from a sampled capsule height field, surface normals, Fresnel rim, and specular thresholds—use this page to tune rigs, then reuse OpticalCapsule.js / OpticalCapsule.css on your own UI.
Background Rig
Controls replace the page environment behind the optical material with solid, gradient, or procedural texture backgrounds.
Global Light Rig
Controls edit the shared light field used by every capsule before the Canvas textures are baked.
Material Rig
Controls define the resin color, refraction, absorption, and internal transmission used by the baked optical layers.
Button Spec Rig
Controls define capsule dimensions, Z-section profile, shell edges, and label color / transparency / edge shadows.
Orthographic Optical Views
Generated from the current Button Spec Rig: X-Y top view, X-Z section, and Y-Z section with the shared light-path model.
Presentation states (CSS overlay)
Four separate xs previews — one column per interaction stance. Adjust opacity, brightness, saturation, glow, and button tint per column only. Uses CSS variables on each column’s preview stage — no optical rebake.