CoreAnimated Backgrounds and Visual Effectsno dependencies

LiquidBlob

Organic morphing vector shape driven by smooth SVG path and border-radius keyframe interpolation with zero external assets and graceful mobile degradation.

Preview

Organic SVG Path Morph

Customize

5 props
9
168

Installation

Copies the component source and its CSS Module into your project.

npx motionfoundry add liquid-blob

Writes components/ui/liquid-blob.tsx and components/styles/liquid-blob.module.css.

Usage

Updates live as you change the controls — only props that differ from the defaults are included.

example.tsx
1import { LiquidBlob } from "@motionfoundry/ui";2 3export function Example() {4  return (5    <LiquidBlob />6  );7}

Props

PropTypeDefault
label

Foreground caption.

string'Organic SVG Path Morph'
colorPrimary

Primary gradient color stop.

string'#60a5fa'
colorSecondary

Secondary gradient color stop.

string'#a855f7'
morphSpeed

Duration in seconds for one organic morph cycle.

number9
size

Diameter in pixels of the organic form.

number168

Accessibility

Marked aria-hidden='true' on the decorative SVG/organic geometry and freezes path morphing when prefers-reduced-motion is active.

Toggle prefers-reduced-motion in your OS or browser devtools (Rendering → Emulate CSS media feature) to verify the reduced-motion state.

Source

components/ui/liquid-blob.tsx
1"use client";2 3import * as React from "react";4import styles from "../styles/liquid-blob.module.css";5 6export interface LiquidBlobProps {7  /** Foreground label */8  label?: string;9  /** Primary gradient stop */10  colorPrimary?: string;11  /** Secondary gradient stop */12  colorSecondary?: string;13  /** Morph cycle duration in seconds */14  morphSpeed?: number;15  /** Diameter in pixels */16  size?: number;17  /** Optional className */18  className?: string;19}20 21export function LiquidBlob({22  label = "Organic SVG Path Morph",23  colorPrimary = "#60a5fa",24  colorSecondary = "#a855f7",25  morphSpeed = 9,26  size = 168,27  className = "",28}: LiquidBlobProps) {29  const customStyle = {30    "--mf-blob-a": colorPrimary,31    "--mf-blob-b": colorSecondary,32    "--mf-blob-speed": `${morphSpeed}s`,33    "--mf-blob-size": `${size}px`,34  } as React.CSSProperties;35 36  return (37    <div style={customStyle} className={`${styles.stage} ${className}`.trim()}>38      <div aria-hidden="true" className={styles.blob} />39      <span className={styles.label}>{label}</span>40    </div>41  );42}