https://github.com/saasify-sh/react-blobby-blob

Blobby blobby blobs for React
https://github.com/saasify-sh/react-blobby-blob

blob blobbiest-blobs-of-all-the-blobs catmull-rom react svg

Last synced: about 2 months ago
JSON representation

Blobby blobby blobs for React

• Host: GitHub
• URL: https://github.com/saasify-sh/react-blobby-blob
• Owner: saasify-sh
• Created: 2020-05-02T05:30:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:47:48.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T23:49:51.738Z (3 months ago)
• Topics: blob, blobbiest-blobs-of-all-the-blobs, catmull-rom, react, svg
• Language: JavaScript
• Homepage: https://saasify-sh.github.io/react-blobby-blob/
• Size: 29.9 MB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        


  

    

  



# react-blobby-blob

> Blobby blobby blobs for React. ([demo](https://saasify-sh.github.io/react-blobby-blob/))

[![NPM](https://img.shields.io/npm/v/react-blobby-blob.svg)](https://www.npmjs.com/package/react-blobby-blob) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

This blob effect was originally created for [Saasify](https://saasify.sh).

## Install

```bash

npm install --save react-blobby-blob

```

## Usage

```jsx

import React from 'react'

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

import 'react-blobby-blob/dist/index.css'

export () => (

  

)

```

## Animations

By default, the blob responds to clicks by randomly generating new control points around a rectangle and morphing to the new blob svg. You can control this behavior by setting `interactive` to `false` or changing the default `duration` of `150` ms.



  

    

  



## License

MIT © [Saasify](https://saasify.sh)

Support my OSS work by following me on twitter