BoseUI v2
Morphing Blob
BackgroundsOrganic fluid morphing SVG blob driven by Catmull-Rom cubic spline interpolation, Hooke's Law spring physics per node, and smooth real-time cursor attraction.
Catmull-Rom Spring Splines
Organic Morphing Blob
Move cursor to attract fluid spring nodes
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/morphing-blob.json"
Props
TypeScript props supported by <MorphingBlob />.
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | 400 | Width of the SVG viewBox in pixels. |
| height | number | 400 | Height of the SVG viewBox in pixels. |
| points | number | 8 | Number of radial anchor nodes forming the organic perimeter. |
| baseRadius | number | 120 | Resting base radius of the blob from center in pixels. |
| variance | number | 28 | Maximum radial fluctuation delta applied to node targets. |
| speed | number | 0.7 | Frequency of retargeting cycles for organic movement. |
| stiffness | number | 45 | Spring stiffness constant pulling nodes toward their targets. |
| damping | number | 9 | Velocity damping factor preventing wild oscillations. |
| cursorFollow | boolean | true | Enable smooth attraction toward the pointer location. |
| cursorStrength | number | 0.35 | Offset multiplier applied to the blob center relative to pointer position. |
| cursorSmoothness | number | 0.08 | Lerp interpolation speed for cursor tracking. |
| colors | [string, string] | ['#7C3AED', '#06B6D4'] | Two-stop linear gradient hex colors filling the blob. |
Key Features
- Continuous Catmull-Rom cubic bezier closed loop path computation.
- Hooke's Law spring-mass-damping physics simulation per radial node.
- Real-time cursor parallax offset with smooth damping and viewport scaling.
- Accessible automatic fallback for prefers-reduced-motion environments.
Keyboard & Accessibility
- Marks ambient SVG canvas with aria-hidden='true' and role='presentation'.
- Automatically bypasses frame animation loops if prefers-reduced-motion is detected.