Creating modern Landing page with Particles and React
Tags: react, javascript, nextjs
Published: 2024-03-12 13:20:48

## Introduction

In this tutorial, we'll explore how to create a modern landing page using React and a particle effect background. We'll use the `react-tsparticles` library to add a dynamic and interactive particle effect to our landing page background.

## Particle Background Component

### Prerequisite
As always first thing we need to do is to install dependencies necessary for particles to work. We need `react-tsparticles` as well as `tsparticles-slim` on which `react-tsparticles` is dependent on.

```
npm install react-tsparticles
npm i tsparticles-slim
```

### Setting up Particle background component
First, let's create a reusable component for the particle background, so we can use it in multiple places not just landing page. We'll use the Particles component from the `react-tsparticles` library. Here's how you can set up the Particle Background component:

```javascript
// Particles.jsx
import React, { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadSlim } from "tsparticles-slim";

const ParticlesBackground = () => {
    const particlesInit = useCallback(async (engine) => {
        await loadSlim(engine);
    }, []);

    const particlesLoaded = useCallback(async (container) => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"[](url)
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
                // Customize particle options here

            }}
        />
    );
};

export default ParticlesBackground;
```
Good thing with react-tsparticles is that it is really configurable, so you can set it up by your needs and preferences. For all available options you can refer to its [documentation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html) where it all described pretty much in details so i wont go further into details.  


### Particles configuration breakdown

Here you can checkout general overview of options available and short description about every one of them.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv6tzvqprc9bm8wzmy6b.png)



## Integrating Particle Background into the Landing Page
Now, let's integrate the Particle Background component into our landing page. We'll add it as the background of a section in our landing page layout:

```javascript
import React from "react";
import ParticlesBackground from "./ParticlesBackground";

const LandingPage = () => {
    return (
        <div className='bg-gradient-to-b from-neutral-900  to-[#7928ca] '>
            <ParticlesBackground />
            <div className=' text-slate-200 md:px-10 px-5 '>
                {/* Content for the landing page */}
            </div>
        </div>
    );
};

export default LandingPage;
```

## Before and After

### Before
Before implementation of particles, as you can see it, landing page is pretty minimalist, gradient background, links and some text.

![Landing without particles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/namakkk5843gmbti90wi.png)


### After

So you can see difference between landing with and without particles, it looks more modern and more cool in my opinion.

![Landing with particles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptnlrapckikkj0ngjclj.png)


## Live Example
Feel free to checkout live example on my website where I implemented it into already existing UI.

{% embed https://bojanjagetic.com %}

## Conclusion
With the `react-tsparticles` library, we can easily add dynamic and interactive particle backgrounds to our React applications. This adds a modern and visually appealing touch to our landing pages, making them stand out and engage users effectively. Feel free to customize the particle options to fit your design requirements and create stunning landing pages for your projects as well as to leave comment of ask for help if I can help in anyway.