🎉 React Text Particles
Create visually stunning text particles with React Text Particles and let your imagination run wild! 😎
📦 Installation
Install react-text-particles using npm:
npm install react-text-particles
🚀 Usage
React
import { TextParticles } from 'react-text-particles';
function App() {
return <TextParticles />;
}
Next.js
import dynamic from 'next/dynamic';
const TextParticles = dynamic(
() => import('react-text-particles').then(mod => mod.TextParticles),
{
ssr: false,
}
);
function App() {
return <TextParticles />;
}
⚙️ Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | String | Halil Atilla | Text to display as particles |
| textSize | Number | 160 | Font size of text particles |
| flow | Number | 0.3 | Particle flow speed |
| flowOffset | Number | 0 | Particle flow offset |
| topSpeed | Number | 100 | Maximum particle speed |
| lifeSpan | Number | 2000 | Particle lifespan |
| gravity | Object | { direction: 90, force: 0 } | Gravity settings |
| canvas | Object | { width: 880, height: 300, bg: '#161c1e' } | Canvas settings |
| colorSet | Array | ['#fbbf24','#e91e63','#60a5fa','#673ab7','#65a30d'] | Particle colors |
🛠️ Development
Contributions are welcome and appreciated! Feel free to submit pull requests and help us improve the project.
To set up React Text Particles locally:
git clone https://github.com/halilatilla/react-text-particles.git
cd react-text-particles
npm install
To start the development server:
yarn start
// or
npm start
Visit http://localhost:3000/
To start Storybook:
yarn storybook
// or
npm start storybook
Visit http://localhost:6006/
👤 Authors
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
