Glass Tiles

A shimmering background of colorful glass tiles

glass-tiles-tw

Customize

Speed

1.00

Opacity

1.00

Chromatic Spread

0.00

Tile Density

4.0

Ripple Layers

Warp Strength

0.330

Band Sharpness

3.0

Color A

Color B

Background

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`1`	Animation speed multiplier (0–3)
`tileDensity`	number	`4`	Tile lattice density across the surface (1–16)
`rippleLayers`	number	`6`	Number of directional ripple layers stacked through the tile pole (1–8)
`warpStrength`	number	`0.33`	Per-tile inverse-distance warp strength (0–0.6)
`bandSharpness`	number	`3`	Sharpness of the bright band peaks; higher is thinner, hotter ribbons (0.5–10)
`chromaticSpread`	number	`0`	Per-channel chromatic separation along the gradient axis (0–1)
`colorA`	string	`"#1E00FF"`	First gradient stop in hex format (the deeper color)
`colorB`	string	`"#D765E6"`	Second gradient stop in hex format (the brighter color)
`backgroundColor`	string	`"#FFFFFF"`	Background fill where the field is fully dark in hex format
`opacity`	number	`1`	Master alpha (0–1)
`dpr`	number	`1.5`	Maximum device pixel ratio (caps GPU work) (1–3)

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Animation speed multiplier (0–3)

Default1

tileDensitynumber

Tile lattice density across the surface (1–16)

Default4

rippleLayersnumber

Number of directional ripple layers stacked through the tile pole (1–8)

Default6

warpStrengthnumber

Per-tile inverse-distance warp strength (0–0.6)

Default0.33

bandSharpnessnumber

Sharpness of the bright band peaks; higher is thinner, hotter ribbons (0.5–10)

Default3

chromaticSpreadnumber

Per-channel chromatic separation along the gradient axis (0–1)

Default0

colorAstring

First gradient stop in hex format (the deeper color)

Default"#1E00FF"

colorBstring

Second gradient stop in hex format (the brighter color)

Default"#D765E6"

backgroundColorstring

Background fill where the field is fully dark in hex format

Default"#FFFFFF"

opacitynumber

Master alpha (0–1)

Default1

dprnumber

Maximum device pixel ratio (caps GPU work) (1–3)

Default1.5