Morphing Icon
An animated micro-interaction wrapper that smoothly morphs between two icon states with coordinated rotation, scale, and cross-fade transitions.
Click any action to trigger spring rotation & morph
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/morphing-icon
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| from | React.ReactNode | undefined | Default icon element shown when inactive |
| to | React.ReactNode | undefined | Target icon element shown when active |
| active | boolean | false | Whether the target icon state is currently active |
| duration | number | 0.3 | Duration of the morph transition in seconds |
| size | number | 20 | Width and height of the icon container in pixels |
| className | string | undefined | Optional CSS class for styling the container |