Glass Flow

An image or video seen through flowing fluted glass

glass-flow-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

See your work through new glass

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

See your work through new glass

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

See your work through new glass

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

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

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)