Add particle effect hero page

Author: andydevs

package.json

@@ -18,6 +18,9 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@tsparticles/engine": "^3.4.0",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.4.0",
     "babel-plugin-styled-components": "^2.1.4",
     "gatsby": "^5.12.3",
     "gatsby-cli": "^5.12.0",
@@ -36,7 +39,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "styled-components": "^6.0.7"
+    "styled-components": "^6.0.7",
+    "tsparticles-slim": "^2.12.0"
   },
   "devDependencies": {
     "prettier": "3.0.3"

src/sections/hero.js

@@ -1,7 +1,10 @@
 import { graphql, useStaticQuery } from 'gatsby'
-import React from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { GatsbyImage, getImage, withArtDirection } from 'gatsby-plugin-image'
+import Particles, { initParticlesEngine } from '@tsparticles/react'
+import { loadSlim } from '@tsparticles/slim'
+import { starbound } from '../styling'
 
 const HeroContainer = styled.div`
     position: relative;
@@ -66,7 +69,7 @@ const HeroSubtitle = styled.h2`
     }
 `
 
-export default function Hero() {
+function _HeroFractalImage() {
     const hero = useStaticQuery(graphql`
         query HeroImageQuery {
             mobile: file(relativePath: { eq: "images/fractal-mobile.png" }) {
@@ -99,15 +102,83 @@ export default function Hero() {
         }
     ])
 
+    return (
+        <GatsbyImage
+            image={responsiveImages}
+            style={{
+                gridArea: '1/1',
+                zIndex: -1
+            }}
+        />
+    )
+}
+
+function HeroParticles() {
+    const [init, setInit] = useState(false);
+
+    useEffect(() => {
+        initParticlesEngine(async (engine) => {
+            console.log(engine)
+            await loadSlim(engine)
+        })
+        .then(() => setInit(true))
+    }, [])
+
+    const options = useMemo(() => ({
+        fpsLimit: 60,
+        detectRetina: true,
+        pauseOnOutsideViewport: true,
+        fullScreen: false,
+        particles: {
+            color: {
+                value: [
+                    starbound.lightBlue,
+                    starbound.orange,
+                    starbound.yellow,
+                    starbound.white
+                ],
+            },
+            links: {
+                enable: true,
+                opacity: 0.5,
+                color: starbound.white,
+                triangles: {
+                    enable: true,
+                    opacity: 0.01
+                }
+            },
+            number: {
+                value: 70,
+                limit: 100,
+                density: { enable: true }
+            },
+            move: {
+                enable: true,
+                speed: 1,
+                random: true,
+                gravity: { acceleration: 0.1 }
+            },
+            opacity: {
+                value: { min: 0.2, max: 1.0 },
+                animation: {
+                    enable: true,
+                    speed: 0.01
+                }
+            }
+        }
+    }), [])
+    
+    return <div style={{ gridArea: '1/1', zIndex: -1 }}>
+        { init && <Particles style={{
+            position: 'inherit !important'
+            }} options={options}/> }
+    </div>
+}
+
+export default function Hero() {
     return (
         <HeroContainer>
-            <GatsbyImage
-                image={responsiveImages}
-                style={{
-                    gridArea: '1/1',
-                    zIndex: -1
-                }}
-            />
+            <HeroParticles/>
             <HeroText>
                 <HeroTitle
                     data-sal="slide-up"

src/styling/index.js

@@ -4,6 +4,17 @@ export const primary = '#00b6e8'
 export const darkPrimary = '#154bb2'
 export const secondary = '#ea9300'
 
+export const starbound = {
+    darkPurple: '#12101c',
+    purple: '#4d15b2',
+    blue: '#154bb2',
+    lightBlue: '#00b6e8',
+    red: '#ea3900',
+    orange: '#ea9300',
+    yellow: '#e8e200',
+    white: '#e3dad3'
+}
+
 export default createGlobalStyle`
     :root {
         --black: #000000;
@@ -16,7 +27,7 @@ export default createGlobalStyle`
         --orange: #ea9300;
         --yellow: #e8e200;
         --white: #e3dad3;
-
+        
         --star-gradient: linear-gradient(45deg, var(--red) 0%, var(--orange) 20%, var(--yellow) 80%, var(--white));
         --sky-gradient: linear-gradient(45deg, var(--purple) 0%, var(--blue) 50%, var(--light-blue));
         --space-gradient: linear-gradient(45deg, var(--less-black), var(--dark-purple));
@@ -77,4 +88,10 @@ export default createGlobalStyle`
     ul > li {
         margin: 8pt 0pt;
     }
+
+    #tsparticles {
+        position: absolute !important;
+        width: 100%;
+        height: 100%;
+    }
 `