From 31f0b48b1d1643b2f4379c3da06a87246a5e2f54 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Tue, 6 Sep 2022 23:15:54 +1000
Subject: [PATCH] add particle background

---
 components/ParticlesBackground.tsx   | 160 +++++++++
 components/modals/UserSetupModal.tsx | 515 ++++++++++++++-------------
 package.json                         |   2 +
 styles/colors.ts                     |   1 +
 styles/globals.css                   |   6 +
 yarn.lock                            | 324 +++++++++++++++++
 6 files changed, 767 insertions(+), 241 deletions(-)
 create mode 100644 components/ParticlesBackground.tsx

diff --git a/components/ParticlesBackground.tsx b/components/ParticlesBackground.tsx
new file mode 100644
index 00000000..4e80447d
--- /dev/null
+++ b/components/ParticlesBackground.tsx
@@ -0,0 +1,160 @@
+import { useCallback } from 'react'
+import Particles from 'react-tsparticles'
+import { loadFull } from 'tsparticles'
+
+const ParticlesBackground = () => {
+  const particlesInit = useCallback(async (engine: any) => {
+    console.log(engine)
+
+    // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
+    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+    // starting from v2 you can add only the features you need reducing the bundle size
+    await loadFull(engine)
+  }, [])
+
+  const particlesLoaded = useCallback(async (container: any) => {
+    await console.log(container)
+  }, [])
+
+  return (
+    <Particles
+      id="tsparticles"
+      init={particlesInit}
+      loaded={particlesLoaded}
+      options={{
+        interactivity: {
+          detect_on: 'canvas',
+          events: {
+            onHover: {
+              enable: true,
+              mode: 'attract',
+            },
+            resize: true,
+          },
+        },
+        particles: {
+          groups: {
+            z5000: {
+              number: {
+                value: 70,
+              },
+              zIndex: {
+                value: 50,
+              },
+            },
+            z7500: {
+              number: {
+                value: 30,
+              },
+              zIndex: {
+                value: 75,
+              },
+            },
+            z2500: {
+              number: {
+                value: 50,
+              },
+              zIndex: {
+                value: 25,
+              },
+            },
+            z1000: {
+              number: {
+                value: 40,
+              },
+              zIndex: {
+                value: 10,
+              },
+            },
+          },
+          move: {
+            angle: 10,
+            attract: {
+              rotate: {
+                x: 600,
+                y: 1200,
+              },
+            },
+            direction: 'right',
+            enable: true,
+            speed: 1,
+          },
+        },
+        emitters: {
+          autoPlay: true,
+          life: {
+            wait: false,
+          },
+          rate: {
+            quantity: 1,
+            delay: 8,
+          },
+          particles: {
+            opacity: {
+              value: 100,
+            },
+            shape: {
+              type: 'images',
+              options: {
+                images: [
+                  {
+                    src: '/icons/mngo.svg',
+                    width: 32,
+                    height: 32,
+                  },
+                  {
+                    src: '/icons/btc.svg',
+                    width: 32,
+                    height: 32,
+                  },
+                  {
+                    src: '/icons/eth.svg',
+                    width: 32,
+                    height: 32,
+                  },
+                  {
+                    src: '/icons/sol.svg',
+                    width: 32,
+                    height: 32,
+                  },
+                  {
+                    src: '/icons/usdc.svg',
+                    width: 32,
+                    height: 32,
+                  },
+                ],
+              },
+            },
+            size: {
+              value: 16,
+            },
+            move: {
+              speed: 3,
+              straight: true,
+            },
+            zIndex: {
+              value: 0,
+            },
+            rotate: {
+              value: {
+                min: 0,
+                max: 360,
+              },
+              animation: {
+                enable: true,
+                speed: 10,
+                sync: true,
+              },
+            },
+          },
+          position: {
+            x: -5,
+            y: -5,
+          },
+        },
+      }}
+    />
+  )
+}
+
+export default ParticlesBackground
diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx
index a85ce969..688e4ed0 100644
--- a/components/modals/UserSetupModal.tsx
+++ b/components/modals/UserSetupModal.tsx
@@ -1,4 +1,4 @@
-import { Transition } from '@headlessui/react'
+import { Dialog, Transition } from '@headlessui/react'
 import { useTranslation } from 'next-i18next'
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import { ModalProps } from '../../types/modal'
@@ -23,6 +23,7 @@ import { walletBalanceForToken } from './DepositModal'
 import { floorToDecimal } from '../../utils/numbers'
 import { handleWalletConnect } from '../wallet/ConnectWalletButton'
 import { IS_ONBOARDED_KEY } from '../../utils/constants'
+import ParticlesBackground from '../ParticlesBackground'
 
 const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation()
