Controls
Reaction Arc
An emoji reaction picker where the tapped emoji flies onto the message's reaction badge along a curved path — built on Motion's new arc() easing with a spring-pop landing.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<ReactionArc
author="Mira Chen"
message="Just shipped the new onboarding flow 🎉"
emojis={["👍", "❤️", "🔥", "😂", "👀"]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | — | Body text of the message card. |
| author | string | "Mira Chen" | Display name shown above the message; initials feed the avatar. |
| emojis | string[] | ["👍", "❤️", "🔥", "😂", "👀"] | Emojis rendered in the picker row. |
| strength | number | 0.6 | How far the arc bows away from the straight-line path. |
| peak | number | 0.2 | Where along the flight the curve peaks (0–1). |
| duration | number | 0.55 | Flight duration in seconds. |
| direction | "cw" | "ccw" | "auto" | "ccw" | Bend direction of the arc; auto lets Motion pick the natural curve. |
| className | string | — | Tailwind classes on the root container. |
Use cases
Chat reactions
Slack/iMessage-style emoji reactions that visibly travel from picker to message.
Social engagement
Likes and hearts that arc from the button onto a post's counter.
Add-to-collection
Any item-flies-to-target pattern — save, bookmark, or add-to-cart feedback.
Gamified feedback
Points or rewards that lob into a score badge with a spring-pop landing.