Backgrounds & Visuals
Glass Bricks
Structured geometric grid with glass morphism effect and animated background.
blurglassbricksgeometricstructured
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #111111 | Background color |
gradientFrom | string | #6366f1 | Gradient start color |
gradientVia | string | #a855f7 | Gradient middle color |
gradientTo | string | #ec4899 | Gradient end color |
gradientSize | string | 80vh | Gradient size |
gradientBlur | string | 100px | Gradient blur |
gradientTranslateX | string[] | ['-50%', '-30%', '-70%', '-50%'] | Gradient X translation animation |
gradientTranslateY | string[] | ['-50%', '-70%', '-30%', '-50%'] | Gradient Y translation animation |
gradientRotate | number[] | [0, 90, 180, 360] | Gradient rotation animation |
gradientDuration | number | 20 | Gradient animation duration |
gridCols | number | 6 | Grid columns |
gridColsMd | number | 12 | Grid columns on medium screens |
gridRows | number | 6 | Grid rows |
gridRowsMd | number | 8 | Grid rows on medium screens |
gap | string | 0.25rem | Grid gap |
padding | string | 1rem | Grid padding |
brickBgColor | string | rgba(255, 255, 255, 0.05) | Brick background color |
brickBorderColor | string | rgba(255, 255, 255, 0.05) | Brick border color |
brickBlur | string | 2xl | Brick blur |
brickCount | number | 96 | Number of bricks |
text | string | Matrix | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |