Morph Toast
A capped stack pauses on hover/focus and supports an action or swipe dismissal.
Try the action or hover the notification.
Product utility · 88 systems
Feedback, search, loading, lists, reorder, onboarding, mobile and product-stage interactions with native alternatives, honest state and quiet motion.
01 · Feedback & Status
A capped stack pauses on hover/focus and supports an action or swipe dismissal.
Try the action or hover the notification.
State and progress stay available to assistive technology.
Use local feedback for a local action instead of making every message global.
Recovery remains next to the reversible action and exposes a clear keyboard button.
Use Undoable Action when the removed object must reflow and return to its original position.
A named absence with a clear next action instead of a blank region.
No projects yet
Create your first project to get started.
02 · Search & Command
The trigger becomes an autofocus field and Escape returns focus to the trigger.
Nothing selected
Reusable commands, grouped labels, keyboard arrows, Enter, Escape and ⌘/Ctrl+K hook.
Nothing selected
Stable item identity keeps filtering quiet rather than replaying a large entrance animation.
03 · Loading & Progress
The placeholder shares the card boundary with the real content.
A low-contrast optional shimmer; reduced motion resolves it to a static surface.
Completed, current, upcoming and error are distinct states.
Use Progressive Step Workflow when completed decisions and the active task need to remain in one product surface.
The same compact surface can report active work, percentage or completion.
PressSpring answers the press while the label stays width-stable.
Use Async Action Control when the full lifecycle and recovery state need to stay visible.
04 · Lists & Tables
Drag the handle or focus it and use Arrow keys; announcements describe the new position.
Research interaction
Today
Test keyboard path
Tomorrow
Release quiet motion
Friday
Secondary task detail appears in the row, not a modal detour.
Independent list/feed semantics; Expandable Data Row is the structured table pattern.
Design review and accessibility checks are attached to this invoice.
Swipe on touch or use the visible actions button on every input method.
A small sticky header preserves context when the list becomes long.
Hover and keyboard focus provide the same relationship cue across a comparison row.
05 · Drag / Reorder
Drop cards with a pointer, or focus a handle and use arrows to move by grid position.
The destination marker tells the user whether content will be inserted or placed inside.
A preview surface belongs to an active drag integration, not a decorative floating card.
Tags can be reordered, removed and extended without hiding the controls behind a gesture.
06 · Onboarding & Steps
A controlled workflow state in horizontal, vertical or compact form.
Use Progressive Step Workflow when completed decisions should remain editable context.
Three short steps with skip, back, next, Escape and target scrolling.
A small, dismissible hint attached to one element, not a forced tour.
Advanced controls reveal on demand and keep the basic workflow readable.
07 · Product Workflows
Completed decisions become compact context, the current decision stays open and the next one is previewed.
Active decision · 1 / 3
Shape the interaction brief.
Define the one decision this screen needs to make.
Next context
ReviewCheck keyboard and touch paths.
Queued, active, complete and failed states share one spatial track; retry stays with the failed stage.
Queued is active
07 · Mobile Interaction
Snap, drag, backdrop, Escape and a close button coexist with nested scroll content.
Tap or swipe on touch; desktop users get tab semantics and arrow keys.
Three updates this week.
Release settles on Jelly's elastic spring; the callback owns data fetching.
Pull from the top on a touch device.
Refreshed 0 times.
The edge gesture is touch-only and the button remains visible for keyboard and desktop users.
Hold the row or use click/right-click/keyboard; cancellation never loses the item.
One flat list of choices for a single object, with an explicit Cancel.
Momentum is native scroll-snap; keyboard Arrow/Home/End work without a gesture.
Swipe from the left edge; the previous screen trails in behind at a slower rate.
Mobile-first expansion
These live surfaces use touch, thumb reach, press, drag and contained scroll as primary inputs. The full set stays compactly linked below.
Live mobile
Live mobile
Live mobile
Live mobile
Live mobile
Live mobile
Live mobile
Tap or hold a row to select it.
Live mobile
Browse the new mobile set · 30
Open full workflow catalogue ↗08 · Action response
These surfaces cover pending, recovery, background work and completion without turning every state into a toast or a spinner.
Action ownership
The visible state leads; confirmation can still roll it back.
The item reflows immediately while its exact recovery remains close by.
Removing an item closes the gap before the Undo surface arrives.
Edited, saving, saved and failed remain attached to the field.
The control owns intent, pending, success and retry as one stable surface.
A failed region keeps its context and offers a local recovery path.
The source did not arrive, but the surrounding product context is still here.
The working surface becomes the result instead of disappearing into a detached message.
Upload brief
Start the action to see the surface transform.
Progress, recovery & continuity
Operational detail appears only after the work earns it.
Processing
1 of 3 operational updates
System execution stages remain named, current and recoverable; this is not a user wizard.
System execution
Preparing the working result
Long work stays visible without blocking the surface where it began.
Generating preview
Running · 42%
Acceptance, waiting and active work are different states with different next actions.
Export report
Queued · #2 · waiting for capacity
Successful items stay successful while only failed items enter retry.
Batch result
Successful items are kept; only failed items enter recovery.
Local and external values stay visible until a deliberate choice resolves them.
Choose which value should continue in this surface.
Your version
North star refresh
Latest version
North star refresh · updated elsewhere
Offline and restored states remain actionable without forcing a refresh.
Offline · local work stays available.
offlineAn interrupted long operation resumes from its known position.
Importing archive
Paused at 56% · resume keeps the work
Fast work stays quiet; longer work earns a more detailed status.
Save changes
Fast work stays quiet.
Browse all · 88 workflows
Live studies stay above. This compact catalogue keeps the full family visible, with canonical patterns first and quieter variations kept in context.
name / relationship / detail
16 entries
A stable action control that owns pending, success, failure and retry without collapsing into a spinner-only button.
Transforms a working action surface into its result while preserving spatial ownership and a reset path.
Keeps local and external values visible together until the user chooses which version continues.
Makes offline, reconnecting and restored states actionable while keeping local work available.
Keeps fast actions quiet, then escalates to useful status only when work crosses perceived-performance thresholds.
Keeps edited, saving, saved and failed persistence feedback beside the field that owns the change.
Reflects a user action immediately, then confirms it or rolls the visible state back without a fake backend.
Summarizes mixed batch outcomes, preserves successful items and isolates only the failures for retry.
Transforms a failed content region into localized recovery with retry and an explicit alternate path.
Removes an item and closes the gap while a bounded recovery surface restores the exact item position.
A named absence — no results, no items yet — with a clear next action instead of a blank region.
Local success, warning, info and error feedback beside the action that caused it.
A capped, pausable notification stack with action and swipe dismissal.
A compact state indicator that carries progress and semantic status.
A queued-to-active-to-complete status path keeps failure and retry on the same spatial track.
A temporary recovery surface for reversible actions.
3 entries
A reusable keyboard-first command surface with groups, filtering and activation.
A compact search trigger expands into an autofocus query surface and restores focus.
Stable-identity result transitions with quiet loading and empty states.
10 entries
Keeps a long-running task compact and persistent while the user continues working elsewhere.
Shows system execution moving through named stages with a detailed current stage, failure and retry.
Reveals increasingly specific operational detail only when a single operation takes long enough to need it.
Makes accepted-but-not-yet-started work visible before it enters active processing.
Preserves progress across an interruption so a long operation can resume instead of restarting.
A compact spinner-to-percentage-to-check task indicator.
A restrained material sheen for an active loading surface, with a static reduced-motion fallback.
A quiet loading placeholder that resolves into the loaded content geometry.
A width-preserving idle, loading, success and error action pattern.
A visual progress preset for completed, current, upcoming and error states in a staged workflow.
5 entries
A lightweight list or feed row disclosure for secondary settings, files or task details.
A controlled list with pointer drag handles, arrow-key moves and announcements.
A hover and focus state that connects related values without hiding information.
A small sticky header surface that preserves list or table context.
A mobile row that reveals actions while keeping an explicit actions button.
4 entries
A restrained preview surface intended to be mounted by a drag integration.
A controlled dashboard grid reordered by keyboard, with native HTML5 mouse dragging as a desktop accelerator.
A destination marker that distinguishes insertion from inside-container drops.
A compact tag collection with reorder, remove and add hooks.
5 entries
A staged product workflow keeps completed decisions compact, the active decision large and the next context visible.
A single attached teaching surface for a new contextual feature.
A small pattern for revealing advanced controls only when requested.
A skippable, focus-managed target tour with next, back and Escape paths.
A basic horizontal, vertical or compact accessible workflow stepper for explicit progress.
45 entries
A flat list of actions for one object, with an explicit Cancel — the classic iOS action sheet.
Carries a sign-in surface from ready to verifying to complete without replacing the spatial object.
A compact search pill rises into a keyboard-aware results sheet and returns to the same lower trigger.
Short messages stack and compress at the lower edge, where mobile feedback is easier to reach and read.
A small editorial card stack uses bounded drag distance to let the next card gain depth without becoming a swipe-to-dismiss clone.
A local sheet grows with the content it reveals and stops at a bounded viewport height instead of forcing a fixed 80vh shell.
Transforms the same bottom region from primary navigation into selection actions while preserving spatial ownership.
A sheet exposes peek, half and full heights as stable destinations with drag, buttons and keyboard controls.
A compact card expands inside the same document flow so content below reflows around the selected source.
Expands a compact create trigger into local actions and contracts while scrolling without leaving the task context.
A resting dock expands the selected destination and keeps one contextual action attached to the same lower surface.
Media controls stay minimal at rest, reveal on tap and collapse after idle without hiding the primary play path.
A compact mobile navigation bar that lets the active destination expand without losing the surrounding destinations.
A focused field lifts its local surface and reveals helper context without letting the mobile keyboard erase the field relationship.
A native horizontal rail keeps neighboring items visible while the centered item gains scale and reading priority.
A thumbnail grows into a focused media surface and returns to its source with focus and identity preserved.
Holding a primary action reveals secondary choices in place, with a visible Cancel state and keyboard fallback.
A search icon reflows the local header into an inline field without reserving a permanent desktop search row.
Keeps a composing surface above the visual viewport with a visible send path and safe-area spacing.
Holding a surface lifts it into an iOS-style peek and reveals its actions; a small movement during the hold cancels it instead of firing mid-scroll.
Long press enters batch selection with tactile-ready state language, while tap, check buttons and keyboard remain complete paths.
Turns selected content into a safe-area-aware action bar while leaving each source item individually operable.
A reversible action closes its gap and exposes a thumb-reachable undo surface that restores the exact item.
Inline validation changes the field surface, status marker and message together while keeping correction in place.
An icon rail gives the active destination a raised labelled surface while the bar keeps a stable thumb-sized footprint.
Two-finger pinch to zoom, one-finger pan once zoomed, and a vertical swipe-to-dismiss at rest scale — the standard photo-viewer gesture set.
Moves identity, method and verification into one mobile surface so each step stays legible and reversible.
Completed groups compress into editable summaries while the current group stays open and the next group is previewed.
A searchable action sheet combines recent and contextual actions so mobile command entry does not depend on a desktop shortcut.
Contracts a mobile navigation bar during meaningful downward reading and restores it when the user reverses direction.
Search and filter chips emerge from one compact surface so refinement does not break the current reading context.
Morphs a quiet mobile header into an autofocus search field and returns focus to the trigger when closed.
Keeps the next product action attached to the lower edge with honest pending and disabled states.
A row reveals an action at a snap threshold and commits only after a farther threshold, with a visible button alternative.
An edge-anchored back gesture with two-plane parallax — the current screen follows the finger while the previous one trails in behind it.
An open media surface reveals metadata on upward swipe while keeping an explicit Details control and downward return.
Makes a consequential action a bounded horizontal gesture with a keyboard and focus fallback.
A card sheet follows vertical drag with translation, scale and scrim response before snapping back or dismissing.
A lower trigger fans a short action set upward so important choices stay in the natural reach zone on a large phone.
A scrollable value picker with a fixed centre selection window; inertia is native scroll-snap, not a physics loop.
A snap-point sheet with drag, backdrop, Escape and focus restoration.
A progressive edge reveal that follows the gesture, displaces the underlying surface and settles by distance plus velocity.
A cancellable long press with click, keyboard and context-menu alternatives.
A resistance-driven refresh chamber with threshold, armed, refreshing and complete states; release settles on Jelly's elastic spring curve.
Fluid Tabs companion with touch swiping and desktop keyboard controls.