Glass Bricks
Structured geometric grid with glass morphism effect and animated background.
Main Features of Glass Bricks
How to Use Glass Bricks in Next.js
Installation Guide for Glass Bricks
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 |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QAre the bricks interactive?
The bricks are static by default to provide a solid background structure, but they can be easily extended with hover-based lift or glow effects.
QCan I change the brick size?
Yes, the `gridCols` and `gridRows` props allow you to control the density and aspect ratio of the bricks.
QHow is the background animated?
A multi-layered gradient moves behind the bricks, creating a dynamic refraction effect as the colors shift through the glass.