Dev Design Library

Morphing Search

A circular search button that morphs into a text field: the same element grows and reshapes via a layout animation, rather than a new one popping in beside it.

Morphing Search preview
Library
EaseUI
Framework
React
Type
component
License
MIT
Install
npx shadcn@latest add @easeui/morphing-search
Files
  • components/motion/morphing-search.tsx
  • lib/ease.ts
  • lib/utils.ts
Source
https://github.com/rjcuff/easeui

Categories

More from EaseUI