react-text-particles

You can create bubbles particles with this package.

Usage no npm install needed!

<script type="module">
  import reactTextParticles from 'https://cdn.skypack.dev/react-text-particles';
</script>

README

npm GitHub code size in bytes GitHub license

React Text Particles

Create fancy text particles limited only by your imagination 😎


ysg9teskojiduxxb0u83rhe2


Installation

Install react-text-particles with npm

  npm install react-text-particles

Usage

React

import { TextParticles } from 'react-text-particles';

function App() {
  return <TextParticles />;
}

Nextjs

const TextParticles = dynamic(
  () => import('react-text-particles').then(mod => mod.TextParticles),
  {
    ssr: false,
  }
);

function App() {
  return <TextParticles />;
}

Props List

Name Type Default
text String Halil Atilla
textSize Number 160
flow Number 0.3
flowOffset Number 0
topSpeed Number 100
lifeSpan Number 2000
gravity Object { direction: 90, force: 0 }
canvas Object { width: 880, height: 300, bg: '#161c1e' }
colorSet Array colorSet: ['#fbbf24','#e91e63','#60a5fa','#673ab7','#65a30d']

Development

Pull requests are encouraged and always welcome. Pick an issue and help us out!

To install and work on React Text Particles locally:

git clone https://github.com/halilatilla/react-text-particles.git
cd react-text-particles
npm install

http://localhost:3000/

yarn start or npm start

http://localhost:6006/

yarn storybook or npm start storybook

Authors

License

MIT