Gooey Input

gooey x expand

Search input that expands with gooey SVG filter. From Aceternity.

inputgooeyexpandaceternity

🔍

Code

input-gooey.tsx

"use client";
import { useState } from "react";

export function GooeySearch() {
  const [open, setOpen] = useState(false);
  return (
    <div className={`flex items-center rounded-full border border-border bg-surface transition-all duration-500 ${open ? "w-64 px-4" : "w-12 justify-center cursor-pointer"}`}
      onClick={() => setOpen(true)}>
      <span className="text-lg shrink-0">🔍</span>
      {open && <input autoFocus placeholder="Search..." className="ml-3 w-full bg-transparent text-sm outline-none" onBlur={() => setTimeout(() => setOpen(false), 200)} />}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Gooey Input component and wire it to my accent.”