PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
MAGNIFY · GLASS · REFRACTION · BADGES
A macOS-style dock and navigation bar made of liquid glass - backdrop blur, saturation, a specular edge and real refraction, with smooth fisheye magnification, tooltips, badges and active dots.
LIVE PREVIEW - HOVER THE DOCK
TAB IN · ← → TO MOVE · FOCUS MAGNIFIES
VARIANTS & PRESETS
01 - VERTICAL
Side dock · left rail
Vertical orientation grows to the right with tooltips beside the icons - perfect for app-like layouts.
02 - FROSTED LIGHT
Glass glyphs on a light tint
Glyph tiles coloured per item on a milky glass bar. Calm, minimal and readable on bright imagery.
03 - MOBILE TAB BAR
Compact · no magnify
Smaller icons and magnification off - the exact setup used automatically below the mobile breakpoint.
04 - DARK GLASS
Smoked tint · badges
A dark smoked tint with a subtle edge, notification badges and a bold active dot.
HOW TO USE
01
Drop it on the canvas
Insert Liquid Glass Dock from Assets. It sizes itself (auto width & height). For a real dock, wrap it in a Fixed frame pinned to the bottom center of the page.
02
Put something behind it
Glass needs content behind it - an image, gradient or scrolling page. Blur, Saturation and Tint shape the material.
03
Add your items
Each item has a Label (tooltip + accessible name), built-in Icon or Image, Color, Link, Active state and Badge.
04
Use your own icons (optional)
Connect layers or components to Custom Icons - slot 1 replaces item 1’s icon, and so on.
05
Tune magnification
Size → Magnify sets the peak scale, Range how many neighbours grow with it. Set Magnify to 1 for a static bar.
06
Check mobile
Below the Mobile breakpoint icons shrink, tooltips hide and magnification turns off (unless enabled).
PROPERTY CONTROLS
Items
Label, Icon (19 built-in), Image, Color, Link, Active, Badge - up to 16 items.
Custom Icons
Slot array; each connected layer replaces the icon at the same position.
Orientation
Horizontal (grows upward) or Vertical (grows to the right).
Tiles / Glyph
App Icons (gradient tiles, white glyphs) or Glass Glyphs (coloured glyphs on glass chips).
Size → Icon / Gap / Padding / Tile Radius
Base dimensions of the dock.
Size → Magnify / Range
Peak hover scale and the reach of the fisheye effect.
Glass → Tint / Blur / Saturation / Specular / Radius / Edge / Shadow
The liquid-glass material.
Glass → Refraction / Strength
SVG displacement of the backdrop (Chromium); other browsers fall back to blur.
Tooltips → Show / Text / Fill · Tooltip Font
Label bubbles shown on hover and keyboard focus.
Indicator → Active Dot / Color
Dot under items marked Active (aria-current=page).
Canvas Hover
Which item appears magnified on the Framer canvas (design preview only).
Mobile → Below / Icon / Magnify
Breakpoint, icon size and magnification on small screens.
PERFORMANCE
Magnification is computed once per animation frame from the pointer position; only width/height of the icons change. No libraries, no canvas.
MOBILE
Touch never triggers magnification. Icons shrink below the breakpoint and the bar scrolls horizontally if it doesn’t fit.
ACCESSIBILITY
A toolbar with roving focus: Tab enters, arrow keys / Home / End move, focus magnifies and shows the tooltip. Labels are accessible names; reduced motion disables magnification.
© 2026 PIXLIFY - MADE IN WARSAW
LIQUID GLASS DOCK · PREMIUM COMPONENT · BY PIXLIFY