Glass
Glassmorphism video player with blur effects.
Main Features of Glass
How to Use Glass in Next.js
Installation Guide for Glass
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
video | string | http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 | Video source URL. |
backgroundColor | string | #0f172a | Background color (hex, rgb, or hsl). |
progressGradientFrom | string | #8b5cf6 | Progress bar gradient start color (hex, rgb, or hsl). |
progressGradientTo | string | #ec4899 | Progress bar gradient end color (hex, rgb, or hsl). |
Related Components
When to Use
Excellent for high-end digital agencies, award-winning portfolios, and Next.js platforms that want a premium 'Glassmorphism' aesthetic. Use this video player for an immersive experience with blur effects and light refraction cues.
Best Practices
Follow React best practices by pairing this with high-contrast, bold imagery. Maintain consistent spacing within your design system by keeping the UI cards centered. Optimize for performance by managed the amount of blur renders.
Why This Component Matters in Modern UI Development
Glass-based aesthetics communicate digital excellence, sophistication, and high-end craft. This production-ready UI template helpsคุณ build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
Frequently Asked Questions
QIs the blur real?
The component uses localized backdrop-filter blur and subtle inner glows (glass-shadows) to simulate light refraction through high-fidelity translucent surfaces.
QCan I adjust gradients?
Absolutely, you can customize both the primary `progressGradientFrom` and `progressGradientTo` colors to match your digital brand's specific intensity.
QIs it mobile responsive?
The glass cards and playback bars adapt their spans and layouts for mobile, ensuring the refractive narrative remains impactful and legible on small screens.