Cool Mode

1<script lang="ts">
2	import { onMount, onDestroy } from "svelte";
3	import type { Snippet } from "svelte";
4 
5	export interface BaseParticle {
6		element: HTMLElement | SVGSVGElement;
7		left: number;
8		size: number;
9		top: number;
10	}
11 
12	export interface BaseParticleOptions {
13		particle?: string;
14		size?: number;
15	}
16 
17	export interface CoolParticle extends BaseParticle {
18		direction: number;
19		speedHorz: number;
20		speedUp: number;
21		spinSpeed: number;
22		spinVal: number;
23	}
24 
25	export interface CoolParticleOptions extends BaseParticleOptions {
26		particleCount?: number;
27		speedHorz?: number;
28		speedUp?: number;
29	}
30 
31	interface CoolModeProps {
32		children: Snippet;
33		options?: CoolParticleOptions;
34	}
35 
36	let { children, options }: CoolModeProps = $props();
37 
38	let ref: HTMLSpanElement;
39	let cleanup: (() => void) | undefined;
40 
41	const getContainer = () => {
42		const id = "_coolMode_effect";
43		const existingContainer = document.getElementById(id);
44 
45		if (existingContainer) {
46			return existingContainer;
47		}
48 
49		const container = document.createElement("div");
50		container.setAttribute("id", id);
51		container.setAttribute(
52			"style",
53			"overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647"
54		);
55 
56		document.body.appendChild(container);
57 
58		return container;
59	};
60 
61	let instanceCounter = 0;
62 
63	const applyParticleEffect = (
64		element: HTMLElement,
65		options?: CoolParticleOptions
66	): (() => void) => {
67		instanceCounter++;
68 
69		const defaultParticle = "circle";
70		const particleType = options?.particle || defaultParticle;
71		const sizes = [15, 20, 25, 35, 45];
72		const limit = 45;
73 
74		let particles: CoolParticle[] = [];
75		let autoAddParticle = false;
76		let mouseX = 0;
77		let mouseY = 0;
78 
79		const container = getContainer();
80 
81		function generateParticle() {
82			const size = options?.size || sizes[Math.floor(Math.random() * sizes.length)];
83			const speedHorz = options?.speedHorz || Math.random() * 10;
84			const speedUp = options?.speedUp || Math.random() * 25;
85			const spinVal = Math.random() * 360;
86			const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1);
87			const top = mouseY - size / 2;
88			const left = mouseX - size / 2;
89			const direction = Math.random() <= 0.5 ? -1 : 1;
90 
91			const particle = document.createElement("div");
92 
93			if (particleType === "circle") {
94				const svgNS = "http://www.w3.org/2000/svg";
95				const circleSVG = document.createElementNS(svgNS, "svg");
96// … truncated