Wishlist Heart Fill
The heart fills from its own center on one soft settle, and drains back out on a plain ease.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Wishlist Heart Fill
*
* Saving fills the heart from its own center on one soft settle — no
* burst, no shower of particles — and unsaving drains it back out on aAbout this pattern
Saving something is a small act, so it gets a small motion: the filled shape grows out of the middle of the outline on a single soft settle and stops. No burst, no shower of particles, no second bounce — a control pressed dozens of times in a session cannot afford a celebration each time. Unsaving reverses on a plain ease-in rather than replaying the settle backwards, because taking an item off a list should feel like an undo, not an event. Two outlines crossfade in place so the shape of the control itself never changes.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
The save heart on a listing card fills solid with a single soft landing.
