---
id: "aw-el-70976b08-357b-4407-96d5-330f3b8181ff"
source: https://www.awwwards.com/inspiration/menu-and-search-interaction-floema
author: "Bürocratik (burocratik)"
media: "video, 1600x1200, 19.1s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Gooey Pill Navigation with Product Search

## Summary
A soft, beige top navigation for a street furniture brand where each menu link is its own white pill, the pills fuse together with a gooey liquid effect, and a pale yellow blob follows the hovered item. Tapping the search icon grows a white pill input beside the logo, and typing opens a rounded results panel with a four-column grid of product thumbnails and colored material tags. Worth studying for how a goo filter makes plain pills feel tactile.

## Style
- Theme: light (warm beige)
- Mood: soft, playful, calm, friendly, tactile
- Tags: navigation, gooey-effect, pill-menu, search, hover-blob, product-grid, svg-filter
- Category: Navigation, Components

## Palette
| Role | Hex |
|---|---|
| Beige background | #EEEAE1 |
| Beige alt | #EEEAE4 |
| Pill white | #FFFFFF |
| Thumbnail ground | #E4DFD6 |
| Ink | #1E1E1E |
| Hover yellow | #F5F0C4 |
| Tag red | #E0533A |
| Tag slate blue | #7D8FB3 |

## Typography
- Wordmark top left: large neo-grotesk, regular, title case, about 2.5% of frame height (shown as a placeholder wordmark).
- Nav links: grotesk sans, medium (500), uppercase, tracked +0.04em, about 0.8% of height (11px). Closest free font: Inter 500 or Manrope 600.
- Search placeholder and query: regular sans, sentence case, 12px, gray placeholder.
- Results: product names in 11px regular dark ink, two-line descriptions in 10px gray, tags in 9px white medium on colored pills. Inter throughout.

## Layout
- 4:3 frame (1600x1200) of a beige page with only the header visible plus the results panel.
- Header row about 50px from the top: wordmark and search icon left, four nav pills centred to the right of middle, a language selector (EN with chevron) at the far right.
- Pills: about 30px tall, 12 to 16px horizontal padding, fully rounded, 4px apart so the goo filter bridges them into one wavy band.
- Search input: a white pill about 220px wide, appearing right of the wordmark with a close icon before it.
- Results panel: about 215px wide in the capture (roughly 430px real), white, radius 12px, a slim scrollbar on the right, 4 columns with 8px gaps.

## Elements
- Nav pills: Products, About, Sustainability, Journal, with a tiny dot indicator under one item.
- Hover blob: a pale yellow pill that slides beneath the hovered label.
- Search toggle: magnifier icon that becomes an X when open.
- Result cards: square thumbnail on #E4DFD6 with radius 6px, a small colored tag with an icon, product name and two-line truncated description.
- Language dropdown: small caps label with a down chevron.

## Motion
- 0.8 to 4.2s: hovering a link slides the yellow blob from its previous position (about 350ms, spring); neighbouring pills bulge and connect through the goo effect.
- 7.6s: hover holds on a link and the blob wobbles to rest.
- 11s: search opens; the input pill grows out of the icon from 30px to full width (about 400ms, ease-out) and the placeholder fades in.
- 14.5s: typing opens the results panel, scaling from 0.96 and fading in (about 250ms), thumbnails staggering in at 30ms.
- 17.9s: closing reverses everything; the input melts back into the icon.

## Rebuild it
1. Header `flex items-center justify-between px-6 h-16 bg-[#EEEAE1]`; wrap the pills in a container with `filter: url(#goo)`.
2. Goo filter: an inline SVG with `feGaussianBlur` (stdDeviation 6) followed by `feColorMatrix` alpha values `0 0 0 18 -7`, then `feComposite` with SourceGraphic so text stays crisp (put text on a layer above the filtered shapes).
3. Hover blob: a `motion.div` with shared `layoutId="hover"` inside the hovered pill, `bg-[#F5F0C4] rounded-full`, transition spring (stiffness 400, damping 30).
4. Search: `motion.input` animating `width` 30 to 220 and `opacity`, inside the goo layer so it melts out of the icon.
5. Results: `AnimatePresence` panel `rounded-xl bg-white p-3 grid grid-cols-4 gap-2 max-h-[420px] overflow-y-auto`, items with 30ms `staggerChildren`.
6. Filter the product list client-side by query and debounce input by 120ms.

## Generation prompt
A soft warm beige website header: a large simple wordmark on the left with a search icon, a row of white rounded pill navigation links that merge into one another with a liquid gooey effect and a pale yellow blob under the hovered link, a search pill input expanding out of the icon and a white rounded results dropdown showing a four-column grid of small product photos of benches, tables, fences and a sandbox with little red and slate blue tags; playful, calm, tactile, no real brand names.