react-interactive-blob

React-Interactive Blob

React Interactive Blob is an interactive and customizable blob component for react applications. It is built in TypeScript. It can be used just like any other React JSX Component.

• ✅ Dependency-Free
• ✅ TypeScript Supported
• ✅ Simple API
• ✅ No Physics knowledge required

---

• Getting Started
• API
• Interactive Example

Getting Started

Install react-interactive-blob

npm install react-interactive-blob

yarn add react-interactive-blob

Add to your project

import { Blob } from 'react-interactive-blob'

function MyComponent() {
  return <Blob height={500} radius={150} />
}

API

Name	Description	Type	Default Value
color	Color of the blob component. Right now only solid colors are supported	string	"#2f4acf"
radius	The outer canvas pixel radius of the blob at still position	number	128
sensitivity	Sensitivity of the blob component to mouse jitter	number	0.5
friction	The coefficient of friction for blob movement.	number	0.0095
elasticity	Elasticity coefficient of the blob point connections	number	0.001
acceleration	The acceleration of each point making up the blob	number	- 1 + Math . random () * 0.1
radial	The radial effect of each point making up the blob	number	0.1
points	The number of points used to construct the shape. Note that there must be at least three points	number	32
speed	The speed of continuous point motion	number	0.5
height	The height of the container canvas element	number	window.innerHeight
smoothing	Whether a quadratic curve should be constructed between points	boolean	true
markers	Whether to show square markers at each point vertex	boolean	false
showMousePosition	Whether to show the position of the mouse relative to the blob	boolean	false

Interactive Example

View Interactive Example