zanwei/liquid-connector-web-component

Liquid Connector is a small, dependency-free web component that recreates a liquid-like animation where a card visually connects to and detaches from a prompt input, similar to a well-known motion design seen online. The white shape that morphs between states is drawn as a real, calculated SVG path rather than faked with filters, masks, canvas tricks, bitmap effects, or shaders, so the seams, corners, waist, and peeling motion all come from actual path math. The component is meant to be lightweight and used entirely in the browser. It bundles the custom HTML element itself, the underlying path solver that calculates the shape, a way to step through the animation frame by frame for precise control, support for users who prefer reduced motion, and an optional overlay for visually inspecting the geometry while building with it. Key features include continuous path geometry as the shape overlaps, couples, peels apart, and separates, a fixed card size while peeling, independent strain on the input text and the send button as the interaction collapses, direction-aware merging and detaching, encapsulated styling through the Shadow DOM with a handful of customizable colors, and full keyboard and focus support. The project is an independent recreation inspired by a motion design shared publicly by another designer, and the author is careful to note that no original source code or media from that reference is included, and that the project has no affiliation with that designer, X, or Notion, whose name appears only as example content in the demo. Once published, it installs through npm, or it can be loaded directly as plain script tags without any build tool. After adding the element to a page, developers can configure it through HTML attributes such as labels and spacing, or control it through a small JavaScript API that lets them open or close it, change its gap, set the prompt text, adjust the physics-like peel parameters, or advance the animation manually. It also fires standard DOM events for actions like connecting, skipping, and submitting a prompt.