FlutedGlass
Full-screen fluted glass effect - refracts content through repeating cylindrical bars
Full-screen fluted glass effect - refracts content through repeating cylindrical bars
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "bars" | "rounded" | "waves" | bars | Cross-section shape of each flute |
| angle | range | 0 | Direction of the flutes in degrees (0 = vertical bars) |
| frequency | range | 10 | Number of flutes across the longest viewport axis |
| softness | range | 0.5 | How smoothly distortion fades from each flute centre to its edge (0 = flat middle / sharp seams, 1 = gentle curve) |
| waveAmplitude | range | 0.06 | How far each flute sways horizontally as it travels (Waves shape only) |
| waveFrequency | range | 1.5 | How many sways fit along each flute (Waves shape only) |
| speed | range | 0 | Animation speed - drifts the flute pattern over time and flows wave perturbations |
| refraction | range | 1.5 | How aggressively each flute bends content beneath it |
| aberration | range | 0.2 | Chromatic aberration - splits RGB along the refraction direction at flute seams |
| lightAngle | range | 30 | Direction the light source is coming from (0 = head-on, 90 = grazing) |
| highlight | range | 0.2 | Strength of the specular reflection on each flute |
| highlightSoftness | range | 0.3 | Spread of the specular peak (0 = pin-tight, 1 = broad sheen) |
| highlightColor | color | #ffffff | Color of the specular highlight |
| edges | "stretch" | "transparent" | "mirror" | "wrap" | mirror | How to handle edges when distortion samples beyond the canvas |
Usage
vue
<Shader>
<FlutedGlass>
<Circle />
</FlutedGlass>
</Shader>