Crystal

Diamond-like crystal lens with faceted refraction.

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the crystal shape

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • scale

    Scale of the crystal shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the crystal shape in degrees

    Type
    number
    Default
    0

  • cutout

    Cut out alpha outside the crystal shape

    Type
    boolean
    Default
    false

  • refraction

    How strongly the crystal refracts content beneath

    Type
    number
    Default
    0.5

  • dispersion

    Prismatic rainbow dispersion — splits light into spectral colors

    Type
    number
    Default
    0.5

  • facets

    Symmetry order — how many times the facet pattern repeats around the center

    Type
    number
    Default
    5

  • fresnel

    Fresnel rim glow intensity around the crystal boundary

    Type
    number
    Default
    0.05

  • fresnelSoftness

    Fresnel rim width — higher values spread the glow further inward

    Type
    number
    Default
    1

  • fresnelColor

    Color of the fresnel rim glow

    Type
    string
    Default
    #ffffff

  • edgeSoftness

    Softness of the crystal boundary edge

    Type
    number
    Default
    0

  • innerZoom

    Magnification of content seen through the crystal

    Type
    number
    Default
    1.5

  • lightAngle

    Light direction angle in degrees

    Type
    number
    Default
    270

  • highlights

    Additive brightness on light-facing facets — never darkens

    Type
    number
    Default
    0.5

  • shadows

    Darkening on shadow-facing facets — never brightens

    Type
    number
    Default
    0.3

  • brightness

    Overall crystal brightness — higher values push facets toward brilliant white

    Type
    number
    Default
    1.2

  • tintColor

    Crystal body tint color

    Type
    string
    Default
    #e8e0ff

  • tintIntensity

    How much tint color is applied to the crystal interior

    Type
    number
    Default
    0

  • tintPreserveLuminosity

    Preserve original brightness when tinting

    Type
    boolean
    Default
    true

  • shape

    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.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    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.

    Type
    string
    Default
    ""

Usage

<Shader>
  <Crystal>
    <Circle />
  </Crystal>
</Shader>