Bookmark Save
The mark fills from the notch up, tucks into its corner, and a ribbon slides down behind the card edge.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Bookmark Save
*
* The save that reads as filing something away: the mark fills from the
* notch up, settles a couple of pixels deeper into its corner, and aAbout this pattern
Saving something is a filing action, not a celebration, so the motion is about the item ending up somewhere rather than about the tap being applauded. The fill climbs the mark from the notch upward behind a bottom-anchored clip — the glyph is laid out at full size from the first frame and simply uncovered, so no path is ever redrawn or scaled — then the mark settles two pixels deeper, as if it had been pressed into the corner it lives in. A ribbon pulled down from above the card's top edge does the work the icon can't: it is visible from across a long list, which is where saved items are actually recognised. Unsaving reverses every step at the same speed, because a save you can't confidently undo is a save people stop making.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
The save mark under a post fills on tap and offers the collection the post landed in.
Related patterns
- 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.
- Share Sheet PresentThe panel rises over a dimmed page and its destinations arrive in a quick wave.
- Swipe to ReplyDragging a message uncovers a reply mark that grows with the pull, snaps once at the threshold, and springs back.