@@ -167,111 +168,138 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   }, [group?.banksMapByName, walletTokens])
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} disableOutsideClose hideClose>
-      <div className="absolute top-0 left-0 flex h-0.5 w-full flex-grow bg-th-bkg-4">
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      className="fixed inset-0 z-30 overflow-y-auto"
+    >
+      <div className="min-h-screen px-4 text-center">
+        <Dialog.Overlay
+          className={`intro-bg pointer-events-none fixed inset-0 bg-th-bkg-1`}
+        />
+        {/* <div className="absolute top-6 left-6 z-10">
+          <img className="h-12 w-auto" src="/logos/logo-mark.svg" alt="next" />
+        </div> */}
+        <div className="absolute bottom-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
+          <div
+            style={{
+              width: `${(showSetupStep / 3) * 100}%`,
+            }}
+            className="flex rounded bg-th-primary transition-all duration-700 ease-out"
+          />
+        </div>
+        <ParticlesBackground />
+        <span className="inline-block h-screen align-middle" aria-hidden="true">
+          &#8203;
+        </span>
         <div
-          style={{
-            width: `${(showSetupStep / 4) * 100}%`,
-          }}
-          className="default-transition flex rounded bg-th-primary"
-        ></div>
-      </div>
-      <div className="h-[392px]">
-        <Transition
-          appear={true}
-          className="absolute top-0.5 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
-          show={showSetupStep === 0}
-          enter="transition ease-in duration-500"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="transition ease-out duration-500"
-          leaveFrom="translate-x-0"
-          leaveTo="-translate-x-full"
+          id="repulse-div"
+          className="m-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-lg p-6 text-left align-middle"
         >
-          <h2 className="mb-1">Welcome.</h2>
-          <p className="mb-4">
-            {
-              "You're seconds away from trading the most liquid dex markets on Solana."
-            }
-          </p>
-          <div className="mb-6 space-y-2 border-y border-th-bkg-4 py-4">
-            <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-              <p className="text-th-fgd-1">Trusted by 1,000s of DeFi users</p>
-            </div>
-            <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-              <p className="text-th-fgd-1">Deeply liquid markets</p>
-            </div>
-            <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-              <p className="text-th-fgd-1">
-                Up to 20x leverage across 100s of tokens
+          <div className="h-[392px]">
+            <Transition
+              appear={true}
+              className="absolute top-0.5 left-0 z-20 h-full w-full rounded-lg bg-th-bkg-1 p-6"
+              show={showSetupStep === 0}
+              enter="transition ease-in duration-500"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition ease-out duration-500"
+              leaveFrom="translate-x-0"
+              leaveTo="-translate-x-full"
+            >
+              <h2 className="mb-4 text-4xl">Welcome</h2>
+              <p className="mb-4">
+                {
+                  "You're seconds away from trading the most liquid dex markets on Solana."
+                }
               </p>
-            </div>
-            <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-              <p className="text-th-fgd-1">Earn interest on your deposits</p>
-            </div>
-            <div className="flex items-center space-x-2">
-              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-              <p className="text-th-fgd-1">
-                Borrow 100s of tokens with many collateral options
-              </p>
-            </div>
-          </div>
-          <Button className="w-full" onClick={handleNextStep} size="large">
-            {"Let's Go"}
-          </Button>
-        </Transition>
-        <EnterRightExitLeft
-          className="absolute top-0.5 left-0 z-20 w-full bg-th-bkg-1 p-6"
-          show={showSetupStep === 1}
-          style={{ height: 'calc(100% - 12px)' }}
-        >
-          {connected && mangoAccountLoading ? (
-            <div className="flex h-full items-center justify-center">
-              <BounceLoader />
-            </div>
-          ) : (
-            <div className="flex h-full flex-col justify-between">
-              <div>
-                <div className="mb-4">
-                  <h2 className="mb-1">Connect Wallet</h2>
+              <div className="mb-6 space-y-2 border-y border-th-bkg-4 py-4">
+                <div className="flex items-center space-x-2">
+                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
+                  <p className="text-th-fgd-1">
+                    Trusted by 1,000s of DeFi users
+                  </p>
                 </div>
-                <p className="mb-2 font-bold">Choose Wallet</p>
-                <div className="thin-scroll grid max-h-56 grid-flow-row grid-cols-3 gap-2 overflow-y-auto">
-                  {wallets?.map((w) => (
-                    <button
-                      className={`col-span-1 rounded-md border py-3 px-4 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
-                        w.adapter.name === wallet?.adapter.name
-                          ? 'border-th-primary md:hover:border-th-primary'
-                          : 'border-th-bkg-4'
-                      }`}
-                      onClick={() => {
-                        select(w.adapter.name)
-                      }}
-                      key={w.adapter.name}
-                    >
-                      <div className="flex items-center text-th-fgd-4">
-                        <img
-                          src={w.adapter.icon}
-                          className="mr-2 h-5 w-5"
-                          alt={`${w.adapter.name} icon`}
-                        />
-                        {w.adapter.name}
-                      </div>
-                    </button>
-                  ))}
+                <div className="flex items-center space-x-2">
+                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
+                  <p className="text-th-fgd-1">Deeply liquid markets</p>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
+                  <p className="text-th-fgd-1">
+                    Up to 20x leverage across 100s of tokens
+                  </p>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
+                  <p className="text-th-fgd-1">
+                    Earn interest on your deposits
+                  </p>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
+                  <p className="text-th-fgd-1">
+                    Borrow 100s of tokens with many collateral options
+                  </p>
                 </div>
               </div>
-              <Button className="w-full" onClick={connectWallet} size="large">
-                Connect Wallet
+              <Button className="w-full" onClick={handleNextStep} size="large">
+                {"Let's Go"}
               </Button>
-            </div>
-          )}
-        </EnterRightExitLeft>
-        {/* <EnterRightExitLeft
+            </Transition>
+            <EnterRightExitLeft
+              className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
+              show={showSetupStep === 1}
+              style={{ height: 'calc(100% - 12px)' }}
+            >
+              {connected && mangoAccountLoading ? (
+                <div className="flex h-full items-center justify-center">
+                  <BounceLoader />
+                </div>
+              ) : (
+                <div className="flex h-full flex-col justify-between">
+                  <div>
+                    <div className="mb-4">
+                      <h2 className="mb-4 text-4xl">Connect Wallet</h2>
+                    </div>
+                    <p className="mb-2">Choose Wallet</p>
+                    <div className="thin-scroll grid max-h-56 grid-flow-row grid-cols-3 gap-2 overflow-y-auto">
+                      {wallets?.map((w) => (
+                        <button
+                          className={`col-span-1 rounded-md border py-3 px-4 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
+                            w.adapter.name === wallet?.adapter.name
+                              ? 'border-th-primary text-th-fgd-1 md:hover:border-th-primary'
+                              : 'border-th-bkg-4 text-th-fgd-4'
+                          }`}
+                          onClick={() => {
+                            select(w.adapter.name)
+                          }}
+                          key={w.adapter.name}
+                        >
+                          <div className="flex items-center">
+                            <img
+                              src={w.adapter.icon}
+                              className="mr-2 h-5 w-5"
+                              alt={`${w.adapter.name} icon`}
+                            />
+                            {w.adapter.name}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  <Button
+                    className="w-full"
+                    onClick={connectWallet}
+                    size="large"
+                  >
+                    Connect Wallet
+                  </Button>
+                </div>
+              )}
+            </EnterRightExitLeft>
+            {/* <EnterRightExitLeft
           className="absolute top-0.5 left-0 z-20 w-full bg-th-bkg-1 p-6"
           show={showSetupStep === 2}
           style={{ height: 'calc(100% - 12px)' }}
@@ -319,152 +347,157 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
             </div>
           </div>
         </EnterRightExitLeft> */}
