PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
ENVELOPE · WALLET · SLEEVE
Hover and the cards rise a little, click and one slides all the way out on a spring. The envelope flap opens first, wallet cards fan, and a record spins out of its sleeve. You can drag them out too.
LIVE PREVIEW - HOVER, CLICK OR DRAG A CARD OUT
TAB TO A CARD · ENTER OPENS · ESC CLOSES
VARIANTS & PRESETS
01 - ENVELOPE
Save the date · paper
A photo card inside a warm paper envelope on a light page.
02 - SLEEVE
Record sleeve · cover art
Your cover on the sleeve and the same art on the record label.
03 - TICKETS
Wallet · open on hover
Photo tickets that fan on hover, no click needed.
04 - PORTFOLIO
Sleeve · photo card
Card shape instead of a record - a print that slides out sideways.
HOW TO USE
01
Insert Drawer Peek
Drag it onto the canvas. 420 × 520 px for an envelope or wallet, 420 × 320 px for a sleeve.
02
Pick a holder
Envelope, Wallet or Sleeve. The preset styles the pocket to match, or switch Style to Custom.
03
Add the cards
Up to 3 cards, or 5 in the wallet, each with image, title, subtitle, fill, text colour and an optional link.
04
Choose the trigger
Click opens and closes, Hover opens while the cursor is over it. Drag Out lets visitors pull a card by hand.
05
Style the pocket
Front image and label, front, flap, inside and edge colours, blur, stitching and shadow.
06
Tune the springs
Stiffness, damping and stagger, plus Peek for how far cards rise on hover.
PROPERTY CONTROLS
Holder
Envelope, Wallet or Sleeve.
Cards
Image, title, subtitle, fill, text colour and link per card.
Label / Front Image
Small caps label and an optional image on the pocket front.
Open On / Card Ratio / Card Shape
Click or hover, card proportions, and card or record for the sleeve.
Shape
Pocket radius, card radius, squircle and peek.
Preset or Custom front, flap, inside, edge, label, blur, stitching, shadow and inside shade.
Spring
Stiffness, damping and stagger.
Drag Out / Close Outside / New Tab
Pull cards by hand, close on an outside click, open links in a new tab.
Canvas / Events
Closed, Peek or Open on the canvas, On Open and On Close.
PERFORMANCE
Cards move with transforms only and the animation loop sleeps when nothing moves.
MOBILE
Tap to open, tap outside to close, or drag a card out with your finger. Page scrolling still works.
ACCESSIBILITY
The pocket is a button with aria-expanded, cards are focusable, Enter opens and Escape closes. Reduced motion removes the bounce.
© 2026 PIXLIFY - MADE IN WARSAW
DRAWER PEEK · PREMIUM COMPONENT · BY PIXLIFY