Displacement
Bends the sampled live backdrop around the generated lens field.
From a rounded surface to an optical field
The component measures its real layout box and evaluates a rounded-box lens field. Depth, curvature, splay, and edge parameters control the direction and strength of the field. The calculation happens once per stable size, then produces cached PNG textures for the SVG filter graph.
Splay interpolates between the local silhouette normal and a ray from the panel center. That center-radial field creates mirrored directional halves on every edge instead of a single global distortion direction.
Independent X and Y displacement maps
- Compute the combined optical field once.
- Encode an opaque X texture with R/X and B/specular data.
- Encode a separate opaque Y texture with G/Y data.
- Load the textures through distinct SVG
feImagenodes. - Force unused channels to exactly 0.5 before displacement.
PNG channel 128 is 128/255, not exactly 0.5. A small active-channel bias correction prevents a neutral flat field from producing residual color displacement when chromatic scales differ.
Edge-dependent pass order
One universal axis order loses tangential detail when the second pass resamples the first near a flat part of the lens. Top and bottom edges therefore use Y then X, while the sides use X then Y. An alpha mask based on edge orientation combines the completed branches arithmetically and blends their rounded corners without a dark seam.
top / bottom: Y → X
left / right: X → Y
red, green, and blue each retain both ordered branchesRefraction is only one layer
Chroma
Uses slightly different channel scales to create controlled color separation.
Material
Blur, fill, tint, glow, and edge highlight establish optical weight and contrast.
Specular light
A baked rim channel and optional pointer mask add directional surface light.
Why the fallback does not pretend to refract
Safari and Firefox cannot currently apply this SVG reference graph to a real arbitrary backdrop. Capturing or cloning the page would break live document behavior and introduce correctness, privacy, and maintenance problems. Those browsers intentionally receive CSS blur, tint, and highlight instead.