Cool Mode

1"use client"
2 
3import React, { useEffect, useRef, type ReactNode } from "react"
4 
5export interface BaseParticle {
6  element: HTMLElement | SVGSVGElement
7  left: number
8  size: number
9  top: number
10}
11 
12export interface BaseParticleOptions {
13  particle?: string
14  size?: number
15}
16 
17export interface CoolParticle extends BaseParticle {
18  direction: number
19  speedHorz: number
20  speedUp: number
21  spinSpeed: number
22  spinVal: number
23}
24 
25export interface CoolParticleOptions extends BaseParticleOptions {
26  particleCount?: number
27  speedHorz?: number
28  speedUp?: number
29}
30 
31const SVG_NS = "http://www.w3.org/2000/svg"
32 
33const getContainer = () => {
34  const id = "_coolMode_effect"
35  const existingContainer = document.getElementById(id)
36 
37  if (existingContainer) {
38    return existingContainer
39  }
40 
41  const container = document.createElement("div")
42  container.setAttribute("id", id)
43  container.setAttribute(
44    "style",
45    "overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647"
46  )
47 
48  document.body.appendChild(container)
49 
50  return container
51}
52 
53let instanceCounter = 0
54 
55const applyParticleEffect = (
56  element: HTMLElement,
57  options?: CoolParticleOptions
58): (() => void) => {
59  instanceCounter++
60 
61  const defaultParticle = "circle"
62  const particleType = options?.particle || defaultParticle
63  const sizes = [15, 20, 25, 35, 45]
64  const limit = 45
65 
66  let particles: CoolParticle[] = []
67  let autoAddParticle = false
68  let mouseX = 0
69  let mouseY = 0
70 
71  const container = getContainer()
72 
73  const appendCircleParticle = (particle: HTMLDivElement, size: number) => {
74    const circleSVG = document.createElementNS(SVG_NS, "svg")
75    const circle = document.createElementNS(SVG_NS, "circle")
76 
77    circle.setAttributeNS(null, "cx", (size / 2).toString())
78    circle.setAttributeNS(null, "cy", (size / 2).toString())
79    circle.setAttributeNS(null, "r", (size / 2).toString())
80    circle.setAttributeNS(null, "fill", `hsl(${Math.random() * 360}, 70%, 50%)`)
81 
82    circleSVG.appendChild(circle)
83    circleSVG.setAttribute("width", size.toString())
84    circleSVG.setAttribute("height", size.toString())
85 
86    particle.appendChild(circleSVG)
87  }
88 
89  const appendImageParticle = (
90    particle: HTMLDivElement,
91    imageSrc: string,
92    size: number
93  ) => {
94    const image = document.createElement("img")
95    image.src = imageSrc
96    image.width = size
97    image.height = size
98    image.alt = ""
99    image.style.borderRadius = "50%"
100 
101// … truncated