Documentation

GuidesComponents

FlutedGlass

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

Props

shape"bars" | "rounded" | "waves"
Default:bars
Cross-section shape of each flute
anglenumber
Default:0
Direction of the flutes in degrees (0 = vertical bars)
frequencynumber
Default:10
Number of flutes across the longest viewport axis
softnessnumber
Default:0.5
How smoothly distortion fades from each flute centre to its edge (0 = flat middle / sharp seams, 1 = gentle curve)
waveAmplitudenumber
Default:0.06
How far each flute sways horizontally as it travels (Waves shape only)
waveFrequencynumber
Default:1.5
How many sways fit along each flute (Waves shape only)
speednumber
Default:0
Animation speed — drifts the flute pattern over time and flows wave perturbations
refractionnumber
Default:1.5
How aggressively each flute bends content beneath it
aberrationnumber
Default:0.2
Chromatic aberration — splits RGB along the refraction direction at flute seams
lightAnglenumber
Default:30
Direction the light source is coming from (0 = head-on, 90 = grazing)
highlightnumber
Default:0.2
Strength of the specular reflection on each flute
highlightSoftnessnumber
Default:0.3
Spread of the specular peak (0 = pin-tight, 1 = broad sheen)
highlightColorstring
Default:#ffffff
Color of the specular highlight
edges"stretch" | "transparent" | "mirror" | "wrap"
Default:mirror
How to handle edges when distortion samples beyond the canvas

Usage

<Shader>
  <FlutedGlass>
    <Circle />
  </FlutedGlass>
</Shader>
Previous
FlowingGradient
Next
Fog