Glass Flow

Flowing glass-like blur animation

glass-flow-tw

Customize

Image URL

Stripe Count

Angle

-13

Speed

0.10

Lens Curvature

0.49

Refraction

0.07

Chromatic Aberration

0.5

Frost Amount

0.0

Edge Width

0.020

Edge Brightness

0.05

Edge Sharpness

0.50

Wave Speed

1.0

Wave Amount

0.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 | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

classNamestring

Additional CSS classes for the container

Default""

imageSrcstring

Image URL for background

Default"https://images.unsplash.com/..."

videoSrcstring

Video URL for background (takes precedence over imageSrc)

Defaultundefined

stripeCountnumber

Number of glass slats/stripes

Default6

anglenumber

Rotation angle in degrees

Default-13

lensCurvaturenumber

Lens curvature power (how curved the glass appears)

Default0.49

refractionnumber

Amount of image displacement/refraction

Default0.07

edgeWidthnumber

Width of the edge highlight line

Default0.02

edgeBrightnessnumber

Brightness of the edge highlight

Default0.05

speednumber

Animation speed (positive = forward, negative = reverse)

Default0.1

chromaticAberrationnumber

Chromatic aberration intensity

Default0.5

edgeSharpnessnumber

Edge sharpness (0 = soft, 1 = sharp)

Default0.5

waveSpeednumber

Secondary wave animation speed

Default1

waveAmountnumber

Amount of wave wobble on stripes

Default0

frostAmountnumber

Frost effect intensity (blur + grain)

Default0