Glass Floating
Glassmorphism tabs with floating effect and animated background images.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| tabs | TabItem[] | [{id: '1', label: 'Option 1'}, ...] | Array of tab items with id and label. |
| backgroundImages | string[] | [url1, url2, url3] | Background image URLs that transition on tab change. |
| defaultActive | number | 0 | Index of the initially active tab. |
| containerHeight | string | 16rem | Height of the container. |
| containerMaxWidth | string | 28rem | Maximum width of the container. |
| borderRadius | string | 1rem | Border radius of the container. |
| buttonTextColor | string | #ffffff | Text color of tab buttons. |
| activeIndicatorBgColor | string | rgba(255,255,255,0.3) | Background of the active indicator. |
When to Use
Ideal for high-end digital agencies, creative portfolios, and applications that want a premium glassmorphism aesthetic with immersive background transitions.
Best Practices
Use high-quality images that share a visual language. Keep tab count to 3-5 for optimal UX. Ensure text contrast remains readable over all background images.
Why This Component Matters
Glass-based aesthetics communicate sophistication and high-end craft. The background image transitions create an immersive experience that elevates the entire interface.
FAQ
QHow does the glass effect work?
The component uses backdrop-filter blur on tab buttons to simulate light refraction through translucent surfaces against the shifting background images.
QCan I use custom images?
Yes — pass any array of image URLs to the backgroundImages prop. Images are cross-faded with a subtle scale transition on tab change.
QIs it mobile responsive?
Yes, the tabs adapt their layout for smaller screens while maintaining the glassmorphism aesthetic.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.