-        <EnterRightExitLeft
-          className="absolute top-0.5 left-0 z-20 w-full bg-th-bkg-1 p-6"
-          show={showSetupStep === 2}
-          style={{ height: 'calc(100% - 12px)' }}
-        >
-          {loadingAccount ? (
-            <div className="flex h-full items-center justify-center">
-              <BounceLoader loadingMessage="Creating Account..." />
-            </div>
-          ) : (
-            <div className="flex h-full flex-col justify-between">
-              <div>
-                <div className="pb-4">
-                  <h2 className="mb-1">Create Account</h2>
-                  <p>You need a Mango Account to get started.</p>
+            <EnterRightExitLeft
+              className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
+              show={showSetupStep === 2}
+              style={{ height: 'calc(100% - 12px)' }}
+            >
+              {loadingAccount ? (
+                <div className="flex h-full items-center justify-center">
+                  <BounceLoader loadingMessage="Creating Account..." />
                 </div>
-                <div className="pb-4">
-                  <Label text="Account Name" optional />
-                  <Input
-                    type="text"
-                    name="name"
-                    id="name"
-                    placeholder="Account"
-                    value={accountName}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                      setAccountName(e.target.value)
-                    }
-                  />
-                </div>
-              </div>
-              <div className="space-y-6">
-                <InlineNotification type="info" desc={t('insufficient-sol')} />
-                <div className="">
-                  <Button
-                    className="mb-4 w-full"
-                    onClick={() => handleCreateAccount()}
-                    size="large"
-                  >
-                    Create Account
-                  </Button>
-                  <LinkButton
-                    className="flex w-full justify-center"
-                    onClick={onClose}
-                  >
-                    <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
-                      Skip for now
-                    </span>
-                  </LinkButton>
-                </div>
-              </div>
-            </div>
-          )}
-        </EnterRightExitLeft>
-        <EnterRightExitLeft
-          className="absolute top-0.5 left-0 z-20 w-full bg-th-bkg-1 p-6"
-          show={showSetupStep === 3}
-          style={{ height: 'calc(100% - 12px)' }}
-        >
-          {submitDeposit ? (
-            <div className="flex h-full items-center justify-center">
-              <BounceLoader loadingMessage="Funding your account..." />
-            </div>
-          ) : (
-            <div className="flex h-full flex-col justify-between">
-              <div className="relative">
-                <h2 className="mb-4">Fund Your Account</h2>
-                <FadeInFadeOut show={!!depositToken}>
-                  <Label text="Amount" />
-                  <div className="grid grid-cols-2">
-                    <button
-                      className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1 px-4 hover:bg-th-bkg-2"
-                      onClick={() => setDepositToken('')}
-                    >
-                      <div className="ml-1.5 flex w-full items-center justify-between">
-                        <div className="flex items-center">
-                          <Image
-                            alt=""
-                            width="20"
-                            height="20"
-                            src={`/icons/${depositToken.toLowerCase()}.svg`}
-                          />
-                          <p className="ml-1.5 text-xl font-bold text-th-fgd-1">
-                            {depositToken}
-                          </p>
-                        </div>
-                        <PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
-                      </div>
-                    </button>
-                    <Input
-                      className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
-                      type="text"
-                      name="deposit"
-                      id="deposit"
-                      placeholder="0.00"
-                      value={depositAmount}
-                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        setDepositAmount(e.target.value)
-                      }
-                    />
-                  </div>
-                </FadeInFadeOut>
-                {!depositToken ? (
-                  <div className="absolute top-10 mt-2 h-56 w-full overflow-auto">
-                    <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
-                      <div className="">
-                        <p className="text-xs">{t('token')}</p>
-                      </div>
-                      <div className="text-right">
-                        <p className="text-xs">{t('deposit-rate')}</p>
-                      </div>
-                      <div className="text-right">
-                        <p className="whitespace-nowrap text-xs">
-                          {t('wallet-balance')}
-                        </p>
-                      </div>
+              ) : (
+                <div className="flex h-full flex-col justify-between">
+                  <div>
+                    <div className="pb-4">
+                      <h2 className="mb-1">Create Account</h2>
+                      <p>You need a Mango Account to get started.</p>
+                    </div>
+                    <div className="pb-4">
+                      <Label text="Account Name" optional />
+                      <Input
+                        type="text"
+                        name="name"
+                        id="name"
+                        placeholder="Account"
+                        value={accountName}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                          setAccountName(e.target.value)
+                        }
+                      />
                     </div>
-                    <ActionTokenList
-                      banks={banks}
-                      onSelect={setDepositToken}
-                      showDepositRates
-                      sortByKey="walletBalanceValue"
-                      valueKey="walletBalance"
-                    />
                   </div>
-                ) : null}
-              </div>
-              <div className="flex flex-col items-center">
-                <Button
-                  className="mb-4 w-full"
-                  disabled={!depositAmount || !depositToken}
-                  onClick={handleDeposit}
-                  size="large"
-                >
-                  Deposit
-                </Button>
-                <LinkButton onClick={handleEndOnboarding}>
-                  <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
-                    Skip for now
-                  </span>
-                </LinkButton>
-              </div>
-            </div>
-          )}
-        </EnterRightExitLeft>
+                  <div className="space-y-6">
+                    <InlineNotification
+                      type="info"
+                      desc={t('insufficient-sol')}
+                    />
+                    <div className="">
+                      <Button
+                        className="mb-4 w-full"
+                        onClick={() => handleCreateAccount()}
+                        size="large"
+                      >
+                        Create Account
+                      </Button>
+                      <LinkButton
+                        className="flex w-full justify-center"
+                        onClick={onClose}
+                      >
+                        <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
+                          Skip for now
+                        </span>
+                      </LinkButton>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </EnterRightExitLeft>
+            <EnterRightExitLeft
+              className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
+              show={showSetupStep === 3}
+              style={{ height: 'calc(100% - 12px)' }}
+            >
+              {submitDeposit ? (
+                <div className="flex h-full items-center justify-center">
+                  <BounceLoader loadingMessage="Funding your account..." />
+                </div>
+              ) : (
+                <div className="flex h-full flex-col justify-between">
+                  <div className="relative">
+                    <h2 className="mb-4">Fund Your Account</h2>
+                    <FadeInFadeOut show={!!depositToken}>
+                      <Label text="Amount" />
+                      <div className="grid grid-cols-2">
+                        <button
+                          className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-transparent px-4 hover:bg-transparent"
+                          onClick={() => setDepositToken('')}
+                        >
+                          <div className="ml-1.5 flex w-full items-center justify-between">
+                            <div className="flex items-center">
+                              <Image
+                                alt=""
+                                width="20"
+                                height="20"
+                                src={`/icons/${depositToken.toLowerCase()}.svg`}
+                              />
+                              <p className="ml-1.5 text-xl font-bold text-th-fgd-1">
+                                {depositToken}
+                              </p>
+                            </div>
+                            <PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
+                          </div>
+                        </button>
+                        <Input
+                          className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-transparent p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
+                          type="text"
+                          name="deposit"
+                          id="deposit"
+                          placeholder="0.00"
+                          value={depositAmount}
+                          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setDepositAmount(e.target.value)
+                          }
+                        />
+                      </div>
+                    </FadeInFadeOut>
+                    {!depositToken ? (
+                      <div className="absolute top-10 mt-2 h-56 w-full overflow-auto">
+                        <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
+                          <div className="">
+                            <p className="text-xs">{t('token')}</p>
+                          </div>
+                          <div className="text-right">
+                            <p className="text-xs">{t('deposit-rate')}</p>
+                          </div>
+                          <div className="text-right">
+                            <p className="whitespace-nowrap text-xs">
+                              {t('wallet-balance')}
+                            </p>
+                          </div>
+                        </div>
+                        <ActionTokenList
+                          banks={banks}
+                          onSelect={setDepositToken}
+                          showDepositRates
+                          sortByKey="walletBalanceValue"
+                          valueKey="walletBalance"
+                        />
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="flex flex-col items-center">
+                    <Button
+                      className="mb-4 w-full"
+                      disabled={!depositAmount || !depositToken}
+                      onClick={handleDeposit}
+                      size="large"
+                    >
+                      Deposit
+                    </Button>
+                    <LinkButton onClick={handleEndOnboarding}>
+                      <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
+                        Skip for now
+                      </span>
+                    </LinkButton>
+                  </div>
+                </div>
+              )}
+            </EnterRightExitLeft>
+          </div>
+        </div>
       </div>
-    </Modal>
+    </Dialog>
   )
 }
 
