LiquidKit - Drop-In Animated Connectors for AI SaaS Sites
A copy-paste widget library that gives any SaaS or AI tool the same fluid 'connect your tools' animation as Notion's MCP connector, with zero SVG math or dependencies.
SaaS founders and product designers building AI and integration landing pages
- 10 pre-built liquid connector widgets (MCP card, prompt-to-action, merge-to-result)
- Webflow, Framer, and React component exports with zero dependencies
- Four CSS color tokens plus tunable peel, gap, and coupling parameters
- Reduced-motion, keyboard, and screen-reader accessibility built in
Every AI/SaaS landing page now shows a 'connect your tools' pitch; a beautiful, copy-paste connector is a tangible product differentiator and the open-source component validates the visual language.
Notion MCP connector is a real, visually-iconic pattern and SVG-animation-for-SaaS content exists, but searches surfaced no surge of explicit searches for a dedicated 'liquid connector widget'; demand appears modest.How to Use SVG Animations for SaaS Products? - svgator.com ↗
Market is already crowded with direct/adjacent alternatives: Motion Primitives includes 'SVG Path Animations', Morphin ships an 'Animated SVG Branch Connector', plus React Bits, Animate UI, and Originkit — almost identical value props.Motion Primitives — 155+ Free React Animation Components ↗Animated SVG Branch Connector | Morphin ↗
Copy-paste component libraries in this niche (React Bits, Motion Primitives, Originkit, Animate UI) are largely free; the shadcn-style open ethos and the claimed GitHub-trending source (an 'SVG path-math liquid connector Web Component' repo) could not be verified — no such repo surfaced in search, undermining the 'social proof' angle.React Bits - Animated UI Components For React ↗Originkit — Free Animated component library for modern websites ↗
The AI/MCP integration visual language is hot right now and likely persists while MCP-style integrations are a marketing staple, but UI micro-trends cycle within 2–3 years and component aesthetics date fast.
Animated SVG path connectors are well-trodden territory using GSAP/Framer Motion/Motion; packaging them as shadcn-style copy-paste blocks is a proven distribution model with low technical risk.