hypermc/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit particles

Browse Source
This commit is contained in:
snxraven
2025-07-04 02:30:40 -04:00
parent 36b3b38035
commit 728c01d2f7
4 changed files with 64 additions and 1694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1504
css/style-min.css vendored
View File

File diff suppressed because it is too large Load Diff

38
css/style.css
View File

@ -271,31 +271,39 @@ body {
.particle {
position: absolute;
width: 5px;
height: 5px;
background: linear-gradient(45deg, #14b8a6, #60a5fa);
width: 8px;
height: 8px;
background: linear-gradient(45deg, #14b8a6, #3b82f6);
border-radius: 50%;
animation: float 12s infinite ease-in-out;
opacity: 0;
animation: float linear infinite, fadeInOut ease-in-out infinite;
z-index: -1;
pointer-events: none;
box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
}
.particle.large {
width: 8px;
height: 8px;
animation-duration: 14s;
width: 12px;
height: 12px;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0; }
50% { opacity: 0.8; }
}
@keyframes float {
0%, 100% {
transform: translateY(0) translateX(0);
opacity: 0.2;
}
50% {
transform: translateY(-60px) translateX(25px);
opacity: 0.8;
}
0% { transform: translateY(0); }
100% { transform: translateY(-100vh); }
}
.particle.fade-out {
animation: fadeOut 0.5s ease-out forwards;
}
@keyframes fadeOut {
0% { opacity: 0.8; }
100% { opacity: 0; }
}
.header-bg {

202
css/style.min.css vendored
View File

@ -200,6 +200,9 @@
}
}
@layer utilities {
.visible {
visibility: visible;
}
.absolute {
position: absolute;
}
@ -215,15 +218,6 @@
.inset-0 {
inset: calc(var(--spacing) * 0);
}
.top-1\/2 {
top: calc(1/2 * 100%);
}
.-left-full {
left: -100%;
}
.left-1\/2 {
left: calc(1/2 * 100%);
}
.z-1 {
z-index: 1;
}
@ -317,18 +311,12 @@
.inline-block {
display: inline-block;
}
.h-0 {
height: calc(var(--spacing) * 0);
}
.h-0\.5 {
height: calc(var(--spacing) * 0.5);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.w-0 {
width: calc(var(--spacing) * 0);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
@ -347,14 +335,6 @@
.max-w-full {
max-width: 100%;
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
@ -415,12 +395,6 @@
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
}
.self-center {
align-self: center;
}
.overflow-hidden {
overflow: hidden;
}
.rounded {
border-radius: 0.25rem;
}
@ -468,40 +442,14 @@
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-\[radial-gradient\(circle\,rgba\(20\,184\,166\,0\.5\)\,transparent\)\] {
background-image: radial-gradient(circle,rgba(20,184,166,0.5),transparent);
}
.from-teal-400 {
--tw-gradient-from: var(--color-teal-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-teal-500 {
--tw-gradient-from: var(--color-teal-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-transparent {
--tw-gradient-from: transparent;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-white\/40 {
--tw-gradient-via: color-mix(in srgb, #fff 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-via: color-mix(in oklab, var(--color-white) 40%, transparent);
}
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.to-blue-500 {
--tw-gradient-to: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-transparent {
--tw-gradient-to: transparent;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.bg-\[length\:300\%_300\%\] {
background-size: 300% 300%;
}
.bg-clip-text {
background-clip: text;
}
@ -523,9 +471,6 @@
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-7 {
padding-inline: calc(var(--spacing) * 7);
}
.py-0\.5 {
padding-block: calc(var(--spacing) * 0.5);
}
@ -535,9 +480,6 @@
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-3\.5 {
padding-block: calc(var(--spacing) * 3.5);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
@ -633,9 +575,6 @@
.underline {
text-decoration-line: underline;
}
.opacity-0 {
opacity: 0%;
}
.opacity-90 {
opacity: 90%;
}
@ -661,71 +600,19 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[left\] {
transition-property: left;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-300 {
--tw-duration: 300ms;
transition-duration: 300ms;
}
.duration-500 {
--tw-duration: 500ms;
transition-duration: 500ms;
}
.ease-out {
--tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out);
}
.group-hover\:left-full {
&:is(:where(.group):hover *) {
@media (hover: hover) {
left: 100%;
}
}
}
.group-hover\:h-\[200px\] {
&:is(:where(.group):hover *) {
@media (hover: hover) {
height: 200px;
}
}
}
.group-hover\:w-\[200px\] {
&:is(:where(.group):hover *) {
@media (hover: hover) {
width: 200px;
}
}
}
.group-hover\:opacity-100 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
opacity: 100%;
}
}
}
.hover\:scale-110 {
&:hover {
@media (hover: hover) {
--tw-scale-x: 110%;
--tw-scale-y: 110%;
--tw-scale-z: 110%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.hover\:bg-gradient-to-r {
&:hover {
@media (hover: hover) {
@ -757,14 +644,6 @@
}
}
}
.hover\:shadow-\[0_8px_30px_rgba\(20\,184\,166\,0\.7\)\] {
&:hover {
@media (hover: hover) {
--tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(20,184,166,0.7));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.focus\:outline-none {
&:focus {
--tw-outline-style: none;
@ -1101,30 +980,47 @@ body {
}
.particle {
position: absolute;
width: 5px;
height: 5px;
background: linear-gradient(45deg, #14b8a6, #60a5fa);
width: 8px;
height: 8px;
background: linear-gradient(45deg, #14b8a6, #3b82f6);
border-radius: 50%;
animation: float 12s infinite ease-in-out;
opacity: 0;
animation: float linear infinite, fadeInOut ease-in-out infinite;
z-index: -1;
pointer-events: none;
box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
}
.particle.large {
width: 8px;
height: 8px;
animation-duration: 14s;
width: 12px;
height: 12px;
}
@keyframes float {
@keyframes fadeInOut {
0%, 100% {
transform: translateY(0) translateX(0);
opacity: 0.2;
opacity: 0;
}
50% {
transform: translateY(-60px) translateX(25px);
opacity: 0.8;
}
}
@keyframes float {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100vh);
}
}
.particle.fade-out {
animation: fadeOut 0.5s ease-out forwards;
}
@keyframes fadeOut {
0% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
.header-bg {
background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
@ -1256,21 +1152,6 @@ footer a:hover {
padding: 0.75rem 1.5rem;
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -1464,27 +1345,9 @@ footer a:hover {
syntax: "*";
inherits: false;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
@ -1529,9 +1392,6 @@ footer a:hover {
--tw-backdrop-sepia: initial;
--tw-duration: initial;
--tw-ease: initial;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}

14
js/main.js
View File

@ -39,13 +39,19 @@ function createParticle() {
if (Math.random() > 0.6) particle.classList.add('large');
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
particle.style.animationDelay = `${Math.random() * 10}s`;
particle.style.animationDuration = `${10 + Math.random() * 8}s`;
particle.style.animationDelay = `${Math.random() * 8}s`;
particle.style.animationDuration = `${8 + Math.random() * 6}s`;
document.body.appendChild(particle);
setTimeout(() => particle.remove(), 18000);
// Remove particle with fade-out effect
setTimeout(() => {
particle.classList.add('fade-out');
// Wait for fade-out animation to complete before removing
setTimeout(() => particle.remove(), 500);
}, 14000);
}
setInterval(createParticle, 500);
// Create particles frequently
setInterval(createParticle, 50);
function throttle(fn, wait) {
let lastTime = 0;