Glass Float
Frosted glass floating stats cards with parallax effects.
Main Features of Glass Float
How to Use Glass Float in Next.js
Installation Guide for Glass Float
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
stats | Array<{icon: LucideIcon, value: number, label: string}> | [] | Array of stat items with icon, value, and label. |
backgroundColor | string | #0f172a | Background color (hex, rgb, or hsl). |
blob1Color | string | #9333ea | First blob color for background effect. |
blob2Color | string | #06b6d4 | Second blob color for background effect. |
cardBgColor | string | rgba(255,255,255,0.05) | Card background color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
cardHoverBgColor | string | rgba(255,255,255,0.1) | Card hover background color. |
iconBgFromColor | string | rgba(255,255,255,0.2) | Icon gradient start color. |
iconBgToColor | string | transparent | Icon gradient end color. |
iconColor | string | #ffffff | Icon color. |
valueColor | string | #ffffff | Value text color. |
labelColor | string | rgba(255,255,255,0.6) | Label text color. |
Related Components
When to Use
Excellent for modern tech brands, AI platforms, and Next.js applications that want a high-fidelity, 'airy' aesthetic. Use this React component for a stats section where metrics float inside vibrant, blurry glass cards with deep parallax effects.
Best Practices
Maintain consistent spacing within your design system by using it on dark or textured backgrounds to maximize the backdrop-blur effect. Follow React best practices by pairing it with high-contrast font colors. Optimize for performance by using hardware-accelerated transforms for the parallax tracking.
Why This Component Matters in Modern UI Development
Glassmorphism creates a sense of depth and technical sophistication. This production-ready UI component helpsคุณ build an interface that feels lightweight and premium, improving the perceived quality of your numerical data.
Frequently Asked Questions
QHow is the glass effect made?
It uses semi-transparent backgrounds and `backdrop-filter: blur()` to simulate physical frosted glass panes.
QDoes the parallax follow the mouse?
Yes, the cards feature a subtle 'float' animation that responds to either screen scroll or mouse movement for a sense of physical weight.
QCan I add more blobs?
The background feature uses two primary glow blobs (`blob1Color` and `blob2Color`) to create the atmospheric depth behind the cards.