Gooey Search Input — React Component

Expandable pill search with a detached icon bubble merged through an SVG goo filter and spring layout.

Motion Effectsspringlayoutsearchsvgspringforms

Gooey Search Input

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

placeholder

Input placeholder text.

collapsedWidth

Width (px) when collapsed.

expandedWidth

Width (px) when expanded.

expandedOffset

Left offset (px) applied when expanded.

gooeyBlur

SVG blur strength for gooey merge effect.

value

Controlled value.

defaultValue

Initial value for uncontrolled mode.

disabled

Disables interactions and input.

Generated JSX

Copy this into your page.

<GooeyInput
  placeholder="Type to search..."
  collapsedWidth={115}
  expandedWidth={200}
  expandedOffset={56}
  gooeyBlur={5}
  value=""
  defaultValue=""
  disabled={false}
/>

Animation effects

springlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Gooey Search Input

The Gooey Search Input expands into a suggestion panel with a gooey morphing animation powered by SVG feMerge filter compositing. The input field and suggestion list share the gooey filter group, causing their edges to merge organically when the suggestion panel appears. Spring physics govern the expand and collapse transitions. A memorable interaction pattern that signals creative, high-craft product development for developer tools and creative platforms.

Common use cases

Site-wide and product search bars
AI and command search inputs
Creative tool search interfaces
Developer tool query inputs

Installation