About
An animated search component with a liquid SVG filter effect. Expands from a pill button into a search input with a floating search icon, and displays results as stacked animated pills. Built with Framer Motion. Supports click-outside and Escape to close.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Search to your project and fits it to your theme.
Code
How Liquid Search is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { GooeySearch } from "@/components/ui/liquid-search";
const sampleItems = [
"React",
"Vue",
"Svelte",
"Next.js",
"Napier88",
"Gatsby",
"NewtonScript",
"Angular",
"Scala",
"Groovy",
"Haskell",
"Lua",
"R",
];
export default function DemoOne() {
return (
<div
style={{
width: "100%",
height: "400px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#e5e7eb",
borderRadius: "12px",
}}
>
<GooeySearch
items={sampleItems}
placeholder="Type to search..."
onSelect={(item) => console.log("Selected:", item)}
/>
</div>
);
}