Glass
Optically realistic glass lens driven in a custom shape
Props
Prop
Details
center{x: number, y: number}Default:
{"x":0.5,"y":0.5}Center position of the glass shape
center{x: number, y: number}Default: {"x":0.5,"y":0.5}Center position of the glass shape
scalenumberDefault:
1Scale of the glass shape (1 = default size)
scalenumberDefault: 1Scale of the glass shape (1 = default size)
cutoutbooleanDefault:
falseCut out the alpha outside the glass shape
cutoutbooleanDefault: falseCut out the alpha outside the glass shape
refractionnumberDefault:
1Lens refraction — how aggressively the edges warp content beneath (0 = none, 1 = max)
refractionnumberDefault: 1Lens refraction — how aggressively the edges warp content beneath (0 = none, 1 = max)
edgeSoftnessnumberDefault:
0.1Edge softness — higher values give a wider, softer fade at the glass boundary
edgeSoftnessnumberDefault: 0.1Edge softness — higher values give a wider, softer fade at the glass boundary
blurnumberDefault:
0Frosted blur amount — 0 = clear glass, higher = frosted/diffuse
blurnumberDefault: 0Frosted blur amount — 0 = clear glass, higher = frosted/diffuse
thicknessnumberDefault:
0.2Glass depth — how far inward from the edge the refraction extends
thicknessnumberDefault: 0.2Glass depth — how far inward from the edge the refraction extends
aberrationnumberDefault:
0.5Chromatic aberration — splits RGB channels along the refraction vector
aberrationnumberDefault: 0.5Chromatic aberration — splits RGB channels along the refraction vector
innerZoomnumberDefault:
1Inner zoom level — magnifies content seen through the glass
innerZoomnumberDefault: 1Inner zoom level — magnifies content seen through the glass
lightAnglenumberDefault:
300Light angle in degrees
lightAnglenumberDefault: 300Light angle in degrees
highlightnumberDefault:
0.05Directional edge highlight — bright rim on the light-facing boundary
highlightnumberDefault: 0.05Directional edge highlight — bright rim on the light-facing boundary
highlightColorstringDefault:
#ffffffColor of the directional edge highlight and specular glint
highlightColorstringDefault: #ffffffColor of the directional edge highlight and specular glint
highlightSoftnessnumberDefault:
0.5Specular highlight softness
highlightSoftnessnumberDefault: 0.5Specular highlight softness
fresnelnumberDefault:
0.1Fresnel rim glow — a soft luminous halo around the glass boundary
fresnelnumberDefault: 0.1Fresnel rim glow — a soft luminous halo around the glass boundary
fresnelSoftnessnumberDefault:
0.1Fresnel rim width — higher values spread the glow further inward
fresnelSoftnessnumberDefault: 0.1Fresnel rim width — higher values spread the glow further inward
fresnelColorstringDefault:
#ffffffColor of the fresnel rim glow
fresnelColorstringDefault: #ffffffColor of the fresnel rim glow
tintColorstringDefault:
#ffffffColor tint applied to the internal directional gradient
tintColorstringDefault: #ffffffColor tint applied to the internal directional gradient
tintIntensitynumberDefault:
0Intensity of the color tint applied to the glass interior
tintIntensitynumberDefault: 0Intensity of the color tint applied to the glass interior
tintPreserveLuminositybooleanDefault:
truePreserve original brightness when tinting
tintPreserveLuminositybooleanDefault: truePreserve original brightness when tinting
shapeShapeConfigDefault:
circleSDFShape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeShapeConfigDefault: circleSDFShape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeSdfUrlstringDefault:
""URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.
shapeSdfUrlstringDefault: ""URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.
Usage
<Shader>
<Glass>
<Circle />
</Glass>
</Shader>