Gooey Search Input

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.

Installation