Not a modal library — a morph controller. Every trigger is just a box that grows into another box: a button into a form, a field into a custom select, a card into a fullscreen takeover, a thumbnail into a lightbox. The same controller drives all of them, and it nests.
A button morphs into a form — and a field inside it morphs open its own custom select, a popover built from divs, not the native control. Pick an option, submit, and the panel hands off to a success state.
The same morph, scaled all the way up. A card grows into a panel that fills the viewport, its cover image carried along as a shared element into the full-bleed hero. Close hands it straight back.
Wireless over-ear headphones with a lightweight matte shell.
This panel fills the entire viewport, yet it opened with the same controller as a 28rem dialog — deltached only ever morphs one box into another, whatever their sizes. The hero above didn't crossfade; it's the very thumbnail from the card, carried here as a persisted layer and handed back when you close.
A compact task light with a warm, dimmable glow.
This panel fills the entire viewport, yet it opened with the same controller as a 28rem dialog — deltached only ever morphs one box into another, whatever their sizes. The hero above didn't crossfade; it's the very thumbnail from the card, carried here as a persisted layer and handed back when you close.
An upholstered chair shaped for small reading corners.
This panel fills the entire viewport, yet it opened with the same controller as a 28rem dialog — deltached only ever morphs one box into another, whatever their sizes. The hero above didn't crossfade; it's the very thumbnail from the card, carried here as a persisted layer and handed back when you close.
A quiet everyday watch with a brushed steel case.
This panel fills the entire viewport, yet it opened with the same controller as a 28rem dialog — deltached only ever morphs one box into another, whatever their sizes. The hero above didn't crossfade; it's the very thumbnail from the card, carried here as a persisted layer and handed back when you close.
A double-wall bottle designed for a comfortable grip.
This panel fills the entire viewport, yet it opened with the same controller as a 28rem dialog — deltached only ever morphs one box into another, whatever their sizes. The hero above didn't crossfade; it's the very thumbnail from the card, carried here as a persisted layer and handed back when you close.
A compact room speaker with fabric controls and clear sound.
This panel fills the entire viewport, yet it opened with the same controller as a 28rem dialog — deltached only ever morphs one box into another, whatever their sizes. The hero above didn't crossfade; it's the very thumbnail from the card, carried here as a persisted layer and handed back when you close.
Three nested morphs. An album opens into a grid, a thumbnail zooms into a lightbox, and the photo travels the whole way as a shared element — then hands back tile-perfect on close. Open one, click a photo, close back down.
3 photos · click one to zoom
3 photos · click one to zoom