Reaction Picker
Hold the button and a row of reactions pops up one by one to choose
Create a reaction picker. A pill-shaped reaction button (smile-plus icon + count) that opens a floating picker above it: a rounded-full surface with 4 reaction icons (heart, thumbs up, laugh, fire), each its own color. Opening: the picker springs up from the button (from 10px below at 90% scale, stiffness 460, damping 26, transform-origin bottom center), then its icons pop in one after another (from 40% scale, spring stiffness 520, damping 22, 0.05s stagger), the Facebook-style cascade. Hovering an icon inflates it to 130% and lifts it 3px; picking one closes the picker, fills the chosen icon into the trigger with a spring, tints the trigger's border accent, and bumps the count. Picking the same reaction again un-reacts. In production, open on hover (desktop) or long-press (touch). Accessibility: the trigger uses aria-expanded, the picker role="menu" with labeled menu items, and the count aria-live="polite". If prefers-reduced-motion is set, show and hide the picker instantly with no cascade. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.