{"id":20405,"date":"2022-10-04T07:14:09","date_gmt":"2022-10-04T14:14:09","guid":{"rendered":"https:\/\/coderpad.io\/?p=20405"},"modified":"2023-06-07T13:57:09","modified_gmt":"2023-06-07T20:57:09","slug":"interactive-animated-backgrounds-react-tsparticles","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/interactive-animated-backgrounds-react-tsparticles\/","title":{"rendered":"How to Create Interactive Animated Backgrounds in React with tsParticles"},"content":{"rendered":"\n

Adding animations to a site is a great way to make it stand out on the web, even better when it’s interactive. However, depending on the complexity, achieving these effects can require a lot of time and experience. <\/p>\n\n\n\n

Unless, of course, you utilize tsParticles<\/a>. <\/p>\n\n\n\n

This lightweight library helps you build stunning interactive animations with a few lines of code. It includes customization features that help you achieve animations far more advanced than just floating particles on the screen:<\/p>\n\n\n\n

Source: Matteo Bruni<\/a><\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

In this tutorial, we will show you how to use tsParticles in React to create interactive animated backgrounds. To follow along, you should be familiar with React and have Node installed on your system.<\/p>\n\n\n\n

\n

\u2705You can use the CoderPad sandboxes located throughout this page or as a new browser window<\/a> to run the code in this tutorial.<\/p>\n<\/blockquote>\n\n\n\n

Introduction to tsParticles<\/h2>\n\n\n\n

tsParticles is a successor of particles.js<\/a>, an older library with similar functionality whose development is no longer active. It is backward-compatible with particles.js and has similar configuration options, so you can easily migrate from one to the other. <\/p>\n\n\n\n

tsParticles has lots of new features, like first-party integrations with leading frameworks, a frame per second (fps) limiter so as not to overwork the CPU, and the ability to use Font Awesome icons and images as particles.<\/p>\n\n\n\n

tsParticles might take some time to get used to due to the numerous configuration options<\/a> available for creating your desired particle animation. To help with this we will be exploring a few particle animations you can create with this library.<\/p>\n\n\n\n

Get started by setting up React and tsParticles <\/h2>\n\n\n\n

For some of the popular frameworks there are ready-to-use tsParticle components available. In our case, we will be using the official tsParticles React component<\/a>. We will also use tsParticles Full Bundle<\/a>, which has more features available than the tsParticles Slim Bundle<\/a>.<\/p>\n\n\n\n

Type in the following command in the terminal to set up a React app, install the needed dependencies, and start up the development server.<\/p>\n\n\n

npx create-react-app particle-background\ncd particle-background\nnpm i react-particles tsparticles\nnpm start<\/code><\/span><\/pre>\n\n\n
Now let\u2019s initialize tsParticles and render the Particles component in the src\/App.js<\/strong> file. Here is what the file will look like:<\/p>\n\n\n
import<\/span> Particles from<\/span> \"react-tsparticles\"<\/span>;\nimport<\/span> { loadFull } from<\/span> \"tsparticles\"<\/span>;\nimport<\/span> { useCallback } from<\/span> \"react\"<\/span>;\n\nconst<\/span> App = ()<\/span> =><\/span> {\n\u00a0 const<\/span> options = {\n\u00a0 \u00a0 \/\/...<\/span>\n\u00a0 };\n\u00a0\n\u00a0 const<\/span> particlesInit = useCallback(async<\/span> (engine) => {\n\u00a0 \u00a0 await<\/span> loadFull(engine);\n\u00a0 }, []);\n\n\u00a0 return<\/span> (\n\u00a0 \u00a0 <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <Particles<\/span> options<\/span>={options}<\/span> init<\/span>={particlesInit}<\/span> \/><\/span>\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\u00a0 );\n};\n\nexport<\/span> default<\/span> App<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Understand the configuration options<\/h2>\n\n\n\n
To demonstrate how the configuration options work, we\u2019ll start with this example <\/a>created by Matteo Bruni<\/a>. It features a particle animation with floating circles in the brand colors of the popular communication software Slack<\/a>. The circles link together when they get close to each other and link with a nearby mouse hover. A click creates an extra four particles. <\/p>\n\n\n\n
Here are the configuration options: <\/p>\n\n\n
const<\/span> options = {\n\u00a0 \u00a0 particles<\/span>: {\n\u00a0 \u00a0 \u00a0 number<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 value<\/span>: 80<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 density<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 enable<\/span>: true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 area<\/span>: 800<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 color<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 value<\/span>: [\"#2EB67D\"<\/span>, \"#ECB22E\"<\/span>, \"#E01E5B\"<\/span>, \"#36C5F0\"<\/span>]\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 shape<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 type<\/span>: \"circle\"<\/span>\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 opacity<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 value<\/span>: 1<\/span>\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 size<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 value<\/span>: { min<\/span>: 1<\/span>, max<\/span>: 8<\/span> }\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 links<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 enable<\/span>: true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 distance<\/span>: 150<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 color<\/span>: \"#808080\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 opacity<\/span>: 0.4<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 width<\/span>: 1<\/span>\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 move<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 enable<\/span>: true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 speed<\/span>: 5<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 direction<\/span>: \"none\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 random<\/span>: false<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 straight<\/span>: false<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 outModes<\/span>: \"out\"<\/span>\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 },\n\u00a0 \u00a0 interactivity<\/span>: {\n\u00a0 \u00a0 \u00a0 events<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 onHover<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 enable<\/span>: true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 mode<\/span>: \"grab\"<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 onClick<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 enable<\/span>: true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 mode<\/span>: \"push\"<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 modes<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 grab<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 distance<\/span>: 140<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 links<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 opacity<\/span>: 1<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 push<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 quantity<\/span>: 4<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n\u00a0 };<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Here is the result of the above configs:<\/p>\n\n\n\n\t
The Particles component accepts several properties<\/a> among which is the options prop. This is where we will be passing the configurations for creating the particle animation.<\/p>\n\n\n\n