PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
GLASS · SPRINGS · FOLDERS
Hover and the cards peek out. Click and they pop into a collage or fan into an arc, with spring physics, a single real blur layer and a plus that turns into a close icon.
LIVE PREVIEW - HOVER A FOLDER, THEN CLICK IT
TAB TO FOCUS · ENTER OPENS · ESC CLOSES
VARIANTS & PRESETS
01 - LIGHT GLASS
Pop · light theme
Light frosted glass on a warm paper background.
02 - FAN
Fan · travel set
Five photos fanning out in an arc, the outer cards stay tucked in the folder.
03 - PEEK
Peek · link to a case study
Hover peeks, click follows the link. Ideal for project grids.
04 - TINTED
Pop · tinted glass, CMS slots
A coloured tint on the glass and images fed from the CMS-ready Image slots.
HOW TO USE
01
Insert Glass Folder
Drag it onto the canvas. 440 × 440 px is a good start; the folder sits at the bottom and the space above is where the cards pop out.
02
Add images
Add 3-5 images in Items, each with an optional label and link. Or switch Images to CMS Slots and bind Image 1-5 to your CMS fields.
03
Pick a mode
Pop spreads the cards into a collage, Fan opens them in an arc, Peek only lifts them on hover and follows the folder link on click.
04
Set the text
Title, Count (0 counts the images) and Suffix, for example 12 items or 4 projects.
05
Style the glass
Dark or Light glass, blur, tint, corner radius, folder size, card ratio and spread.
06
Tune the springs
Stiffness, damping and stagger. Lower damping gives more bounce, higher stagger a slower cascade.
PROPERTY CONTROLS
Mode
Peek · Pop · Fan.
Glass
Dark or Light theme.
Title / Count / Suffix
Text on the glass. Count 0 uses the number of images.
Images
List (image, label, link) or CMS Slots (Image 1-5).
Link / New Tab
Folder link in Peek mode, item links open in Pop and Fan.
Hover Peek / Label / Button
Toggle the hover peek, the text and the round button.
Folder
Size, radius, blur, tint, card ratio and spread.
Colors
Theme colours or custom title, count, button and icon colours.
Spring
Stiffness, damping and stagger in ms.
Canvas
Show the Closed, Peek or Open state while designing.
Font / On Toggle
Typography and an event when the folder opens or closes.
PERFORMANCE
One backdrop blur layer per folder, transforms only, and an animation loop that sleeps as soon as the springs settle.
MOBILE
Tap to open and tap outside to close. No hover needed on touch screens.
ACCESSIBILITY
Keyboard focus with a visible ring, Enter or Space to open, Escape to close. Reduced motion removes the bounce and stagger.
© 2026 PIXLIFY - MADE IN WARSAW
GLASS FOLDER · PREMIUM COMPONENT · BY PIXLIFY