Frosted Prism
Glass refraction effect with rotating conic gradient and frosted backdrop blur.
Main Features of Frosted Prism
How to Use Frosted Prism in Next.js
Installation Guide for Frosted Prism
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #ffffff | Background color |
conicGradientColors | string | #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 | Comma-separated colors for conic gradient |
conicOpacity | number | 0.8 | Opacity of conic gradient |
conicSize | string | 200% | Size of conic gradient |
conicPosition | string | top-[-50%] left-[-50%] | Position of conic gradient |
conicDuration | number | 30 | Rotation duration in seconds |
panelBgColor | string | rgba(255, 255, 255, 0.3) | Panel background color |
panelBlur | string | 100px | Panel blur amount |
panelBorderColor | string | rgba(255, 255, 255, 0.2) | Panel border color |
panelPadding | string | 1rem | Panel padding |
panelPaddingMd | string | 3rem | Panel padding on medium screens |
panelBorderRadius | string | 1.5rem | Panel border radius |
overlayColor | string | rgba(255, 255, 255, 0.2) | Overlay color |
overlayOpacity | number | 1 | Overlay opacity |
noiseOpacity | number | 0.25 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Frost | 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
QHow does the prism rotation work?
It uses a hardware-accelerated CSS rotation on a conic gradient to simulate moving light reflections through glass.
QCan I adjust the frosted effect?
Yes, the `panelBlur` and `panelBgColor` props allow you to control how 'milky' or transparent the glass appears.
QIs it mobile responsive?
Absolutely, the panel dimensions and background scale adapt to different screen sizes for a consistent refractive experience.