Morph Dialog

Editorial cards that open into their own dialog: the photo leaves the card and springs into place while the dialog grows out of the card shape.

About this tool

A modal that grows out of its trigger. Each card in an editorial row opens into its own dialog: the photo leaves the card and springs into the dialog while the dialog surface opens out of the card shape, the page behind dims and blurs, and the copy arrives line by line; closing folds it all back into the card. It is a real modal dialog: card buttons that announce a dialog, role dialog with aria-modal and the look name as its label, focus kept inside while it is open, Escape or a click outside to close, inert content behind and focus handed back to the card, plus a save button that toggles and reports the look. Copy, three photos, corners, dim, blur, palette and bounce are editable live, and the export is one HTML file with no dependencies.

In collections: Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS / JS All tools

Copy

Eyebrow

Heading

Look 1 title

Look 2 title

Look 3 title

Button

Assets

Layout

Scale %

Shape

Card corners px

Dialog corners px

Backdrop

Dim %

Blur px

Palette

Dialog

Text and button

Secondary text

Accent

Backdrop

Motion

Spring bounce

Preview

Autoplay

off loop

Stage

Stage colour

#ffffff