Faceted Glass
CSS shapes creating a faceted glass pattern with hover effects.
Main Features of Faceted Glass
How to Use Faceted Glass in Next.js
Installation Guide for Faceted Glass
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #1c1917 | Background color |
gridCols | number | 6 | Grid columns |
gridRows | number | 6 | Grid rows |
gap | string | 0.5rem | Grid gap |
rotation | number | -12 | Grid rotation angle |
scale | number | 1.25 | Grid scale |
facetBgColor | string | rgba(255, 255, 255, 0.03) | Facet background color |
facetBorderColor | string | rgba(255, 255, 255, 0.05) | Facet border color |
facetInitialOpacity | number | 0.3 | Initial facet opacity |
facetHoverOpacity | number | 0.6 | Hover facet opacity |
facetHoverBgColor | string | rgba(255, 255, 255, 0.1) | Hover facet background color |
facetHoverScale | number | 1.05 | Hover facet scale |
blurAmount | string | xl | Blur amount |
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
QIs it interactive?
Yes, each tile (facet) responds to hover by scaling up and increasing its opacity, creating a dynamic 'diamond' shine effect.
QCan I adjust the grid layout?
Yes, you can control the number of rows and columns via `gridCols` and `gridRows` to fit any screen size or narrative section.
QDoes it support custom blurs?
Absolutely, you can set the `blurAmount` to range from a subtle glass sheen to a deep, opaque frosted finish.