Glass Flow
Flowing glass-like blur animation
glass-flow-tw
Customize
Tweak the props liveBasic
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) |
widthnumber | stringWidth of the component in pixels or CSS value
Default:
"100%"heightnumber | stringHeight of the component in pixels or CSS value
Default:
"100%"classNamestringAdditional CSS classes for the container
Default:
""imageSrcstringImage URL for background
Default:
"https://images.unsplash.com/..."videoSrcstringVideo URL for background (takes precedence over imageSrc)
Default:
undefinedstripeCountnumberNumber of glass slats/stripes
Default:
6anglenumberRotation angle in degrees
Default:
-13lensCurvaturenumberLens curvature power (how curved the glass appears)
Default:
0.49refractionnumberAmount of image displacement/refraction
Default:
0.07edgeWidthnumberWidth of the edge highlight line
Default:
0.02edgeBrightnessnumberBrightness of the edge highlight
Default:
0.05speednumberAnimation speed (positive = forward, negative = reverse)
Default:
0.1chromaticAberrationnumberChromatic aberration intensity
Default:
0.5edgeSharpnessnumberEdge sharpness (0 = soft, 1 = sharp)
Default:
0.5waveSpeednumberSecondary wave animation speed
Default:
1waveAmountnumberAmount of wave wobble on stripes
Default:
0frostAmountnumberFrost effect intensity (blur + grain)
Default:
0