PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
GLASS · STRETCH · SPRINGS
The glass indicator runs on two springs - the leading edge jumps ahead, the trailing edge catches up - so it stretches, squashes with speed and lands with a soft overshoot. Drag it like a real control.
LIVE PREVIEW - CLICK A TAB OR DRAG THE GLASS
TAB TO FOCUS · ← → SWITCH · HOME / END
VARIANTS & PRESETS
01 - LIGHT
Nav · light glass
White glass on a light page with a badge on one tab.
02 - ICONS
App bar · solid accent
Icons with labels, a badge and a solid lime pill instead of glass.
03 - GALLERY
Image panels · bar on top
Four photos with captions, the bar floats over the top edge.
04 - BOUNCY
Segmented · extra stretch
Stretch 2 and lower damping for a playful Day / Week / Month switch.
HOW TO USE
01
Insert Glass Tabs
Drag it onto the canvas. 420 × 64 px for a tab bar, or about 600 × 400 px with Image Panels.
02
Write the tabs
Up to 8 tabs with label, icon, badge and an optional link. Leave the label empty for icon-only tabs.
03
Pick the content
Tabs Only for a nav or a switch. Image Panels adds an image, title and text per tab, with the bar over the bottom, over the top or above.
04
Size it
Width Fit or Fill, tabs Hug or Equal, plus height, padding, radius and squircle corners.
05
Style the glass
Track fill, blur and border, glass fill, highlight and border, and every text colour.
06
Tune the springs
Stiffness, damping and Stretch. Stretch 0 gives a classic sliding pill, 2 a liquid one.
07
Drive other layers
Use On Change or On Tab 1-5 to switch variants elsewhere on the page.
PROPERTY CONTROLS
Tabs
Label, icon, badge, image, title, text and link for up to 8 tabs.
Start Tab
Which tab is active on load and on the canvas.
Content / Bar
Tabs Only or Image Panels, with the bar over the bottom, over the top or above.
Width / Tabs
Fit or Fill, Hug or Equal widths.
Shape
Height, padding, tab padding, radius, squircle, panel radius and gap.
Track / Glass
Fill, blur, border and shadow for the bar and the pill, plus the glass highlight.
Colors
Text, active, hover, badge and caption colours.
Spring
Stiffness, damping and stretch.
Hover Pill / Drag Glass / Autoplay
A soft hover highlight, drag to switch, and auto advance that pauses on hover.
Events
On Change and On Tab 1-5.
PERFORMANCE
Only transforms, size and a clip path on one element, and an animation loop that sleeps when the springs settle.
MOBILE
Tap or swipe across the bar. Too many tabs for the width scroll sideways.
ACCESSIBILITY
Real tablist, tab and tabpanel roles, arrow keys, Home and End, visible focus. Reduced motion removes the stretch.
© 2026 PIXLIFY - MADE IN WARSAW
GLASS TABS · PREMIUM COMPONENT · BY PIXLIFY