Documentation

Crystal

Diamond-like crystal lens with faceted refraction.

Props

center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the crystal shape
scalenumber
Default:1
Scale of the crystal shape (1 = default size)
cutoutboolean
Default:false
Cut out alpha outside the crystal shape
refractionnumber
Default:0.5
How strongly the crystal refracts content beneath
dispersionnumber
Default:0.5
Prismatic rainbow dispersion — splits light into spectral colors
facetsnumber
Default:5
Symmetry order — how many times the facet pattern repeats around the center
fresnelnumber
Default:0.05
Fresnel rim glow intensity around the crystal boundary
fresnelSoftnessnumber
Default:1
Fresnel rim width — higher values spread the glow further inward
fresnelColorstring
Default:#ffffff
Color of the fresnel rim glow
edgeSoftnessnumber
Default:0
Softness of the crystal boundary edge
innerZoomnumber
Default:1.5
Magnification of content seen through the crystal
lightAnglenumber
Default:270
Light direction angle in degrees
highlightsnumber
Default:0.5
Additive brightness on light-facing facets — never darkens
shadowsnumber
Default:0.3
Darkening on shadow-facing facets — never brightens
brightnessnumber
Default:1.2
Overall crystal brightness — higher values push facets toward brilliant white
tintColorstring
Default:#e8e0ff
Crystal body tint color
tintIntensitynumber
Default:0
How much tint color is applied to the crystal interior
tintPreserveLuminosityboolean
Default:true
Preserve original brightness when tinting
shapeShapeConfig
Default:polygonSDF
Shape 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.
shapeSdfUrlstring
Default:""
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>
  <Crystal>
    <Circle />
  </Crystal>
</Shader>