@tsparticles/fireworks 烟花特效

最新推荐文章于 2024-09-24 07:50:19 发布

徐同保

最新推荐文章于 2024-09-24 07:50:19 发布

阅读量465

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/xutongbao/article/details/137434494

版权

html版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <link
      rel="shortcut icon"
      href="https://particles.js.org/tsParticles-64.png"
    />
    <meta
      name="description"
      content="tsParticles - Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno."
    />
    <meta name="author" content="Matteo Bruni" />
    <meta
      name="keywords"
      content="html css javascript typescript particles js ts jsx tsx canvas confetti fireworks animations react vue angular svelte libraries how to create add"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@HollowMatt_ITA" />
    <meta
      name="twitter:image:src"
      content="https://particles.js.org/images/demo2.png"
    />

    <meta
      property="og:title"
      content="tsParticles - JavaScript Particles, Confetti and Fireworks animations for your website"
    />
    <meta property="og:site_name" content="tsParticles" />
    <meta property="og:url" content="https://particles.js.org/" />
    <meta
      property="og:description"
      content="Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno."
    />
    <meta
      property="og:image"
      content="https://particles.js.org/images/demo2.png"
    />
    <title>
      tsParticles | Fireworks Preset | JavaScript Particles, Confetti and
      Fireworks animations for your website
    </title>
    <link rel="stylesheet" href="fire1_files/presets.min.css" />
    <style>
      #carbonads * {
        margin: initial;
        padding: initial;
      }

      #carbonads {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
          sans-serif;
      }

      #carbonads {
        display: flex;
        max-width: 330px;
        background-color: hsl(0, 0%, 98%);
        box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
        z-index: 100;
      }

      #carbonads a {
        color: inherit;
        text-decoration: none;
      }

      #carbonads a:hover {
        color: inherit;
      }

      #carbonads span {
        position: relative;
        display: block;
        overflow: hidden;
      }

      #carbonads .carbon-wrap {
        display: flex;
      }

      #carbonads .carbon-img {
        display: block;
        margin: 0;
        line-height: 1;
      }

      #carbonads .carbon-img img {
        display: block;
      }

      #carbonads .carbon-text {
        font-size: 13px;
        padding: 10px;
        margin-bottom: 16px;
        line-height: 1.5;
        text-align: left;
      }

      #carbonads .carbon-poweredby {
        display: block;
        padding: 6px 8px;
        background: #f1f1f2;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        font-size: 8px;
        line-height: 1;
        border-top-left-radius: 3px;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    </style>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async="" src="fire1_files/clarity.js"></script>
    <script async="" src="fire1_files/8q4bxin4tm.js"></script>
    <script async="" src="fire1_files/js"></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())

      gtag('config', 'G-922Z47NPS0')
    </script>
    <meta
      http-equiv="origin-trial"
      content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9"
    />
  </head>

  <body>
    <div id="tsparticles">
      <canvas
        data-generated="true"
        style="
          width: 100% !important;
          height: 100% !important;
          position: fixed !important;
          z-index: 0 !important;
          top: 0px !important;
          left: 0px !important;
          background-color: rgb(0, 0, 0);
          pointer-events: none;
        "
        aria-hidden="true"
        width="3840"
        height="1918"
      ></canvas
      ><img
        style="
          user-select: none;
          position: absolute;
          top: 20px;
          left: 2424px;
          display: block;
          z-index: 2;
        "
        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOS43MDcsNS4yOTNjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBsLTEuNTUxLDEuNTUxYy0wLjM0NS0wLjY4OC0wLjk4Ny0xLjAyLTEuNjA0LTEuMDJjLTAuNDQ5LDAtMC45MDUsMC4xNTItMS4zNTYsMC40NTNsLTIuNjcyLDEuNzgxQzEwLjM1Nyw4LjU2MSw4LjkwNCw5LDgsOWMtMS42NTQsMC0zLDEuMzQ2LTMsM3YyYzAsMS4yMzcsMC43NTQsMi4zMDIsMS44MjYsMi43NmwtMS41MzMsMS41MzNjLTAuMzkxLDAuMzkxLTAuMzkxLDEuMDIzLDAsMS40MTRDNS40ODgsMTkuOTAyLDUuNzQ0LDIwLDYsMjBzMC41MTItMC4wOTgsMC43MDctMC4yOTNsMi41MjctMi41MjdjMC42OTcsMC4xNzQsMS40MTYsMC40NTUsMS44NzUsMC43NjJsMi42NzIsMS43ODFjMC40NTEsMC4zMDEsMC45MDcsMC40NTMsMS4zNTYsMC40NTNDMTYuMDM1LDIwLjE3NiwxNywxOS40OTUsMTcsMThWOS40MTRsMi43MDctMi43MDdDMjAuMDk4LDYuMzE2LDIwLjA5OCw1LjY4NCwxOS43MDcsNS4yOTN6IE0xNC44OTEsNy45NDFjMC4wMzgtMC4wMjUsMC4wNzMtMC4wNDYsMC4xMDQtMC4wNjJDMTQuOTk4LDcuOTE0LDE1LDcuOTU0LDE1LDh2MS4yOTNsLTIsMlY5LjIwMkwxNC44OTEsNy45NDF6IE03LDEyYzAtMC41NTIsMC40NDgtMSwxLTFjMS4yMTEsMCwyLjkwNy0wLjQ5NSw0LTEuMTQ2djIuNDM5bC0yLjgzLDIuODNDOC43NTcsMTUuMDQ2LDguMzU2LDE1LDgsMTVjLTAuNTUyLDAtMS0wLjQ0OC0xLTFWMTJ6IE0xMC4zMDEsMTUuNDA2TDEyLDEzLjcwN3YyLjQzOUMxMS41MTksMTUuODU5LDEwLjkyNSwxNS42MDQsMTAuMzAxLDE1LjQwNnogTTE0Ljk5NCwxOC4xMmMtMC4wMy0wLjAxNi0wLjA2NS0wLjAzNi0wLjEwNC0wLjA2MkwxMywxNi43OTh2LTQuMDkxbDItMlYxOEMxNSwxOC4wNDYsMTQuOTk4LDE4LjA4NiwxNC45OTQsMTguMTJ6Ii8+CiAgICA8L2c+Cjwvc3ZnPg=="
      /><img
        style="
          user-select: none;
          position: absolute;
          top: 20px;
          left: 2424px;
          display: none;
          z-index: 2;
        "
        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNy4xMzgsNS44MjRjLTAuNDQ5LDAtMC45MDUsMC4xNTItMS4zNTYsMC40NTNsLTIuNjcyLDEuNzgxQzEyLjM1Nyw4LjU2MSwxMC45MDQsOSwxMCw5Yy0xLjY1NCwwLTMsMS4zNDYtMywzdjJjMCwxLjY1NCwxLjM0NiwzLDMsM2MwLjkwNCwwLDIuMzU3LDAuNDM5LDMuMTA5LDAuOTQxbDIuNjcyLDEuNzgxYzAuNDUxLDAuMzAxLDAuOTA3LDAuNDUzLDEuMzU2LDAuNDUzQzE4LjAzNSwyMC4xNzYsMTksMTkuNDk1LDE5LDE4VjhDMTksNi41MDUsMTguMDM1LDUuODI0LDE3LjEzOCw1LjgyNHogTTE0LDE2LjE0NkMxMi45MDcsMTUuNDk1LDExLjIxMSwxNSwxMCwxNWMtMC41NTIsMC0xLTAuNDQ4LTEtMXYtMmMwLTAuNTUyLDAuNDQ4LTEsMS0xYzEuMjExLDAsMi45MDctMC40OTUsNC0xLjE0NlYxNi4xNDZ6IE0xNywxOGMwLDAuMDQ2LTAuMDAyLDAuMDg2LTAuMDA2LDAuMTJjLTAuMDMtMC4wMTYtMC4wNjUtMC4wMzYtMC4xMDQtMC4wNjJMMTUsMTYuNzk4VjkuMjAybDEuODkxLTEuMjYxYzAuMDM4LTAuMDI1LDAuMDczLTAuMDQ2LDAuMTA0LTAuMDYyQzE2Ljk5OCw3LjkxNCwxNyw3Ljk1NCwxNyw4VjE4eiIvPgogICAgPC9nPgo8L3N2Zz4="
      /><img
        style="
          user-select: none;
          position: absolute;
          top: 20px;
          left: 2458px;
          display: block;
          z-index: 2;
        "
        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNS4xMzgsNS44MjRjLTAuNDQ5LDAtMC45MDUsMC4xNTItMS4zNTYsMC40NTNsLTIuNjcyLDEuNzgxQzEwLjM1Nyw4LjU2MSw4LjkwNCw5LDgsOWMtMS42NTQsMC0zLDEuMzQ2LTMsM3YyYzAsMS42NTQsMS4zNDYsMywzLDNjMC45MDQsMCwyLjM1NywwLjQzOSwzLjEwOSwwLjk0MWwyLjY3MiwxLjc4MWMwLjQ1MSwwLjMwMSwwLjkwNywwLjQ1MywxLjM1NiwwLjQ1M0MxNi4wMzUsMjAuMTc2LDE3LDE5LjQ5NSwxNywxOFY4QzE3LDYuNTA1LDE2LjAzNSw1LjgyNCwxNS4xMzgsNS44MjR6IE04LDE1Yy0wLjU1MiwwLTEtMC40NDgtMS0xdi0yYzAtMC41NTIsMC40NDgtMSwxLTFjMS4yMTEsMCwyLjkwNy0wLjQ5NSw0LTEuMTQ2djYuMjkzQzEwLjkwNywxNS40OTUsOS4yMTEsMTUsOCwxNXogTTE1LDE4YzAsMC4wNDYtMC4wMDIsMC4wODYtMC4wMDYsMC4xMmMtMC4wMy0wLjAxNi0wLjA2NS0wLjAzNi0wLjEwNC0wLjA2MkwxMywxNi43OThWOS4yMDJsMS44OTEtMS4yNjFjMC4wMzgtMC4wMjUsMC4wNzMtMC4wNDYsMC4xMDQtMC4wNjJDMTQuOTk4LDcuOTE0LDE1LDcuOTU0LDE1LDhWMTh6Ii8+CiAgICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4LjI5MiwxMC4yOTRjLTAuMzksMC4zOTEtMC4zOSwxLjAyMywwLjAwMiwxLjQxNGMwLjM0NSwwLjM0NSwwLjUzNSwwLjgwMywwLjUzNSwxLjI5MWMwLDAuNDg5LTAuMTksMC45NDgtMC41MzYsMS4yOTRjLTAuMzkxLDAuMzktMC4zOTEsMS4wMjMsMCwxLjQxNEMxOC40ODgsMTUuOTAyLDE4Ljc0NCwxNiwxOSwxNnMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjcyNC0wLjcyMywxLjEyMi0xLjY4NSwxLjEyMi0yLjcwOHMtMC4zOTgtMS45ODQtMS4xMjMtMi43MDdDMTkuMzE3LDkuOTAzLDE4LjY4Myw5LjkwMSwxOC4yOTIsMTAuMjk0eiIvPgogICAgPC9nPgo8L3N2Zz4="
      /><img
        style="
          user-select: none;
          position: absolute;
          top: 20px;
          left: 2492px;
          display: block;
          z-index: 2;
        "
        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNi43MDYsMTAuMjkyYy0wLjM4OS0wLjM4OS0xLjAyMy0wLjM5MS0xLjQxNCwwLjAwMmMtMC4zOSwwLjM5MS0wLjM5LDEuMDIzLDAuMDAyLDEuNDE0YzAuMzQ1LDAuMzQ1LDAuNTM1LDAuODAzLDAuNTM1LDEuMjkxYzAsMC40ODktMC4xOSwwLjk0OC0wLjUzNiwxLjI5NGMtMC4zOTEsMC4zOS0wLjM5MSwxLjAyMywwLDEuNDE0QzE1LjQ4OCwxNS45MDIsMTUuNzQ0LDE2LDE2LDE2czAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzYzAuNzI0LTAuNzIzLDEuMTIyLTEuNjg1LDEuMTIyLTIuNzA4UzE3LjQzMSwxMS4wMTUsMTYuNzA2LDEwLjI5MnoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTguNzA2LDguMjkyYy0wLjM5MS0wLjM4OS0xLjAyMy0wLjM5LTEuNDE0LDAuMDAyYy0wLjM5LDAuMzkxLTAuMzksMS4wMjQsMC4wMDIsMS40MTRjMC44NzksMC44NzcsMS4zNjMsMi4wNDQsMS4zNjQsMy4yODdjMC4wMDEsMS4yNDYtMC40ODQsMi40MTctMS4zNjUsMy4yOThjLTAuMzkxLDAuMzkxLTAuMzkxLDEuMDIzLDAsMS40MTRDMTcuNDg4LDE3LjkwMiwxNy43NDQsMTgsMTgsMThzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMS4yNTktMS4yNTksMS45NTItMi45MzMsMS45NTEtNC43MTNDMjAuNjU3LDExLjIxNywxOS45NjQsOS41NDcsMTguNzA2LDguMjkyeiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMC43MDYsNi4yOTJjLTAuMzkxLTAuMzg5LTEuMDIzLTAuMzktMS40MTQsMC4wMDJjLTAuMzksMC4zOTEtMC4zOSwxLjAyNCwwLjAwMiwxLjQxNGMxLjQxMiwxLjQwOSwyLjE5MSwzLjI4NSwyLjE5Miw1LjI4NGMwLjAwMiwyLjAwMi0wLjc3NywzLjg4NS0yLjE5Myw1LjMwMWMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNEMxOS40ODgsMTkuOTAyLDE5Ljc0NCwyMCwyMCwyMHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MxLjc5NC0xLjc5NCwyLjc4MS00LjE4LDIuNzc5LTYuNzE3QzIzLjQ4NSwxMC40NTcsMjIuNDk3LDguMDc4LDIwLjcwNiw2LjI5MnoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTIuMTM4LDUuODI0Yy0wLjQ0OSwwLTAuOTA1LDAuMTUyLTEuMzU2LDAuNDUzTDguMTA5LDguMDU5QzcuMzU3LDguNTYxLDUuOTA0LDksNSw5Yy0xLjY1NCwwLTMsMS4zNDYtMywzdjJjMCwxLjY1NCwxLjM0NiwzLDMsM2MwLjkwNCwwLDIuMzU3LDAuNDM5LDMuMTA5LDAuOTQxbDIuNjcyLDEuNzgxYzAuNDUxLDAuMzAxLDAuOTA3LDAuNDUzLDEuMzU2LDAuNDUzQzEzLjAzNSwyMC4xNzYsMTQsMTkuNDk1LDE0LDE4VjhDMTQsNi41MDUsMTMuMDM1LDUuODI0LDEyLjEzOCw1LjgyNHogTTUsMTVjLTAuNTUyLDAtMS0wLjQ0OC0xLTF2LTJjMC0wLjU1MiwwLjQ0OC0xLDEtMWMxLjIxMSwwLDIuOTA3LTAuNDk1LDQtMS4xNDZ2Ni4yOTNDNy45MDcsMTUuNDk1LDYuMjExLDE1LDUsMTV6IE0xMiwxOGMwLDAuMDQ2LTAuMDAyLDAuMDg2LTAuMDA2LDAuMTJjLTAuMDMtMC4wMTYtMC4wNjUtMC4wMzYtMC4xMDQtMC4wNjJMMTAsMTYuNzk4VjkuMjAybDEuODkxLTEuMjYxYzAuMDM4LTAuMDI1LDAuMDczLTAuMDQ2LDAuMTA0LTAuMDYyQzExLjk5OCw3LjkxNCwxMiw3Ljk1NCwxMiw4VjE4eiIvPgogICAgPC9nPgo8L3N2Zz4="
      />
    </div>
    <script type="text/javascript">
      ;(function (c, l, a, r, i, t, y) {
        c[a] =
          c[a] ||
          function () {
            ;(c[a].q = c[a].q || []).push(arguments)
          }
        t = l.createElement(r)
        t.async = 1
        t.src = 'https://www.clarity.ms/tag/' + i
        y = l.getElementsByTagName(r)[0]
        y.parentNode.insertBefore(t, y)
      })(window, document, 'clarity', 'script', '8q4bxin4tm')
    </script>
    <script
      async=""
      defer="defer"
      type="text/javascript"
      src="fire1_files/carbon.js"
      id="_carbonads_js"
    ></script>
    <div id="carbonads">
      <span>
        <span class="carbon-wrap">
          <a
            href="https://srv.carbonads.net/ads/click/x/GTND427JCVBDVK7LCV74YKQUC67DLKJJCYYDPZ3JCAYI6537CWSI52JKCEADEK7UCKBIT23EFTSDK5QJCAYD62JKC6SI4KJIF6BDTK3EHJNCLSIZ"
            class="carbon-img"
            target="_blank"
            rel="noopener sponsored"
          >
            <img
              src="fire1_files/030b1e0468f5e27497d97bbbd2e24fbfa607e581.jpg"
              alt="ads via Carbon"
              border="0"
              height="100"
              width="130"
              data-no-statview="no"
              style="max-width: 130px"
            />
          </a>
          <a
            href="https://srv.carbonads.net/ads/click/x/GTND427JCVBDVK7LCV74YKQUC67DLKJJCYYDPZ3JCAYI6537CWSI52JKCEADEK7UCKBIT23EFTSDK5QJCAYD62JKC6SI4KJIF6BDTK3EHJNCLSIZ"
            class="carbon-text"
            target="_blank"
            rel="noopener sponsored"
          >
            Work smarter, not harder. Effectively run workloads and builds with
            Kubes.
          </a>
        </span>
        <a
          href="http://carbonads.net/?utm_source=particlesjsorg&amp;utm_medium=ad_via_link&amp;utm_campaign=in_unit&amp;utm_term=carbon"
          class="carbon-poweredby"
          target="_blank"
          rel="noopener sponsored"
          >ads via Carbon</a
        >
      </span>
    </div>
    <script src="fire1_files/tsparticles.preset.fireworks.bundle.min.js"></script>
    <script type="text/javascript">
      ;(async () => {
        await tsParticles.load({
          id: 'tsparticles',
          options: { preset: 'fireworks' },
        })
      })()
    </script>
  </body>
