PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
MORPH · GLASS · SPRINGS
Click and the pill stretches into a frosted panel on a spring - width first, then height - while the label crossfades and the icon morphs into a close mark.
LIVE PREVIEW - CLICK A BUTTON TO MORPH IT
TAB TO FOCUS · ENTER OPENS · ↑ ↓ MOVE · ESC CLOSES
VARIANTS & PRESETS
01 - LIGHT
Form · light glass
A newsletter signup in light frosted glass with a dark button.
02 - HOVER
Menu · opens down on hover
Left aligned, drops down and opens when the cursor arrives - a workspace menu for a nav bar.
03 - TINTED
Player · warm tint
Custom cover, warm glass tint and an orange accent.
04 - BOUNCY
Menu · loose spring
Lower damping and a longer stagger for a playful share menu.
HOW TO USE
01
Insert Morph Button
Drag it onto the canvas. 360 × 380 px is a good start - the button sits on the edge of the frame and the empty space is where the panel opens.
02
Pick what it becomes
Set Morph Into to Menu, Form or Player and write the button label.
03
Add the content
Menu Items with icon, label, shortcut and link, or the form texts and POST URL, or the track, artist, cover and an audio file.
04
Place it
Opens Up or Down and Align Left, Center or Right, so it fits a nav bar, a footer or a floating corner.
05
Style the glass
Blur, tint, border and shadow, plus text, button, icon and accent colours, button height, open width and radius.
06
Tune the springs
Stiffness, damping and stagger. Lower damping gives more overshoot.
PROPERTY CONTROLS
Morph Into
Menu · Form · Player.
Label / Open Label
Text on the button when closed and when open.
Opens / Align / Trigger
Up or Down, Left, Center or Right, Click or Hover.
Menu Items
Up to 8 items with icon, label, shortcut and link.
Form
Title, note, placeholder, success texts, optional POST URL and auto close.
Player
Track, artist, cover, audio file and length.
Shape
Button height, open width (0 = auto), open radius and squircle corners.
Glass / Colors
Blur, tint, border, shadow and every colour.
Spring
Stiffness, damping and stagger in ms.
On Load / Canvas / Events
Open after load, preview Closed or Open, plus On Open, On Close, On Submit and On Play.
PERFORMANCE
One blur layer, transforms and size on a single element, and an animation loop that sleeps when the springs settle.
MOBILE
Tap to open, tap outside to close. The panel stays inside the frame you give it.
ACCESSIBILITY
A real button with aria-expanded, arrow keys in the menu, Escape closes and returns focus. Reduced motion removes the bounce.
© 2026 PIXLIFY - MADE IN WARSAW
MORPH BUTTON · PREMIUM COMPONENT · BY PIXLIFY