Reaction Picker
Hold a message and the reactions fan out along a shallow arc above it.
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, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Reaction Picker
*
* Press and hold a message; the reactions leave from it and settle
* along a shallow arc above it, left to right. The arc is what makes aAbout this pattern
A long press has no visible affordance, so the reveal has to do the explaining: the options leave from the message and settle along a shallow arc, left to right, close enough together that the whole row reads as one gesture rather than five separate arrivals. The arc is what makes a horizontal row feel like it came out of the bubble — the middle options ride highest, the ends stay low near the anchor. Glyphs are inline SVG rather than emoji, so they inherit the picker's sizing and never depend on a platform font.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
Holding a bubble raises a small row of reactions anchored to it.