Share Sheet Present
The panel rises over a dimmed page and its destinations arrive in a quick wave.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState, type CSSProperties } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Share Sheet Present
*
* Two arrivals in one: the panel, and the destinations on it. The panel
* rises over a dimming scrim and settles once; the destinations sweepAbout this pattern
A share panel is two arrivals in one: the surface, and the grid of destinations on it. If both land together the row reads as a static image; if the wave is too slow the panel feels like it is still loading. The compromise is a stagger short enough to be felt rather than counted — the destinations sweep left to right just behind the panel's own settle, which is what makes the grid read as contents rather than as decoration. Destination glyphs are inline SVG, so nothing depends on a platform emoji font.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Modal sheet
Contacts first, destination apps second, secondary actions listed below.
Related patterns
- Swipe to ReplyDragging a message uncovers a reply mark that grows with the pull, snaps once at the threshold, and springs back.
- Bookmark SaveThe mark fills from the notch up, tucks into its corner, and a ribbon slides down behind the card edge.
- Card Tilt TrackThe sheen, not the rotation, is what makes it read as an object: a highlight slides across the plate as it turns, the way light does on anything glossy.