Morph search

A search pill that lifts into a card. Letters rise out of a blur as you type, and matches cascade in and re-flow. Try typing John.

Forms, focus, then type, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/morph-search.tsx https://motion-brew.com/r/morph-search.tsx

One self contained file for React and Tailwind CSS: morph-search.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { MorphSearch } from "@/components/morph-search";

export default function Page() {
  return (
    <MorphSearch
      placeholder="Search customers"
      items={customers.map((c) => ({ title: c.name, subtitle: c.city }))}
      onSelect={(item) => openCustomer(item.title)}
    />
  );
}

Matching is a case-insensitive "contains" on `title`, so the highlight can sit anywhere in the name.

Props

Prop	Type	Default	Description
items	SearchItem[]	address book	{ title, subtitle? }; search runs on title
placeholder	string	"Search people"	Placeholder and accessible name
limit	number	5	Most results shown
onSelect	(item) => void		A result was picked with a click or Enter

More forms

Rolling stepper: A stepper whose digits roll like an odometer.
Search modal: A search field whose card drops down with a gliding scope control and live counts, recent things as soft cards, a featured top result, highlighted matches and an open hint.
Message composer: A white rich text composer: a text style menu that pours open, formatting that lights up under the caret, @ mentions, emoji, uploading thumbnails, a voice note timer, an AI polish, scheduled sending with a calendar, and a split send button whose plane flies off.
OTP code: A one time code card with split boxes and no confirm button.

All animated react form components