Lens
I built the draggable lens with a center-zoom field and a separate bezel-refraction field. Direct contact flexes the geometry from the touch point while its specular sheen stays broad instead of forming a click spot. I tuned its opening preset to zero specular and tint, 0.03 refraction, a 40px bezel, and 71px thickness. Supported Chromium contexts use the SVG backdrop path; for Safari and Chromium contexts without SVG URL backdrop filtering, I render the same displacement, center-zoom, and specular maps through an on-demand WebGL2 shader. I also made the mesh follow the site's global theme in both renderers.
Switch
I built the switch with lip displacement and specular maps, a tuned filter scale, custom dimensions and colors, and elastic drag geometry. I made the thumb white at rest and expand into transparent refractive glass while pressed. The SVG filter is the primary renderer; in Safari and Chromium contexts without SVG URL backdrop filtering, I run the same optical maps through an on-demand WebGL2 material. The mesh backdrop follows the site's global theme.
Slider
I built the slider with convex displacement and specular maps, a 90×60 thumb, 330px rail geometry, and a 10% starting value. It keeps accessible pointer and keyboard slider semantics with the defaults I tuned: 0.40 opacity, 7 saturation, 1.00 refraction, and 0.0 blur. The SVG filter is the primary renderer; in Safari and Chromium contexts without SVG URL backdrop filtering, I run the same optical maps through an on-demand WebGL2 material. The mesh backdrop follows the global theme so its refraction stays visible in both contrast modes.