PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
ISLAND · STACK · SPRINGS
A small black pill stretches into a toast on a spring, older toasts tuck underneath into a stack, hover fans them out and a ring around the icon counts down to dismiss.
LIVE PREVIEW - HOVER THE STACK, SWIPE A TOAST AWAY
TAB TO A TOAST · ESC DISMISSES · HOVER PAUSES
VARIANTS & PRESETS
01 - LIGHT
Bottom · light glass
Frosted white glass that rises from the bottom edge, with darker status colours.
02 - CLICK
Click the island
Nothing plays on its own - a click on the pill shows the next toast.
03 - ORDERS
Live orders · avatars
Product images instead of icons and a View button - a quiet social-proof ticker.
04 - TINTED
Loading to done · warm glass
Uploads that spin and resolve, on a warm tinted glass.
HOW TO USE
01
Insert Island Toast
Drag it onto the canvas, 420 × 300 px is a good start. Toasts grow from the top or bottom edge of this frame. For a site-wide toast, set the frame to Fixed position.
02
Write the toasts
Add up to 10 toasts with variant, title, message, optional avatar, action button and link. A Loading toast can turn into Success or Error after a delay.
03
Choose how they play
Sequence plays them one after another (in view or on load), Click Island shows the next one on click, Event Only waits for your code.
04
Fire from code
Every mode listens for window.dispatchEvent(new CustomEvent(“island-toast”, { detail: { title, message, variant } })).
05
Style it
Fill, blur, border, radius, squircle and shadow, the idle pill size and every status colour.
06
Tune timing and springs
Duration, pause on hover, stack size, peek and gap, stiffness and damping.
PROPERTY CONTROLS
Toasts
Variant, title, message, avatar, action, link, duration, then-state for loading.
Play
Sequence · Click Island · Event Only, with start delay, interval and loop.
Start
In View or On Load.
Position / Offset / Max Width
Top or bottom edge, distance from it and toast width.
Duration / Pause / Progress
Auto dismiss time, pause on hover and the countdown ring.
Swipe / Close Button
Swipe to dismiss and the small close icon.
Stack
Visible toasts, peek, gap and expand on hover.
Island
Idle pill on or off, its width and height.
Surface / Colors
Fill, blur, border, radius, shadow and status colours.
Spring / Canvas / Events
Stiffness and damping, Idle, Toast or Stack preview, On Show, On Dismiss and On Action.
PERFORMANCE
Transforms and size on each toast, no layout thrash, and a loop that sleeps when nothing moves.
MOBILE
Swipe a toast up, down or sideways to dismiss it. Tap targets stay large.
ACCESSIBILITY
Toasts are a live region, errors use role alert, Escape dismisses and focus pauses the timer. Reduced motion removes the bounce.
© 2026 PIXLIFY - MADE IN WARSAW
ISLAND TOAST · PREMIUM COMPONENT · BY PIXLIFY