Glass Tiles

A shimmering background of colorful glass tiles

glass-tiles-tw

Customize

Tweak the props live

Animation

Speed1

Opacity1

Chromatic Spread0

Tile Field

Tile Density4

Ripple Layers6

Warp Strength0.33

Band Sharpness3

Color

Color A

#1E00FF

Color B

#D765E6

Background

#FFFFFF

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

Default:undefined

speednumber

Animation speed multiplier (0–3)

Default:1

tileDensitynumber

Tile lattice density across the surface (1–16)

Default:4

rippleLayersnumber

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

Default:6

warpStrengthnumber

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

Default:0.33

bandSharpnessnumber

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

Default:3

chromaticSpreadnumber

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

Default:0

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)

Default:1

dprnumber

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

Default:1.5