-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout-us.html
791 lines (701 loc) · 23.4 KB
/
about-us.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Unlim8ted</title>
<link rel="icon" href="https://unlim8ted.com/favicon.ico" type="image/x-icon">
<meta name="description"
content="'About Us' Unlim8ted Studio Productions is a dynamic entertainment company based in the united states . our mission is to create engaging and innovative experiences across a variety of media . the animated film follows the adventures of a meatball Learn more at Unlim8ted Studio Productions."
name="description" />
<style media="screen" type="text/css">
.layer1_class {
position: absolute;
z-index: 1;
top: 100px;
left: 0px;
visibility: visible;
}
.layer2_class {
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
visibility: hidden;
}
.loader {
position: fixed;
background-color: black;
opacity: 1;
height: 100%;
width: 100%;
top: 0;
left: 0%;
z-index: 999999988;
pointer-events: none;
}
.loaderr-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* To stack spinner and text vertically */
height: 100vh;
/* Full viewport height to ensure vertical centering */
}
.loaderr {
width: 100px;
height: 100px;
border-radius: 50%;
border: 8px solid transparent;
border-top: 8px solid #3498db;
border-right: 8px solid #e74c3c;
border-bottom: 8px solid #f1c40f;
border-left: 8px solid #9b59b6;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
box-shadow: 0 0 15px rgba(52, 152, 219, 0.7), 0 0 15px rgba(231, 76, 60, 0.7), 0 0 15px rgba(241, 196, 15, 0.7), 0 0 15px rgba(155, 89, 182, 0.7);
position: relative;
}
.loaderr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 8px solid transparent;
border-top: 8px solid rgba(52, 152, 219, 0.7);
border-right: 8px solid rgba(231, 76, 60, 0.7);
border-bottom: 8px solid rgba(241, 196, 15, 0.7);
border-left: 8px solid rgba(155, 89, 182, 0.7);
-webkit-animation: spin-reverse 1.5s linear infinite;
animation: spin-reverse 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin-reverse {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@keyframes spin-reverse {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
/* Loading text animation */
.loading-text {
margin-top: 20px;
font-size: 18px;
color: #3498db;
font-family: Arial, sans-serif;
letter-spacing: 2px;
animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes load-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes load-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
<!-- Styles for the No-JavaScript message -->
<style>
.no-js-message {
background: #2c4762;
color: red;
font-size: 20px;
text-align: center;
padding: 20px;
z-index: 999999999999999999999999999999999999999999999;
position: fixed;
width: 100%;
top: 0;
}
</style>
<!-- No-JavaScript message -->
<noscript>
<div class="no-js-message">
Please enable JavaScript to use this website properly.
</div>
</noscript>
<div class="loader">
<div class="loaderr-container">
<div class="loaderr"></div>
<div class="loading-text">Loading...</div>
</div>
</div>
</div>
<script>
// This function will execute after the full page has finished loading
window.onload = function () {
// Trigger fade-out animation for the loader
document.querySelector('.loaderr').style.animation = 'load-out 1.5s forwards, spin 2s linear infinite';
document.querySelector('.loaderr').style.webkitAnimation = 'load-out 1.5s forwards, spin 2s linear infinite';
document.querySelector('.loading-text').style.animation = 'load-out 1.5s forwards, spin 2s linear infinite';
document.querySelector('.loading-text').style.webkitAnimation = 'load-out 1.5s forwards, spin 2s linear infinite';
document.querySelector('.loader').style.animation = 'load-out 4s forwards';
document.querySelector('.loader').style.webkitAnimation = 'load-out 4s forwards';
}
</script>
<!--______________________________END OF LOADING AND NOSCRIPT____________________________________-->
<title>Unlim8ted - About Us</title>
<style>
/* Base styles */
body {
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
cursor: none;
/* Hide the default cursor */
}
.container {
max-width: 800px;
text-align: center;
padding: 20px;
border: 2px solid #8b00ff;
border-radius: 10px;
background: linear-gradient(145deg, #2d033b, #12001e);
box-shadow: 0 0 20px rgba(139, 0, 255, 0.6);
opacity: 0;
transform: translateY(100px);
animation: slideUp 1s ease-out forwards;
}
/* Slide-up animation */
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
h1,
p,
a.button {
transition: transform 0.3s, color 0.3s;
}
h1 {
color: #ffffff;
text-shadow: 0 0 5px #ffffff, 0 0 10px #8b00ff, 0 0 15px #ffffff;
}
p {
color: #ddd;
}
a.button {
color: #8b00ff;
text-decoration: none;
font-weight: bold;
background: black;
border: 2px solid #8b00ff;
padding: 15px 25px;
font-size: 18px;
border-radius: 8px;
display: inline-block;
margin-top: 20px;
}
h1:hover,
p:hover,
a.button:hover {
color: #dba4ff;
transform: scale(1.05);
background-color: #1a002e;
box-shadow: 0 0 15px rgba(139, 0, 255, 0.5);
}
.icon-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.icon {
position: absolute;
transition: transform 0.5s ease-out, opacity 0.5s ease;
opacity: 0;
/* Start icons as invisible */
}
.container.expanded {
max-height: 120%;
/* Example of expansion */
transition: max-height 0.5s ease-out;
}
.cursor {
width: 20px;
height: 20px;
position: fixed;
border-radius: 50%;
background-color: rgba(139, 0, 255, 0.7);
pointer-events: none;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-out, width 0.1s, height 0.1s;
box-shadow: 0 0 10px rgba(139, 0, 255, 0.6), 0 0 15px rgba(219, 164, 255, 0.5);
}
h1:hover~.cursor,
p:hover~.cursor,
a.button:hover~.cursor {
width: 30px;
height: 30px;
background-color: rgba(219, 164, 255, 0.7);
}
</style>
<style>
/* Navigation Bar Styles */
.navbar {
display: flex;
justify-content: center;
background-color: #333333d0;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
.nav-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.nav-item {
position: relative;
}
.nav-item a {
display: block;
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
.nav-item a:hover {
background-color: #ddd;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 3;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: black;
text-decoration: none;
padding: 12px 16px;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.navbar-toggle {
display: none;
background-color: #333;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
/* Responsive styles */
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
display: none;
}
.nav-links.show {
display: flex;
}
.navbar-toggle {
display: block;
}
}
</style>
<script>
function toggleMenu() {
const navLinks = document.getElementById("navbarLinks");
navLinks.classList.toggle("show");
}
</script>
<nav class="navbar">
<div class="navbar-header">
<button class="navbar-toggle" style="position:absolute; top:5px; left:1%" onclick="toggleMenu()">☰</button>
<ul class="nav-links" id="navbarLinks">
<li class="nav-item"><a href="/">Home</a></li>
<li class="nav-item"><a href="products">Products</a></li>
<li class="nav-item"><a href="help">Help</a></li>
<li class="nav-item"><a href="about">About</a></li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="dropbtn">More</a>
<div class="dropdown-content">
<a href="portfolio">Portfolio</a>
<a href="contact">Contact</a>
<a href="blog">Blog</a>
<a href="live-chat">Live Chat</a>
<a href="live-game">Live Chat and Game</a>
<a href="puzzle-squares">Puzzle Squares</a>
</div>
</li>
<a href="old"><button>Old site</button></a>
</ul>
</div>
</nav>
<style>
body {
background: linear-gradient(145deg, #2d033b, #12001e);
background-attachment: fixed;
background-size: cover;
color: #fff;
font-family: Arial, sans-serif;
height: 100%;
margin: 0;
cursor: none;
overflow-y: auto;
}
.container {
max-width: 800px;
text-align: center;
padding: 20px;
border: 2px solid #8b00ff;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(139, 0, 255, 0.6);
opacity: 0;
transform: translateY(100px);
animation: slideUp 1s ease-out forwards;
margin: 50px auto;
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
h1,
p,
a.button {
transition: transform 0.3s, color 0.3s;
}
h1 {
color: #ffffff;
text-shadow: 0 0 5px #ffffff, 0 0 10px #8b00ff, 0 0 15px #ffffff;
}
p {
color: #ddd;
}
a.button {
color: #8b00ff;
text-decoration: none;
font-weight: bold;
background: black;
border: 2px solid #8b00ff;
padding: 15px 25px;
font-size: 18px;
border-radius: 8px;
display: inline-block;
margin-top: 20px;
}
h1:hover,
p:hover,
a.button:hover {
color: #dba4ff;
transform: scale(1.05);
background-color: #1a002e;
box-shadow: 0 0 15px rgba(139, 0, 255, 0.5);
}
.container.expanded {
max-height: 120%;
transition: max-height 0.5s ease-out;
}
.cursor {
width: 20px;
height: 20px;
position: fixed;
border-radius: 50%;
background-color: rgba(139, 0, 255, 0.7);
pointer-events: none;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-out, width 0.1s, height 0.1s;
box-shadow: 0 0 10px rgba(139, 0, 255, 0.6), 0 0 15px rgba(219, 164, 255, 0.5);
}
h1:hover~.cursor,
p:hover~.cursor,
a.button:hover~.cursor strong:hover~.cursor {
width: 30px;
height: 30px;
background-color: rgba(219, 164, 255, 0.7);
}
.particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
pointer-events: none;
animation: moveParticle linear infinite;
}
@keyframes moveParticle {
from {
transform: translateY(0) translateX(0);
opacity: 1;
}
to {
transform: translateY(100vh) translateX(calc(100vw * (random() - 0.5)));
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1>About Unlim8ted Studio Productions</h1>
<p>Unlim8ted Studio Productions is a dynamic entertainment company based in the United States, founded in 2019 by an
anonymous English programmer. Our mission is to create engaging and innovative experiences across a variety of
media, including films, games, music, books, software, and AI products. Our vision is that creativity should have
no limits—hence our name, "Unlim8ted," which symbolizes boundless imagination and the desire to push creative
boundaries.</p>
<h2>Key Offerings and Projects</h2>
<h3>Films</h3>
<ul>
<p>The Life of a Meatball:</strong> An animated film that follows the adventures of a meatball, exploring themes
of identity and belonging in a humorous and thought-provoking way.</li>
<p>The Glitch:</strong> An experimental short film that dives into the nature of reality, focusing on the
imperfections that make us human. This film blurs the line between the real and the surreal.</li>
</ul>
<p>We use films as a medium to explore both complex and entertaining stories, reaching audiences through emotionally
engaging narratives and cutting-edge animation.</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h3>Games</h3>
<ul>
<p>Square Pixels:</strong> A 2D pixelated sandbox adventure inspired by the beloved game Terraria. This game
offers a rich pixel world filled with exploration, crafting, and action-packed adventures. It is set to be
released in 2025 on platforms like Steam and potentially GOG Galaxy.</li>
<p>Unicornia:</strong> A 2D speed-running platformer designed to challenge players' agility and precision. The
game is currently in development for multiple platforms, including Windows, Linux, Android, and OS X.</li>
</ul>
<p>Our games are characterized by creativity, retro-inspired visuals, and a focus on community-driven gameplay. We
take inspiration from classic gaming experiences while adding unique twists that appeal to modern audiences.</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h3>Books</h3>
<ul>
<p>The Glitch (Book):</strong> Expanding on the themes from the short film, the book provides a deeper narrative
that explores human imperfections.</li>
<p>Alien and The Crystal's Conflict:</strong> Science fiction and fantasy books exploring interstellar conflicts,
mysterious artifacts, and magical realms.</li>
<p>The Hidden Magic School and Stranded Ancient:</strong> Fantasy novels that revolve around magical discoveries
and survival in ancient environments.</li>
</ul>
<p>Our books reflect our passion for storytelling across different formats, immersing readers in fantastical worlds.
</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h3>Music and Podcasts</h3>
<ul>
<p>Music Releases:</strong> Spanning different genres, including rock and pop, our music aims to create both
entertaining and evocative experiences.</li>
<p>Podcasts:</strong> We are venturing into the world of informational and fictional podcasts, offering accessible
and engaging storytelling experiences.</li>
</ul>
<p>We continue to expand our creative offerings to encompass more of the entertainment spectrum.</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h3>Software Tools</h3>
<ul>
<p>Easy_pygame_UI-Maker:</strong> A tool for simplifying the creation of user interfaces using Pygame.</li>
<p>FTL-Node-Based-Modding:</strong> A tool designed for modding the game Faster Than Light (FTL).</li>
<p>ChessVR and Organisms_Sim:</strong> Contributing to VR gaming and simulation experiences.</li>
</ul>
<p>Our software tools are shared openly to help other developers create their own projects, especially in gaming and
interactive media.</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h3>AI Products</h3>
<ul>
<strong>Text Generator, Text Summarizer, Text Classifier:</strong> AI tools to assist with content creation,
modification, and analysis.</li>
<strong>Music Generation and Film Script Generator:</strong> AI-based tools for generating music and writing film
scripts.</li>
</ul>
<p>Our AI products push the boundaries of technology and assist in creative endeavors, empowering creators to
experiment and explore new possibilities.</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h2>Community and Engagement</h2>
<p>We place a strong emphasis on community involvement, maintaining an active presence on several platforms:</p>
<ul>
<p>GitHub:</strong> Our projects, including Square Pixels and Easy_pygame_UI-Maker, are available for others to
learn from and contribute to.</li>
<p>Discord:</strong> Fans and collaborators discuss ongoing projects, share ideas, and participate in game
development discussions.</li>
<p>Reddit:</strong> We engage our audience by sharing updates, hosting discussions, and building a community
around our products.</li>
<p>YouTube:</strong> Development updates, sneak peeks, and promotional videos are available on our YouTube
channel.</li>
</ul>
<p>We support contributions through GitHub, encouraging fans to report bugs, suggest features, and submit pull
requests to create a collaborative environment.</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h2>Support and Contact</h2>
<p>We offer multiple avenues for support and customer engagement:</p>
<ul>
<p><strong>support@unlim8ted.com:</strong> For customer support and inquiries.</li>
</p>
<p><strong>contact@unlim8ted.com:</strong> For general inquiries about the company.</li>
</p>
<p><strong>enquiries@unlim8ted.com:</strong> For inquiries related to specific features or collaborations.</li>
</p>
<p><strong>news@unlim8ted.com:</strong> For updates and news about the company's releases.</li>
</p>
<p><strong>admin@unlim8ted.com:</strong> For administrative contacts.</li>
</p>
</ul>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h2>Future Directions</h2>
<p>We have ambitious plans for the future:</p>
<ul>
Completing the development of <strong>Square Pixels</strong> and <strong>Unicornia</strong>.</li>
Expanding our AI toolset to provide even more advanced tools for content creators.</li>
Building community engagement further through interactive platforms like Discord and Reddit.</li>
Exploring partnerships to distribute our games on platforms like Steam and GOG Galaxy.</li>
</ul>
<p>With a focus on procedural storytelling, interactive experiences, and AI-assisted creative tools, Unlim8ted aims
to redefine what an entertainment studio can achieve.</p>
<p style="color:#000000">_</p>
<p style="color:#000000">_</p>
<h2>Values and Philosophy</h2>
<p>We operate on the principle that creativity has no boundaries. Our philosophy emphasizes:</p>
<ul>
<p>Community-Driven Development:</strong> Encouraging contributions from players and developers alike.</li>
<p>Boundless Creativity:</strong> Developing products that span multiple forms of media, using AI to push creative
possibilities.</li>
<p>Innovation Through Technology:</strong> Leveraging cutting-edge tools like AI to make creative processes more
accessible and efficient.</li>
</ul>
<p>Our motto, "The sky is not the limit... We are, meaning there is no limit," reflects our commitment to limitless
exploration and creativity in entertainment. We envision a future where the boundaries between gaming,
storytelling, and technology are blurred, creating fully immersive and engaging experiences for audiences around
the world.</p>
<a href="/#contact" class="button">Contact Us</a>
<!-- Copyright -->
<div style="margin-top: 20px;">
<p>© 2024 Unlim8ted Studio Productions. All rights reserved.</p>
</div>
</div>
<!-- Custom cursor element -->
<div class="cursor" id="cursor"></div>
<script>
// JavaScript to make the custom cursor follow the mouse
const cursor = document.getElementById("cursor");
document.addEventListener("mousemove", (e) => {
cursor.style.top = `${e.clientY}px`;
cursor.style.left = `${e.clientX}px`;
});
// Expand container based on scroll position
document.addEventListener("scroll", function () {
const scrollPercentage = window.scrollY / (document.body.offsetHeight - window.innerHeight);
if (scrollPercentage > 0.1) {
document.querySelector('.container').classList.add('expanded');
} else {
document.querySelector('.container').classList.remove('expanded');
}
});
// Particle background effect with a limit
const particleLimit = 100; // Maximum number of particles
let activeParticles = 0;
function createParticle() {
if (activeParticles >= particleLimit) return; // Stop if the limit is reached
const particle = document.createElement('div');
particle.classList.add('particle');
document.body.appendChild(particle);
activeParticles++;
const size = Math.random() * 5 + 1;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.top = `${Math.random() * window.innerHeight}px`;
particle.style.left = `${Math.random() * window.innerWidth}px`;
particle.style.animationDuration = `${Math.random() * 10 + 5}s`;
particle.addEventListener('animationend', () => {
particle.remove();
activeParticles--; // Decrease count when particle is removed
});
}
setInterval(createParticle, 100);
</script>
</body>
</html>