add fireworks (#2258)

* add fireworks * fix weird search background color due to canvas overlay * prevent going off small screens
2025-07-04 01:14:45 -05:00 · 2025-07-04 01:14:45 -05:00 · 96fd271573
commit 96fd271573
parent de01d9493f
13 changed files with 541 additions and 17 deletions
--- a/components/fireworks.js
+++ b/components/fireworks.js
@ -0,0 +1,273 @@
+import { useCallback, createContext, useContext, useState, useEffect } from 'react'
+import Particles from 'react-particles'
+import { loadFireworksPreset } from 'tsparticles-preset-fireworks'
+import styles from './fireworks.module.css'
+import {
+  rgbToHsl,
+  setRangeValue,
+  stringToRgb
+} from 'tsparticles-engine'
+import useDarkMode from './dark-mode'
+
+export const FireworksContext = createContext({
+  strike: () => {}
+})
+
+export const FireworksConsumer = FireworksContext.Consumer
+export function useFireworks () {
+  const { strike } = useContext(FireworksContext)
+  return strike
+}
+
+export function FireworksProvider ({ children }) {
+  const [cont, setCont] = useState()
+  const [context, setContext] = useState({ strike: () => {} })
+  const [darkMode] = useDarkMode()
+
+  useEffect(() => {
+    setContext({
+      strike: () => {
+        cont?.addEmitter(
+          {
+            direction: 'top',
+            life: {
+              count: 1,
+              duration: 0.1,
+              delay: 0.1
+            },
+            rate: {
+              delay: 0,
+              quantity: 1
+            },
+            size: {
+              width: 10,
+              height: 0
+            },
+            position: {
+              y: 100,
+              x: 50
+            }
+          })
+        return true
+      }
+    })
+  }, [cont])
+
+  const particlesLoaded = useCallback((container) => {
+    setCont(container)
+  }, [])
+
+  const particlesInit = useCallback(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 loadFireworksPreset(engine)
+  }, [])
+
+  return (
+    <FireworksContext.Provider value={context}>
+      <Particles
+        className={styles.fireworks}
+        init={particlesInit}
+        loaded={particlesLoaded}
+        options={darkMode ? darkOptions : lightOptions}
+      />
+      {children}
+    </FireworksContext.Provider>
+  )
+}
+
+const fixRange = (value, min, max) => {
+  const diffSMax = value.max > max ? value.max - max : 0
+  let res = setRangeValue(value)
+
+  if (diffSMax) {
+    res = setRangeValue(value.min - diffSMax, max)
+  }
+
+  const diffSMin = value.min < min ? value.min : 0
+
+  if (diffSMin) {
+    res = setRangeValue(0, value.max + diffSMin)
+  }
+
+  return res
+}
+
+const fireworksOptions = ['#ff595e', '#ffca3a', '#8ac926', '#1982c4', '#6a4c93']
+  .map((color) => {
+    const rgb = stringToRgb(color)
+
+    if (!rgb) {
+      return undefined
+    }
+
+    const hsl = rgbToHsl(rgb)
+    const sRange = fixRange({ min: hsl.s - 30, max: hsl.s + 30 }, 0, 100)
+    const lRange = fixRange({ min: hsl.l - 30, max: hsl.l + 30 }, 0, 100)
+
+    return {
+      color: {
+        value: {
+          h: hsl.h,
+          s: sRange,
+          l: lRange
+        }
+      },
+      stroke: {
+        width: 0
+      },
+      number: {
+        value: 0
+      },
+      opacity: {
+        value: {
+          min: 0.1,
+          max: 1
+        },
+        animation: {
+          enable: true,
+          speed: 0.7,
+          sync: false,
+          startValue: 'max',
+          destroy: 'min'
+        }
+      },
+      shape: {
+        type: 'circle'
+      },
+      size: {
+        value: { min: 1, max: 2 },
+        animation: {
+          enable: true,
+          speed: 5,
+          count: 1,
+          sync: false,
+          startValue: 'min',
+          destroy: 'none'
+        }
+      },
+      life: {
+        count: 1,
+        duration: {
+          value: {
+            min: 1,
+            max: 2
+          }
+        }
+      },
+      move: {
+        decay: { min: 0.075, max: 0.1 },
+        enable: true,
+        gravity: {
+          enable: true,
+          inverse: false,
+          acceleration: 5
+        },
+        speed: { min: 5, max: 15 },
+        direction: 'none',
+        outMode: {
+          top: 'destroy',
+          default: 'bounce'
+        }
+      }
+    }
+  })
+  .filter((t) => t !== undefined)
+
+const particlesOptions = (theme) => ({
+  number: {
+    value: 0
+  },
+  destroy: {
+    mode: 'split',
+    bounds: {
+      top: { min: 5, max: 40 }
+    },
+    split: {
+      sizeOffset: false,
+      count: 1,
+      factor: {
+        value: 0.333333
+      },
+      rate: {
+        value: { min: 75, max: 150 }
+      },
+      particles: fireworksOptions
+    }
+  },
+  life: {
+    count: 1
+  },
+  shape: {
+    type: 'line'
+  },
+  size: {
+    value: {
+      min: 0.1,
+      max: 50
+    },
+    animation: {
+      enable: true,
+      sync: true,
+      speed: 90,
+      startValue: 'max',
+      destroy: 'min'
+    }
+  },
+  rotate: {
+    path: true
+  },
+  stroke: {
+    color: {
+      value: theme === 'dark' ? '#fff' : '#aaa'
+    },
+    width: 1
+  },
+  move: {
+    enable: true,
+    gravity: {
+      acceleration: 15,
+      enable: true,
+      inverse: true,
+      maxSpeed: 100
+    },
+    speed: {
+      min: 10,
+      max: 20
+    },
+    outModes: {
+      default: 'split',
+      top: 'none'
+    },
+    trail: {
+      fillColor: theme === 'dark' ? '#000' : '#f5f5f7',
+      enable: true,
+      length: 10
+    }
+  }
+})
+
+const darkOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  detectRetina: true,
+  background: {
+    color: '#000',
+    opacity: 0
+  },
+  fpsLimit: 120,
+  emitters: [],
+  particles: particlesOptions('dark')
+}
+
+const lightOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  detectRetina: true,
+  background: {
+    color: '#fff',
+    opacity: 0
+  },
+  fpsLimit: 120,
+  emitters: [],
+  particles: particlesOptions('light')
+}
--- a/components/fireworks.module.css
+++ b/components/fireworks.module.css
@ -0,0 +1,8 @@
+.fireworks {
+  z-index: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
--- a/components/item-act.js
+++ b/components/item-act.js
@ -6,7 +6,6 @@ import { useMe } from './me'
 import UpBolt from '@/svgs/bolt.svg'
 import { amountSchema, boostSchema } from '@/lib/validate'
 import { useToast } from './toast'
-import { useLightning } from './lightning'
 import { nextTip, defaultTipIncludingRandom } from './upvote'
 import { ZAP_UNDO_DELAY_MS } from '@/lib/constants'
 import { usePaidMutation } from './use-paid-mutation'
@ -14,6 +13,7 @@ import { ACT_MUTATION } from '@/fragments/paidAction'
 import { meAnonSats } from '@/lib/apollo'
 import { BoostItemInput } from './adv-post-form'
 import { useSendWallets } from '@/wallets/index'
+import { useFireworks } from './fireworks'

 const defaultTips = [100, 1000, 10_000, 100_000]

@ -96,7 +96,7 @@ export default function ItemAct ({ onClose, item, act = 'TIP', step, children, a
  }, [onClose, item.id])

  const actor = useAct()
-  const strike = useLightning()
+  const strike = useFireworks()

  const onSubmit = useCallback(async ({ amount }) => {
    if (abortSignal && zapUndoTrigger({ me, amount })) {
@ -300,7 +300,7 @@ export function useAct ({ query = ACT_MUTATION, ...options } = {}) {
 export function useZap () {
  const wallets = useSendWallets()
  const act = useAct()
-  const strike = useLightning()
+  const strike = useFireworks()
  const toaster = useToast()

  return useCallback(async ({ item, me, abortSignal }) => {
--- a/components/layout.module.css
+++ b/components/layout.module.css
@ -5,6 +5,7 @@
    height: 100%;
    align-items: center;
    margin: auto;
+    z-index: 0;
 }

 .content {
--- a/components/nav/common.js
+++ b/components/nav/common.js
@ -15,7 +15,7 @@ import { useServiceWorker } from '../serviceworker'
 import { signOut } from 'next-auth/react'
 import Badges from '../badge'
 import { randInRange } from '../../lib/rand'
-import { useLightning } from '../lightning'
+import { useFireworks } from '../fireworks'
 import LightningIcon from '../../svgs/bolt.svg'
 import SearchIcon from '../../svgs/search-line.svg'
 import classNames from 'classnames'
@ -400,13 +400,15 @@ export function LoginButtons ({ handleClose }) {
 }

 export function AnonDropdown ({ path }) {
-  const strike = useLightning()
+  const strike = useFireworks()

  useEffect(() => {
    if (!window.localStorage.getItem('striked')) {
      const to = setTimeout(() => {
-        strike()
-        window.localStorage.setItem('striked', 'yep')
+        const striked = strike()
+        if (striked) {
+          window.localStorage.setItem('striked', 'yep')
+        }
      }, randInRange(3000, 10000))
      return () => clearTimeout(to)
    }
--- a/components/pay-bounty.js
+++ b/components/pay-bounty.js
@ -6,7 +6,7 @@ import { numWithUnits } from '@/lib/format'
 import { useShowModal } from './modal'
 import { useRoot } from './root'
 import { ActCanceledError, useAct } from './item-act'
-import { useLightning } from './lightning'
+import { useFireworks } from './fireworks'
 import { useToast } from './toast'
 import { useSendWallets } from '@/wallets/index'
 import { Form, SubmitButton } from './form'
@ -48,7 +48,7 @@ export default function PayBounty ({ children, item }) {
  const { me } = useMe()
  const showModal = useShowModal()
  const root = useRoot()
-  const strike = useLightning()
+  const strike = useFireworks()
  const toaster = useToast()
  const wallets = useSendWallets()

--- a/components/search.module.css
+++ b/components/search.module.css
@ -1,5 +1,4 @@
 .searchSection {
-    background-color: var(--bs-body-bg);
    z-index: 1;
 }

--- a/package-lock.json
+++ b/package-lock.json
@ -77,6 +77,7 @@
        "react-dom": "^18.3.1",
        "react-ios-pwa-prompt": "^1.8.4",
        "react-markdown": "^9.0.1",
+        "react-particles": "^2.12.2",
        "react-string-replace": "^1.1.1",
        "react-syntax-highlighter": "^15.5.0",
        "react-textarea-autosize": "^8.5.4",
@ -92,6 +93,8 @@
        "source-map": "^0.8.0-beta.0",
        "textarea-caret": "^3.1.0",
        "tldts": "^6.1.51",
+        "tsparticles-engine": "^2.12.0",
+        "tsparticles-preset-fireworks": "^2.12.0",
        "tsx": "^4.19.1",
        "twitter-api-v2": "^1.22.0",
        "unist-util-visit": "^5.0.0",
@ -17561,6 +17564,33 @@
        "@types/unist": "*"
      }
    },
+    "node_modules/react-particles": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/react-particles/-/react-particles-2.12.2.tgz",
+      "integrity": "sha512-Bo9DdrBRPFy8uiT7BA8P36Rdmz6GhB/RG9kkWUyZGIsS8AxWyuUjpVxw9Lr23K0LVE2aenAJ0vnqEbbLDpBgQw==",
+      "deprecated": "@tsparticles/react is the new version, please use that",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true,
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
    "node_modules/react-smooth": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
@ -19784,6 +19814,204 @@
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
    },
+    "node_modules/tsparticles-basic": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-basic/-/tsparticles-basic-2.12.0.tgz",
+      "integrity": "sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0",
+        "tsparticles-move-base": "^2.12.0",
+        "tsparticles-shape-circle": "^2.12.0",
+        "tsparticles-updater-color": "^2.12.0",
+        "tsparticles-updater-opacity": "^2.12.0",
+        "tsparticles-updater-out-modes": "^2.12.0",
+        "tsparticles-updater-size": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-engine": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz",
+      "integrity": "sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true
+    },
+    "node_modules/tsparticles-move-base": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.12.0.tgz",
+      "integrity": "sha512-oSogCDougIImq+iRtIFJD0YFArlorSi8IW3HD2gO3USkH+aNn3ZqZNTqp321uB08K34HpS263DTbhLHa/D6BWw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-plugin-emitters": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.12.0.tgz",
+      "integrity": "sha512-fbskYnaXWXivBh9KFReVCfqHdhbNQSK2T+fq2qcGEWpwtDdgujcaS1k2Q/xjZnWNMfVesik4IrqspcL51gNdSA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-plugin-sounds": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-sounds/-/tsparticles-plugin-sounds-2.12.0.tgz",
+      "integrity": "sha512-Jm/Mdddq9E9VdHtAbYmv3pgtHQ3nBSbXN+n2axqm6vACgrE/JA4tgLZyuknns0scxibvqh/7zFxkOSa+4ucYuQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-preset-fireworks": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-preset-fireworks/-/tsparticles-preset-fireworks-2.12.0.tgz",
+      "integrity": "sha512-8Y1F2YZH/LkqPVniEmfArHe2qyuJwzTiWmX1of9bClyA+Xz7p219JRednNp0QaAiZeJ+GS9X7hlBa4r3m1kPiw==",
+      "deprecated": "@tsparticles/preset-fireworks is the new package, please use that",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "tsparticles-basic": "^2.12.0",
+        "tsparticles-engine": "^2.12.0",
+        "tsparticles-plugin-emitters": "^2.12.0",
+        "tsparticles-plugin-sounds": "^2.12.0",
+        "tsparticles-shape-line": "^2.12.0",
+        "tsparticles-updater-destroy": "^2.12.0",
+        "tsparticles-updater-life": "^2.12.0",
+        "tsparticles-updater-rotate": "^2.12.0",
+        "tsparticles-updater-stroke-color": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-circle": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.12.0.tgz",
+      "integrity": "sha512-L6OngbAlbadG7b783x16ns3+SZ7i0SSB66M8xGa5/k+YcY7zm8zG0uPt1Hd+xQDR2aNA3RngVM10O23/Lwk65Q==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-line": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.12.0.tgz",
+      "integrity": "sha512-RcpKmmpKlk+R8mM5wA2v64Lv1jvXtU4SrBDv3vbdRodKbKaWGGzymzav1Q0hYyDyUZgplEK/a5ZwrfrOwmgYGA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-color": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.12.0.tgz",
+      "integrity": "sha512-KcG3a8zd0f8CTiOrylXGChBrjhKcchvDJjx9sp5qpwQK61JlNojNCU35xoaSk2eEHeOvFjh0o3CXWUmYPUcBTQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-destroy": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-destroy/-/tsparticles-updater-destroy-2.12.0.tgz",
+      "integrity": "sha512-6NN3dJhxACvzbIGL4dADbYQSZJmdHfwjujj1uvnxdMbb2x8C/AZzGxiN33smo4jkrZ5VLEWZWCJPJ8aOKjQ2Sg==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-life": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.12.0.tgz",
+      "integrity": "sha512-J7RWGHAZkowBHpcLpmjKsxwnZZJ94oGEL2w+wvW1/+ZLmAiFFF6UgU0rHMC5CbHJT4IPx9cbkYMEHsBkcRJ0Bw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-opacity": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.12.0.tgz",
+      "integrity": "sha512-YUjMsgHdaYi4HN89LLogboYcCi1o9VGo21upoqxq19yRy0hRCtx2NhH22iHF/i5WrX6jqshN0iuiiNefC53CsA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-out-modes": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.12.0.tgz",
+      "integrity": "sha512-owBp4Gk0JNlSrmp12XVEeBroDhLZU+Uq3szbWlHGSfcR88W4c/0bt0FiH5bHUqORIkw+m8O56hCjbqwj69kpOQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-rotate": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-rotate/-/tsparticles-updater-rotate-2.12.0.tgz",
+      "integrity": "sha512-waOFlGFmEZOzsQg4C4VSejNVXGf4dMf3fsnQrEROASGf1FCd8B6WcZau7JtXSTFw0OUGuk8UGz36ETWN72DkCw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-size": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.12.0.tgz",
+      "integrity": "sha512-B0yRdEDd/qZXCGDL/ussHfx5YJ9UhTqNvmS5X2rR2hiZhBAE2fmsXLeWkdtF2QusjPeEqFDxrkGiLOsh6poqRA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-stroke-color": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.12.0.tgz",
+      "integrity": "sha512-MPou1ZDxsuVq6SN1fbX+aI5yrs6FyP2iPCqqttpNbWyL+R6fik1rL0ab/x02B57liDXqGKYomIbBQVP3zUTW1A==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
    "node_modules/tstl": {
      "version": "2.5.16",
      "resolved": "https://registry.npmjs.org/tstl/-/tstl-2.5.16.tgz",
--- a/package.json
+++ b/package.json
@ -82,6 +82,7 @@
    "react-dom": "^18.3.1",
    "react-ios-pwa-prompt": "^1.8.4",
    "react-markdown": "^9.0.1",
+    "react-particles": "^2.12.2",
    "react-string-replace": "^1.1.1",
    "react-syntax-highlighter": "^15.5.0",
    "react-textarea-autosize": "^8.5.4",
@ -97,6 +98,8 @@
    "source-map": "^0.8.0-beta.0",
    "textarea-caret": "^3.1.0",
    "tldts": "^6.1.51",
+    "tsparticles-engine": "^2.12.0",
+    "tsparticles-preset-fireworks": "^2.12.0",
    "tsx": "^4.19.1",
    "twitter-api-v2": "^1.22.0",
    "unist-util-visit": "^5.0.0",
--- a/pages/_app.js
+++ b/pages/_app.js
@ -10,7 +10,7 @@ import { useRouter } from 'next/dist/client/router'
 import { useCallback, useEffect } from 'react'
 import { ShowModalProvider } from '@/components/modal'
 import ErrorBoundary from '@/components/error-boundary'
-import { LightningProvider } from '@/components/lightning'
+import { FireworksProvider } from '@/components/fireworks'
 import { ToastProvider } from '@/components/toast'
 import { ServiceWorkerProvider } from '@/components/serviceworker'
 import { SSR } from '@/lib/constants'
@ -118,7 +118,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
                    <WebLnProvider>
                      <ServiceWorkerProvider>
                        <PriceProvider price={price}>
-                          <LightningProvider>
+                          <FireworksProvider>
                            <ToastProvider>
                              <ShowModalProvider>
                                <BlockHeightProvider blockHeight={blockHeight}>
@ -131,7 +131,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
                                </BlockHeightProvider>
                              </ShowModalProvider>
                            </ToastProvider>
-                          </LightningProvider>
+                          </FireworksProvider>
                        </PriceProvider>
                      </ServiceWorkerProvider>
                    </WebLnProvider>
--- a/pages/credits.js
+++ b/pages/credits.js
@ -2,7 +2,7 @@ import { getGetServerSideProps } from '@/api/ssrApollo'
 import CCInfo from '@/components/info/cc'
 import { Form, Input, SubmitButton } from '@/components/form'
 import { CenterLayout } from '@/components/layout'
-import { useLightning } from '@/components/lightning'
+import { useFireworks } from '@/components/fireworks'
 import { useMe } from '@/components/me'
 import { useShowModal } from '@/components/modal'
 import { usePaidMutation } from '@/components/use-paid-mutation'
@ -76,7 +76,7 @@ function WithdrawButton ({ className }) {

 export function BuyCreditsButton ({ className }) {
  const showModal = useShowModal()
-  const strike = useLightning()
+  const strike = useFireworks()
  const [buyCredits] = usePaidMutation(BUY_CREDITS)

  return (
--- a/pages/rewards/index.js
+++ b/pages/rewards/index.js
@ -13,7 +13,7 @@ import { useShowModal } from '@/components/modal'
 import dynamic from 'next/dynamic'
 import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { useToast } from '@/components/toast'
-import { useLightning } from '@/components/lightning'
+import { useFireworks } from '@/components/fireworks'
 import { Col, Row } from 'react-bootstrap'
 import { useData } from '@/components/use-data'
 import { GrowthPieChartSkeleton } from '@/components/charts-skeletons'
@ -133,7 +133,7 @@ export default function Rewards ({ ssrData }) {
 export function DonateButton () {
  const showModal = useShowModal()
  const toaster = useToast()
-  const strike = useLightning()
+  const strike = useFireworks()
  const [donateToRewards] = usePaidMutation(DONATE)

  return (
--- a/styles/globals.scss
+++ b/styles/globals.scss
@ -220,6 +220,8 @@ $zindex-sticky: 900;
  scroll-margin-top: 60px;
 }

+
+
 .ms-xs {
  margin-left: 0.125rem;
 }
@ -596,6 +598,14 @@ div[contenteditable]:disabled,
  min-height: 100svh;
 }

+#__next > main {
+  z-index: 0;
+}
+
+#__next > footer {
+  z-index: 0;
+}
+
 footer {
  margin-top: auto;
  display: flex;