Add Snow To Your Website

#nextjs #tsparticals #react

During the holiday season, I explored enhancing our company website with a snow effect using tsParticles. This versatile library offers extensive animation possibilities beyond just snow effects. While I'm still learning its capabilities, I'm happy to share my experience and answer questions about implementing it.

First of all we need to install some dependencies:

npm i @tsparticles/react @tsparticles/preset-snow @tsparticles/engine

Next create a component called Snow.tsx. You can actually name this whatever you want but for simplicity I just chose that.

"use client";

import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSnowPreset } from "@tsparticles/preset-snow";

import type { Container, Engine } from "@tsparticles/engine";

export default function Snow() {
  const [init, setInit] = useState(false);

  useEffect(() => {
    initParticlesEngine(async (engine: Engine) => {
      // load snow preset
      await loadSnowPreset(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = async (container?: Container): Promise<void> => {
    console.log(container);
  };

  return (
    <>
      {init && (
        <Particles
          id="tsparticles"
          particlesLoaded={particlesLoaded}
          options={{
            preset: "snow",
            background: {
              opacity: 0,
            },
          }}
        />
      )}
    </>
  );
}

Then we can use this component in our layout.tsx like so:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
        <Snow />
      </body>
    </html>
  );
}

If all went to plan you should have a nice snow effect which looks like snow falling from the top of the page. What I like about this library is that is uses HTML canvas which is highly performant for this type of thing.

I hope you enjoy this cool effect just as much as I do!