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

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

GitHub

View Github