</html>

React版

import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
// import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
import { loadFireworksPreset } from "@tsparticles/preset-fireworks"
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.

const App = () => {
  const [init, setInit] = useState(false);

  // this should be run only once per application lifetime
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      // you can initiate 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 loadAll(engine);
      //await loadFull(engine);
      //await loadSlim(engine);
      await loadFireworksPreset(engine)
      //await loadBasic(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = (container) => {
    console.log(container);
  };

  const options = useMemo(
    () => ({
      preset: "fireworks",
      // background: {
      //   color: {
      //     value: "#fff",
      //   },
      // },
      // fpsLimit: 120,
      // interactivity: {
      //   events: {
      //     onClick: {
      //       enable: true,
      //       mode: "push",
      //     },
      //     onHover: {
      //       enable: true,
      //       mode: "repulse",
      //     },
      //   },
      //   modes: {
      //     push: {
      //       quantity: 4,
      //     },
      //     repulse: {
      //       distance: 200,
      //       duration: 0.4,
      //     },
      //   },
      // },
      // particles: {
      //   color: {
      //     value: "#ffffff",
      //   },
      //   links: {
      //     color: "#ffffff",
      //     distance: 150,
      //     enable: true,
      //     opacity: 0.5,
      //     width: 1,
      //   },
      //   move: {
      //     direction: "none",
      //     enable: true,
      //     outModes: {
      //       default: "bounce",
      //     },
      //     random: false,
      //     speed: 6,
      //     straight: false,
      //   },
      //   number: {
      //     density: {
      //       enable: true,
      //     },
      //     value: 80,
      //   },
      //   opacity: {
      //     value: 0.5,
      //   },
      //   shape: {
      //     type: "circle",
      //   },
      //   size: {
      //     value: { min: 1, max: 5 },
      //   },
      // },
      // detectRetina: true,
    }),
    [],
  );

  if (init) {
    return (
      <Particles
        id="tsparticles"
        particlesLoaded={particlesLoaded}
        options={options}
      />
    );
  }

  return <></>;
};

export default App