diff --git a/package.json b/package.json
index af43f9c4..d2b7b418 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,10 @@
     "react-dom": "18.0.0",
     "react-flip-numbers": "^3.0.5",
     "react-number-format": "^4.9.2",
+    "react-tsparticles": "^2.2.4",
     "react-window": "^1.8.7",
     "recharts": "^2.1.12",
+    "tsparticles": "^2.2.4",
     "zustand": "^4.1.1"
   },
   "peerDependencies": {
diff --git a/styles/colors.ts b/styles/colors.ts
index c08a6c0c..1f77746f 100644
--- a/styles/colors.ts
+++ b/styles/colors.ts
@@ -1,4 +1,5 @@
 export const COLORS: any = {
+  BKG1: { Mango: '#141026', Dark: '#101012', Light: '#FDFDFD' },
   GREEN: { Mango: '#AFD803', Dark: '#5EBF4d', Light: '#5EBF4d' },
   PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
   RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
diff --git a/styles/globals.css b/styles/globals.css
index 1524859a..39d6a7a8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -302,3 +302,9 @@ input[type='range']::-webkit-slider-thumb {
 input[type='range']::-webkit-slider-runnable-track {
   @apply appearance-none border-0 bg-transparent shadow-none;
 }
+
+.intro-bg {
+  background-color: #141026;
+  background-image: radial-gradient(at -40% -10%, #5b48ad 0, transparent 40%),
+    radial-gradient(at 150% 150%, #e54033 0, transparent 50%);
+}
diff --git a/yarn.lock b/yarn.lock
index 0e32350f..a7d6231c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4355,6 +4355,14 @@ react-transition-group@2.9.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-tsparticles@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/react-tsparticles/-/react-tsparticles-2.2.4.tgz#37400f4dcf6d28f91ec8ff75e314c03a664d92a5"
+  integrity sha512-ndhMVUcXNYBT7tufHoOF3B8o7KoG23bPIZdBvb8202z2b/rb3Ufu3gIkDqnuzxwljBu4SaCu962UId9xCaGA7g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    tsparticles-engine "^2.2.4"
+
 react-window@^1.8.7:
   version "1.8.7"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
@@ -4895,6 +4903,322 @@ tslib@^2.3.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tsparticles-engine@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-engine/-/tsparticles-engine-2.2.4.tgz#b45f56ad3f3f7c5cc0ace466815305e19cb554fc"
+  integrity sha512-glpUmRJKdbtItcHqJhE05V224DsGSV283oXR9dR6aiqA92BX/2dxU/03YrvcbPTppuMo7rFsBMf4NrPV3tXEfw==
+
+tsparticles-interaction-external-attract@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.2.4.tgz#e8324502060dadac5f7593255b48ffa8d4022ed9"
+  integrity sha512-o0eWDFX/wLu1Oih5/fdqhxAPPepjHCEX2iiheHe5EUYpRoGrtLy9feJ7fnRAklVsNKMaSx2+rG7mWYd7s/MPKQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-bounce@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.2.4.tgz#b9d4f5e589d7edfe8c40b53a92195a290005afb3"
+  integrity sha512-G7cDmYAxWPaP3WXDHKxvKFVy1EMOQWQQtsxp56d5r4wc7xhjvBPzEAfockt3+m7Qg5J0wzTb4CIpDQerfey4Sw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-bubble@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.2.4.tgz#6fcbdd460ed5322ca3b14abd85231bce93ec02a6"
+  integrity sha512-apE8iL8GkKbn5IL/sTD0HvQLe1jobJayv4QDZAUJDfBBNY3/RkSU1eUBjz4vtrDHJK3sq8AURI5L8h01qY0Nqg==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-connect@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.2.4.tgz#121ed27e936c4e140523935e8b8fe38fe92fa3a0"
+  integrity sha512-X+aA06pge48cAhjxrQ6gAmJeQnkp18mewA+syW/SLzHmMHRWkVAw94n4/pjRZ32OxtGP+a2ANBPeENxHxZVqZA==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-grab@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.2.4.tgz#6fc83628c4187d2a50b9ca671ce184b05f4d3a64"
+  integrity sha512-bYSoKqFPKBVtSKWCmQlgxVKRkMpVmvMTNn3cWRi+4+fp9hurpnudYTznEIV5k9swFLfL+8o1DyJZIaSHl89zsQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-pause@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.2.4.tgz#6f5c1f9e00caa769bd820aade4fd032a9d6c060f"
+  integrity sha512-YfK0zmTieY3pODSahaDyPQSula28sAztecLKWzWz6zV16OWS8DulFhj0xLd3TTn4p8c2nZcFspapvwK6Tyq3dQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-push@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.2.4.tgz#00a447f546fa728ef03c5166b2c23353ea375722"
+  integrity sha512-wyqRNGpgWPSbntz2G3lwccrau7/LwsBF31BI7Kv49rcb/qGmVoEvZyakY6tRtIncCJHXXWXvvbeWeDdF/Ku39w==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-remove@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.2.4.tgz#b154eecbcb5b1f5e308dfa70dd34c1d38bfab699"
+  integrity sha512-RJi+npaklbV51IiTPAs2y7Exzw1NR6lKqkIDs3DP3evbusifTp9Q55+9aNmSLtXmzba8RIa/MbkMFob6YAvW0w==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-repulse@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.2.4.tgz#19ae444f683aae16bf311e17f2bfe29aaca4b4c0"
+  integrity sha512-R9yLwXdHMP1Zb3C9KgDfHT1pRyrKk12CfcwZXh3Zv90fPiR2k5RjoPZ+4twVF3wYShFnUvQzSoZRuyBWIp/9pw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-external-trail@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-trail/-/tsparticles-interaction-external-trail-2.2.4.tgz#a19f8d03788846a075d38ade280dd8475589daff"
+  integrity sha512-vmA9qA7BRUGl+KAgoUph/6IOO+ykd9G86yuUamMkHLoz68NzIzz1ExndOOmh4z0zp0YQMpDtOTisyPJ9carvjQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-particles-attract@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.2.4.tgz#a7eebab7196873a590ac25cb12f38424461096c0"
+  integrity sha512-9m0Yy5IdJL96Y9M/MjPV4bfT5oC1rtbJOhRPTgBwMF+386hreIQhefJmyoDjhkpiUTdvckHJfq/6eFo+48dVWQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-particles-collisions@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.2.4.tgz#7b5f8c98458b12430b4924fd3dd575b58c30bd08"
+  integrity sha512-6JudVbhB+PIJ/pZxV6yX3Wsy3o0zIg3R72nX18lZ2GtCLETjlri6dD6baMmnVJ65sst3LDuCp+1hRyOj9YJhfw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-interaction-particles-links@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.2.4.tgz#a24061874abe32e18609d686cf354f339d6f8b79"
+  integrity sha512-3HtU6ONKBd89KAMMEhRhesrNP6O1CoWscAt/685R65j7jHEJ4ic07c3dZMT4+7ToqlJxgEqYnu39URPBvUywlw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-move-base@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-move-base/-/tsparticles-move-base-2.2.4.tgz#131ef3cd737554ddacb50006fe91e30efe7f0012"
+  integrity sha512-eTtwBc/4QztBly08jrsWpiVitIQi9mWCbNQqKVB7YsFjy8uujOX9TWWLT7rxsRQcmVpt6j3M/N2wgZqAOFooZw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-move-parallax@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-move-parallax/-/tsparticles-move-parallax-2.2.4.tgz#6d1988e071236b8eec2f3b2c48ba1c57aea4a4e0"
+  integrity sha512-5PjRqtTN0npCwuL+iQxrn3H4e1nk+whPOR/SFMu6NMXN066RMXv4gzWiAAgrX4LKRd0BrOaewJX7c5k+N865gQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-particles.js@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-particles.js/-/tsparticles-particles.js-2.2.4.tgz#5a91294582eed01580b48b603fdffeb017233c53"
+  integrity sha512-AV+vFXWoJNlFCu2UGddQTGUR2WacZCWxRNaLTPzPrrAT14IF17v+tCENOCxczwq6ObV07s4MOjcX34RG3D3kXA==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-plugin-absorbers@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-plugin-absorbers/-/tsparticles-plugin-absorbers-2.2.4.tgz#ce6803534b6480ba66e3e3458acfe0679fa1fef5"
+  integrity sha512-JueNw4F+5x2VJ5N0HemkjbXhjKRFzZdq5WQAOk82gdUrbOmd5hL+ihjcpXlP9L4wro4vlUxJZVoR6WdHiVhjwg==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-plugin-emitters@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.2.4.tgz#206c7cc37861548d9fc7a48db2ed0455342567a7"
+  integrity sha512-jhoexCFYvJxXIC0S7F7h/BAdK/R71jymg8XLe+uXdmgNTihJV80AERJKd2NhmiFSmOCu8G2H7a4aLKgByVBSDQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-plugin-polygon-mask@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-plugin-polygon-mask/-/tsparticles-plugin-polygon-mask-2.2.4.tgz#b942ddc7794962b8ce1d4aae3e5212e988cd22ed"
+  integrity sha512-v2rh2ONaFPA+Ryp3zyI+eP/sa3jQoA5V5gUn9cLvP8sg3F22lIVPiQP9kAhTK9TvNIZdynC2/hIYvM9vN5/dVg==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-shape-circle@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-shape-circle/-/tsparticles-shape-circle-2.2.4.tgz#865c3eed706a9a0da5e56934f994225433048731"
+  integrity sha512-l1hheEG9ZUeqYztyJc3oy/754J5M3+VFloXA2BaTquxBqZ8X2x1mfivZT3H9ODNKTTta9Wj1ZVgexQyQVZISnw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-shape-image@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-shape-image/-/tsparticles-shape-image-2.2.4.tgz#affa4248095929435df47994358dc90e8aebaec4"
+  integrity sha512-p/P0HFBtVScvzrSP6uyCcrIyeHU2HDkiPIgfG1Wjyq7xuUFEif/Wga8OHaF8zwvrtMma60UTajmJLS/r9opKHA==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-shape-line@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-shape-line/-/tsparticles-shape-line-2.2.4.tgz#0706a485c85c7e8ac61886c8bc9b65e914f7b7e8"
+  integrity sha512-ln+uH9OiHy0YSBNRwvHSnL7mQNNBdf3v69o8inHFLmlB258T9XoddWCLypaeRX6n3PLPZmSTlRNejVB5ib8sFA==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-shape-polygon@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.2.4.tgz#4fcb951e7eb896e21aa8e66a8abf1d3736d7b890"
+  integrity sha512-+jKeYKyL1WP86wYzgTUqcEKAXJNfFvfixxDeOLA+3XBD7ZOFZOr3/F9CjwL3riQv2abvD/c9B01oDWh2qn/d2w==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-shape-square@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-shape-square/-/tsparticles-shape-square-2.2.4.tgz#c88b869bad575caa8b2b7ff4111b4d4274ce75d8"
+  integrity sha512-0ryM88UcWxzRxFbskgEiHs8U3nGR78qADH+DmHHNhZBOCm5FnzOlvbrAX45mK2zkexqwmqx9S3T29ff8UgsAuw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-shape-star@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-shape-star/-/tsparticles-shape-star-2.2.4.tgz#bb1a6f4a0a5ea28606c69bfe93e3102cda7ae80a"
+  integrity sha512-r9qVueaJ7htqElH5PQTGHLCVvFfR4BMlVy7ygmxkp+X2Yx9ICqwiBbAcwiFykcC1MPruU17YB7NpFYPwxrsL7A==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-shape-text@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-shape-text/-/tsparticles-shape-text-2.2.4.tgz#35f9b78d8f25e77b9c67cd6b514fc1665e3de59e"
+  integrity sha512-jvndhUDvuyMqf6GEm9ijpD9Ymbow15JxbX+xJ2Vap2ztpWKbfAsVr7B4wDZaGIDAIo0aOJsvaCAL5nrL2r3NBA==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-slim@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-slim/-/tsparticles-slim-2.2.4.tgz#3fc73c5ddb598f467c68653cce98767b8a96ab0d"
+  integrity sha512-ubtDlAMRJowbPriDddcBLqtmGKq3ag34Rfxe3pmbuCiI070rd5y/kKusXyGodyoJFDj52icAeZgDkcLR2/Uydw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+    tsparticles-interaction-external-attract "^2.2.4"
+    tsparticles-interaction-external-bounce "^2.2.4"
+    tsparticles-interaction-external-bubble "^2.2.4"
+    tsparticles-interaction-external-connect "^2.2.4"
+    tsparticles-interaction-external-grab "^2.2.4"
+    tsparticles-interaction-external-pause "^2.2.4"
+    tsparticles-interaction-external-push "^2.2.4"
+    tsparticles-interaction-external-remove "^2.2.4"
+    tsparticles-interaction-external-repulse "^2.2.4"
+    tsparticles-interaction-particles-attract "^2.2.4"
+    tsparticles-interaction-particles-collisions "^2.2.4"
+    tsparticles-interaction-particles-links "^2.2.4"
+    tsparticles-move-base "^2.2.4"
+    tsparticles-move-parallax "^2.2.4"
+    tsparticles-particles.js "^2.2.4"
+    tsparticles-shape-circle "^2.2.4"
+    tsparticles-shape-image "^2.2.4"
+    tsparticles-shape-line "^2.2.4"
+    tsparticles-shape-polygon "^2.2.4"
+    tsparticles-shape-square "^2.2.4"
+    tsparticles-shape-star "^2.2.4"
+    tsparticles-shape-text "^2.2.4"
+    tsparticles-updater-angle "^2.2.4"
+    tsparticles-updater-color "^2.2.4"
+    tsparticles-updater-life "^2.2.4"
+    tsparticles-updater-opacity "^2.2.4"
+    tsparticles-updater-out-modes "^2.2.4"
+    tsparticles-updater-size "^2.2.4"
+    tsparticles-updater-stroke-color "^2.2.4"
+
+tsparticles-updater-angle@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-angle/-/tsparticles-updater-angle-2.2.4.tgz#719903dc4ea70e201eeed901ff886b7f9cc41843"
+  integrity sha512-1qEObvQUP8A864HHDvlfsfOOIGwQpa/vCpnge+ohdQ1Iu5a2/bClDsgXtYCsZFw85YQl8FdLVIzGQir9zfiv7g==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-color@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-color/-/tsparticles-updater-color-2.2.4.tgz#eeb109d7a53a5c116582f7a8b45c6cc6af030f53"
+  integrity sha512-8iwiJA0pg96M/AaZDyWzhsm+sey6u1JA/UigV4krp0ihZ/5noZGzTrg6Fm+ki/yLKDv2ovOMfxTHfUa0qutlLQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-life@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-life/-/tsparticles-updater-life-2.2.4.tgz#c03b7c74466a80eb829d198a2519c6edca2c2731"
+  integrity sha512-5wlVkoBwzRkNOe38WZftnjYm5dm99XW2Sq0MfsPrLyKMxxD0TeZDTdZW1TNrJpk7fwSNA8vGcbbWai0GF58frg==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-opacity@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.2.4.tgz#619cd592e6a6c3dc2831c2e6b3571c6e94a9808b"
+  integrity sha512-klpMCY+y85oXjUatVd7LEROEC2brVTgRULJoN8yphWchmWs/LPLfBPwSz6rA6NGerYZAcbEsHT1uMn76zvxIQQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-out-modes@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.2.4.tgz#ae0d78d8518adb0c71af81819c67051120e8d066"
+  integrity sha512-bZheTxw01eSpsc+ipj+e14dgR9znsQjR9FtP7MIT7yFevqu8bqdHteO7dArRlPAZvf7gqpD706/uEdGLXSGN8Q==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-roll@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-roll/-/tsparticles-updater-roll-2.2.4.tgz#2bde2c47a5787e849766d5e6168cbd32d27315de"
+  integrity sha512-klbOxUSCBdIzfwAt8jsLN1XP52e2UuMj5BQ7bMZ/fGzpHjVv85ebYPd2g7hiKOwCZ5lUrCaKNxDS1b9+TPOLzg==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-size@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-size/-/tsparticles-updater-size-2.2.4.tgz#a8d669bcdb5696b709373f621b853855db3b9c50"
+  integrity sha512-J0rq+Sh3+uvgkx4a5QRouPHbhOZLH4sElnPgg8fzd43/Tc8cg0Xp9BV1wDxDWY4TB5mgwwe21JJqmYzV/6hvYw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-stroke-color@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.2.4.tgz#9d7adc076b1e10b3d0f7baf9b4f83777f9797985"
+  integrity sha512-gsVoWDnmgoc0qsH2heDz6KzXe/KNJtU0mnN7S8St5o7xgGfGkd/wyTqgS4y4VYoi5pX99HwCQvd8aQ88b3VJHg==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-tilt@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-tilt/-/tsparticles-updater-tilt-2.2.4.tgz#7e1c0d9082f8555cf9cf299dde414259a72136cd"
+  integrity sha512-cSfm9VyhK+SFxepGkODBB5QQi0ZCusGbU6LNNQLEEd5Ra6q42xA+gptLhzjJUhSwfjwEFILOuqQX6yYoGhC6Tw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-twinkle@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-twinkle/-/tsparticles-updater-twinkle-2.2.4.tgz#bd3171b7db1c5d7d58178b17225e076bb801aa81"
+  integrity sha512-5OgGlaNaXmGJJyCr1b2zlmylVEaorsDJr+16rUytkIId/qwvuoL3zakyPFIjnhjpyQ8u2VTITkcwPX1EfafJhw==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles-updater-wobble@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles-updater-wobble/-/tsparticles-updater-wobble-2.2.4.tgz#45e3a51e7beda41681c093c4cb151da25fdbc4e8"
+  integrity sha512-7zmFNT4Qdix3GKQ7Mtj70X6/SmFwBykKUG0FGcQxWOh5h5ALtYlzEZIKeoG9LrO1nll5f0H74tUFemUiy5YvIQ==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+
+tsparticles@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-2.2.4.tgz#997ba6f9e63d11e2151887bc9790186b52d4ef5d"
+  integrity sha512-XMVDcmrrXDx61NUhRPWF0acwrSwLeeDDhK2icvTiYrp/lyKX3csJRAVszzahcsUeKwGmKDJb7CGyt+KThlFtLA==
+  dependencies:
+    tsparticles-engine "^2.2.4"
+    tsparticles-interaction-external-trail "^2.2.4"
+    tsparticles-plugin-absorbers "^2.2.4"
+    tsparticles-plugin-emitters "^2.2.4"
+    tsparticles-plugin-polygon-mask "^2.2.4"
+    tsparticles-slim "^2.2.4"
+    tsparticles-updater-roll "^2.2.4"
+    tsparticles-updater-tilt "^2.2.4"
+    tsparticles-updater-twinkle "^2.2.4"
+    tsparticles-updater-wobble "^2.2.4"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"