Message Reaction Attach
The chosen glyph flies out of the picker and docks at the corner of the bubble it belongs to.
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 { useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Message Reaction Attach
*
* Pick a reaction and it flies out of the picker and docks at the corner
* of the bubble it belongs to — one continuous object, so the reaction isAbout this pattern
A reaction is a mark on one specific message, so the motion has to say which one. The glyph the reader picks keeps its identity across the two places it lives — picker and dock — and is carried between them as a single object, which is a claim of ownership no fade could make: the mark that was in your hand is now on that bubble. It lands over the bubble's bottom edge rather than beneath it, the count swaps inside a fixed-width slot so a 3 becoming a 4 never nudges the pill, and taking your reaction back reverses the same path. Every glyph is inline SVG rather than an emoji character, so reactions inherit the interface's type color instead of the reader's platform font.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
A tapback attaches to the corner of the bubble it was left on.