FlutedGlass

Full-screen fluted glass effect — refracts content through repeating cylindrical bars

Props

  • shape

    Cross-section shape of each flute

    Type
    "bars" | "rounded" | "waves"
    Default
    bars

  • angle

    Direction of the flutes in degrees (0 = vertical bars)

    Type
    number
    Default
    0

  • frequency

    Number of flutes across the longest viewport axis

    Type
    number
    Default
    10

  • softness

    How smoothly distortion fades from each flute centre to its edge (0 = flat middle / sharp seams, 1 = gentle curve)

    Type
    number
    Default
    0.5

  • waveAmplitude

    How far each flute sways horizontally as it travels (Waves shape only)

    Type
    number
    Default
    0.06

  • waveFrequency

    How many sways fit along each flute (Waves shape only)

    Type
    number
    Default
    1.5

  • speed

    Animation speed — drifts the flute pattern over time and flows wave perturbations

    Type
    number
    Default
    0

  • refraction

    How aggressively each flute bends content beneath it

    Type
    number
    Default
    1.5

  • aberration

    Chromatic aberration — splits RGB along the refraction direction at flute seams

    Type
    number
    Default
    0.2

  • lightAngle

    Direction the light source is coming from (0 = head-on, 90 = grazing)

    Type
    number
    Default
    30

  • highlight

    Strength of the specular reflection on each flute

    Type
    number
    Default
    0.2

  • highlightSoftness

    Spread of the specular peak (0 = pin-tight, 1 = broad sheen)

    Type
    number
    Default
    0.3

  • highlightColor

    Color of the specular highlight

    Type
    string
    Default
    #ffffff

  • edges

    How to handle edges when distortion samples beyond the canvas

    Type
    "stretch" | "transparent" | "mirror" | "wrap"
    Default
    mirror

Usage

<Shader>
  <FlutedGlass>
    <Circle />
  </FlutedGlass>
</Shader>