Glass Flow
Flowing glass-like blur animation
glass-flow-tw
Customize
Basic
6
-13
0.1
Lens & Refraction
0.49
0.07
0.5
0
Edge & Wave
0.02
0.05
0.5
1
0
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the component in pixels or CSS value |
| height | number | string | "100%" | Height of the component in pixels or CSS value |
| className | string | "" | Additional CSS classes for the container |
| imageSrc | string | "https://images.unsplash.com/..." | Image URL for background |
| videoSrc | string | undefined | Video URL for background (takes precedence over imageSrc) |
| stripeCount | number | 6 | Number of glass slats/stripes |
| angle | number | -13 | Rotation angle in degrees |
| lensCurvature | number | 0.49 | Lens curvature power (how curved the glass appears) |
| refraction | number | 0.07 | Amount of image displacement/refraction |
| edgeWidth | number | 0.02 | Width of the edge highlight line |
| edgeBrightness | number | 0.05 | Brightness of the edge highlight |
| speed | number | 0.1 | Animation speed (positive = forward, negative = reverse) |
| chromaticAberration | number | 0.5 | Chromatic aberration intensity |
| edgeSharpness | number | 0.5 | Edge sharpness (0 = soft, 1 = sharp) |
| waveSpeed | number | 1 | Secondary wave animation speed |
| waveAmount | number | 0 | Amount of wave wobble on stripes |
| frostAmount | number | 0 | Frost effect intensity (blur + grain) |