Glass

Optically realistic glass lens driven in a custom shape

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 glass shape. Accepts CSS units, see Sizing and units.

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

  • scale

    Scale of the glass shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the glass shape in degrees

    Type
    number
    Default
    0

  • cutout

    Cut out the alpha outside the glass shape

    Type
    boolean
    Default
    false

  • refraction

    Lens refraction — how aggressively the edges warp content beneath (0 = none, 1 = max)

    Type
    number
    Default
    1

  • edgeSoftness

    Edge softness — higher values give a wider, softer fade at the glass boundary

    Type
    number
    Default
    0.1

  • blur

    Frosted blur amount — 0 = clear glass, higher = frosted/diffuse

    Type
    number
    Default
    0

  • thickness

    Glass depth — how far inward from the edge the refraction extends

    Type
    number
    Default
    0.2

  • aberration

    Chromatic aberration — splits RGB channels along the refraction vector

    Type
    number
    Default
    0.5

  • innerZoom

    Inner zoom level — magnifies content seen through the glass

    Type
    number
    Default
    1

  • lightAngle

    Light angle in degrees

    Type
    number
    Default
    300

  • highlight

    Directional edge highlight — bright rim on the light-facing boundary

    Type
    number
    Default
    0.05

  • highlightColor

    Color of the directional edge highlight and specular glint

    Type
    string
    Default
    #ffffff

  • highlightSoftness

    Specular highlight softness

    Type
    number
    Default
    0.5

  • fresnel

    Fresnel rim glow — a soft luminous halo around the glass boundary

    Type
    number
    Default
    0.1

  • fresnelSoftness

    Fresnel rim width — higher values spread the glow further inward

    Type
    number
    Default
    0.1

  • fresnelColor

    Color of the fresnel rim glow

    Type
    string
    Default
    #ffffff

  • tintColor

    Color tint applied to the internal directional gradient

    Type
    string
    Default
    #ffffff

  • tintIntensity

    Intensity of the color tint applied to the glass 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>
  <Glass>
    <Circle />
  </Glass>
</Shader>