Glass Float
Floating glass testimonial cards with parallax and blur 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 |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
backgroundColor | string | #0f172a | Background color of the component (hex, rgb, or hsl). |
blob1Color | string | #9333ea | Color of the first blob effect (hex, rgb, or hsl). |
blob2Color | string | #2563eb | Color of the second blob effect (hex, rgb, or hsl). |
title | string | Community Voices | Main title text. |
titleColor | string | rgba(255,255,255,0.9) | Color of the title text (hex, rgb, or hsl). |
cardBgColor | string | rgba(255,255,255,0.1) | Background color of the testimonial cards (hex, rgb, or hsl). |
cardBorderColor | string | rgba(255,255,255,0.2) | Border color of the testimonial cards (hex, rgb, or hsl). |
cardHoverBgColor | string | rgba(255,255,255,0.1) | Background color of cards on hover (hex, rgb, or hsl). |
cardBlurColor | string | rgba(255,255,255,0.05) | Blur effect color for cards (hex, rgb, or hsl). |
cardHoverBlurColor | string | rgba(255,255,255,0.1) | Blur effect color for cards on hover (hex, rgb, or hsl). |
quoteIconColor | string | rgba(255,255,255,0.05) | Color of the quote icon (hex, rgb, or hsl). |
quoteTextColor | string | #f1f5f9 | Color of the quote text (hex, rgb, or hsl). |
avatarBorderColor | string | rgba(255,255,255,0.5) | Border color of the avatar images (hex, rgb, or hsl). |
avatarGradientFrom | string | #a78bfa | Start color of the avatar gradient (hex, rgb, or hsl). |
avatarGradientTo | string | #60a5fa | End color of the avatar gradient (hex, rgb, or hsl). |
authorNameColor | string | #ffffff | Color of the author name text (hex, rgb, or hsl). |
authorRoleColor | string | rgba(255,255,255,0.5) | Color of the author role text (hex, rgb, or hsl). |
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 testimonial section where quotes float over vibrant, blurry glass cards.
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 for readability. Optimize for performance by using efficient radial-gradients for the background blobs.
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 community feedback.
Frequently Asked Questions
QHow is the glass effect created?
It uses a combination of `backdrop-blur` and semi-transparent background colors (`rgba`) to simulate physical glass.
QCan I customize the background glows?
Yes, the `blob1Color` and `blob2Color` props allow you to set the primary and secondary glow colors behind the cards.
QIs it mobile responsive?
Absolutely, the cards scale and stack vertically on smaller screens while maintaining their blur and parallax effects.