Like Button
The heart takes on its fill and settles once — no particle spray, no confetti.
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 · Like Button
*
* The glyph fills and settles once. No particle spray: a like is the
* cheapest action in any product, it fires dozens of times per session,About this pattern
A like is the cheapest action in a product: it fires dozens of times per session, often twice in a row when someone changes their mind. Motion that is delightful on the first tap is exhausting on the twentieth, so this deliberately does not spray particles. The outline glyph hands over to a filled one that arrives with a single soft settle, and the count steps by one on a short vertical roll at a constant size. Everything else in the row stays still.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Comment thread
The glyph fills and the count beside it steps up by one.
Related patterns
- Message Reaction AttachThe chosen glyph flies out of the picker and docks at the corner of the bubble it belongs to.
- Reaction PickerHold a message and the reactions fan out along a shallow arc above it.
- Group JoinA joining member's avatar drops into the stack, the others make room, and the count rolls by one.