127 Components
Liquid Gradient Blob
BackgroundsOrganic metaball background powered by an SVG `feGaussianBlur` + `feColorMatrix` alpha-threshold gooey filter where orbiting and cursor-tracked blobs fuse seamlessly.
SVG Gooey Filter · feColorMatrixBlur: 22px
Liquid Metaball Fusion
Powered by an SVG feGaussianBlur + feColorMatrix alpha-threshold filter so drifting blobs snap and fuse like liquid lava.
Move your cursor to fuse the interactive metaball with orbiting blobs
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/liquid-gradient-blob.json"
Props
TypeScript props supported by <LiquidGradientBlob />.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#8B5CF6", "#EC4899", "#06B6D4", "#3B82F6"] | Array of colors applied to the metaball blobs. |
| speed | number | 1 | Orbit animation speed multiplier. |
| gooeyIntensity | number | 22 | Standard deviation for the `feGaussianBlur` filter. |
| children | React.ReactNode | — | Optional foreground content rendered above the blobs. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Uses an inline SVG `<feGaussianBlur>` + `<feColorMatrix>` filter (`0 0 0 24 -10`) for sharp surface-tension merging.
- Combines autonomous orbiting blobs with a spring-loaded cursor-following metaball.
- Customizable blob `colors`, `speed`, and `gooeyIntensity` radius.
Keyboard & Accessibility
- Marks the hidden SVG filter definition and decorative blob layer with `aria-hidden='true'`.
- Uses `useId()` to guarantee unique SVG filter IDs when multiple instances are mounted.
- Maintains high foreground text contrast.