Options

OptionDefault
fromThe element the popup opens out of and closes back into.
effectlaunch(), genie() or morph().
boundsthe viewportThe positioned element the copies are drawn in. The genie's funnel is clipped to it.
hideTargetper effectHides from while the popup's open. Launch does, like an icon under its app, and the genie doesn't, like a Dock tile. Shown, the popup fades in and out over it, so give from a z-index over the copies for the popup to go in under it.
reducedMotion"user""user" crossfades under prefers-reduced-motion. "always" always does, and "never" never.
speed1Plays slower or faster, like the Simulator's Slow Animations. 0.1 is ten times slower, and changing it takes effect mid-run.
debugfalseDraws the mesh: its pieces in blue and its vertices in orange.
openfalseStarts open, with no animation. In React, it drives the popup.
onStartCalled with true when it starts opening and false when it starts closing.
onFrameCalled every frame with { progress }, from 0 closed to 1 open. Launch's frames also carry the card's rect, corner radius, mesh and home scale.
onLandCalled once it's landed open or closed.

launch()

OptionDefault
grid{ columns: 12, rows: 8 }Tiles across and down the card. Finer grids bend more smoothly and cost more.
fade{ in: 0.15, out: 0.2 }Seconds to fade from from to the popup on the way out, and the share of the way back it takes to fade back.
springsSpringBoard'sAny of open, close, home and cornerReset, over SpringBoard's.
homeAn element behind the popup that recedes to 88% like the home screen.

Every vertex of the card has its own spring, as on iOS, so the edge nearest from leads and the far edge catches up. The card lands once no vertex moves faster than 3 px a second.

genie()

OptionDefault
edge"bottom"The side the Dock is on. "auto" picks the side from is on.
scale1CSS pixels per macOS point, so a small screen bends like a full one.
duration0.5Seconds from open to minimised.
fadefalseFades the window out over the second half. The Dock doesn't.
blurfalseBlurs the window over the second half.

morph()

OptionDefault
pivotfrom's first elementThe label inside the button the popup grows from, like matchedTransitionSource on the label.
fillthe popup's background colourThe glass both shapes are filled with while they're joined.
lenstrueBends the content at the rim as it grows, with an SVG displacement filter.

One spring moves the popup out of the label and the button down to a quarter of its size, on iOS's mainEjectSpring and mainAbsorbSpring at speed 0.7. A blurred field joins the two shapes into one while they're close, and the kick, the lens and the field's blur each go out and come back on springs fitted from the Simulator. It hides from while it's open, as iOS absorbs the button.