Liquid Beam Search
A tactile obsidian search pill featuring an organic chromatic liquid-gooey beam along the lower track. Features dynamic fluid droplet merging, responsive typing ripples, keyboard shortcuts, and synthesized micro-haptic sound effects.
Dependencies
Interaction Types
Click or press ⌘K to activate the chromatic gooey beam
Dynamic fluid droplets merge and oscillate along the lower border
Typing sends reactive energy ripples through the liquid beam
Synthesized audio feedback for pop on focus, tick on type, and chime on search
How to use
'use client';
import { LiquidBeamSearch } from "@/components/liquid-beam-search";
export default function Demo() {
return (
<LiquidBeamSearch
placeholder="Search"
onSearch={(q) => console.log("Searching:", q)}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Search" | Search input placeholder text |
| onSearch | (query: string) => void | — | Callback triggered when pressing Enter with a non-empty query |
| className | string | — | Optional custom classes |
| active | boolean | true | Animates the gooey beam; set false to keep it still |