Gooey Search Bar

A visually striking search bar component with smooth gooey morphing animations that create a fluid, playful user experience. Features expandable search interface, SVG filter effects for the gooey appearance, and smooth animations powered by Framer Motion.

Craft Story

I saw this gooey search bar effect somewhere online and thought it looked really unique. The way it morphs and flows when you interact with it was unlike anything I'd seen in standard component libraries.

I wanted to understand how that gooey effect worked, so I started experimenting with SVG filters. The key was learning about feGaussianBlur and feColorMatrix filters that create that liquid, morphing appearance. Once I figured out the filter combination, I built the component with smooth expandable animations and integrated it all together.

How to Use

1import { GooeySearchBar } from '@/craft/components/gooey-search-bar';
2import { useState } from 'react';
3
4function MyComponent() {
5const [searchQuery, setSearchQuery] = useState('');
6
7const handleSearch = (query: string) => {
8	setSearchQuery(query);
9	// Perform search logic
10};
11
12return (
13	<GooeySearchBar
14		placeholder='Search...'
15		onSearch={handleSearch}
16	/>
17);
18}

Props

Attribution

Gooey effect inspired by SVG filter techniques. Implementation uses Framer Motion for smooth animations and Lucide React for icons.