diff --git a/index.html b/index.html
index fa27939..db96451 100644
--- a/index.html
+++ b/index.html
@@ -88,7 +88,7 @@
Pure Yinglet
- ∞
+ ∞
Swagger Units
diff --git a/script.js b/script.js
index 8466904..4748acc 100644
--- a/script.js
+++ b/script.js
@@ -1056,6 +1056,11 @@
var numbers = document.querySelectorAll('.stat .number[data-target]');
numbers.forEach(function(el) {
var target = parseInt(el.getAttribute('data-target'));
+ var randMax = parseInt(el.getAttribute('data-target-max'));
+ if (randMax) {
+ var randMin = parseInt(el.getAttribute('data-target-min')) || 0;
+ target = randMin + Math.floor(Math.random() * (randMax - randMin + 1));
+ }
var suffix = el.getAttribute('data-suffix') || '';
var current = 0;
if (target <= 0) return;
@@ -1070,7 +1075,70 @@
current = target;
clearInterval(timer);
if (final) {
+ var digits = el.textContent.replace(/[^0-9]/g, '').split('');
+ if (digits.length === 0) digits = ['0'];
+ var rect = el.getBoundingClientRect();
+ var fontSize = parseInt(window.getComputedStyle(el).fontSize);
+ var charW = rect.width / digits.length;
+ var frags = [];
+ el.style.opacity = '0';
+ for (var d = 0; d < digits.length; d++) {
+ var frag = document.createElement('div');
+ frag.className = 'fragment';
+ frag.textContent = digits[d];
+ var dx = rect.left + d * charW + charW / 2;
+ var dy = rect.top + rect.height / 2;
+ var angle = Math.random() * Math.PI * 2;
+ var speed = 3 + Math.random() * 8;
+ frag.style.cssText = 'position:fixed;left:' + dx + 'px;top:' + dy + 'px;font-size:' + fontSize + 'px;font-weight:900;color:#f5a623;font-family:Inter,system-ui,sans-serif;pointer-events:none;z-index:999;opacity:1;transform:translate(-50%,-50%);text-shadow:0 0 20px rgba(245,166,35,0.5);';
+ document.body.appendChild(frag);
+ frags.push({
+ el: frag,
+ x: dx,
+ y: dy,
+ vx: Math.cos(angle) * speed + (Math.random() - 0.5) * 3,
+ vy: Math.sin(angle) * speed - 6,
+ rot: 0,
+ rotSpeed: (Math.random() - 0.5) * 30,
+ });
+ }
+ var gravity = 0.35;
+ var running = true;
+ var startTime = Date.now();
+ function animateFrags() {
+ if (!running) return;
+ var alive = false;
+ var elapsed = Date.now() - startTime;
+ for (var k = 0; k < frags.length; k++) {
+ var f = frags[k];
+ f.vy += gravity;
+ f.x += f.vx;
+ f.y += f.vy;
+ f.rot += f.rotSpeed;
+ f.vx *= 0.99;
+ var alpha = Math.max(0, 1 - elapsed / 2500);
+ f.el.style.left = f.x + 'px';
+ f.el.style.top = f.y + 'px';
+ f.el.style.transform = 'translate(-50%,-50%) rotate(' + f.rot + 'deg)';
+ f.el.style.opacity = alpha;
+ if (alpha > 0 && f.y < window.innerHeight + 200) {
+ alive = true;
+ }
+ }
+ if (alive) {
+ requestAnimationFrame(animateFrags);
+ }
+ }
+ animateFrags();
el.textContent = final;
+ el.style.opacity = '';
+ el.classList.add('fade-in-final');
+ setTimeout(function() {
+ running = false;
+ for (var j = 0; j < frags.length; j++) {
+ frags[j].el.remove();
+ }
+ }, 2500);
return;
}
}
diff --git a/style.css b/style.css
index 3a8e61e..560f6de 100644
--- a/style.css
+++ b/style.css
@@ -35,6 +35,32 @@
50% { box-shadow: 0 0 40px rgba(var(--glow-rgb), 0.25); }
}
+@keyframes explodeNum {
+ 0% { transform: scale(1); opacity: 1; letter-spacing: normal; filter: blur(0); }
+ 40% { transform: scale(1.6); opacity: 0.6; letter-spacing: 0.15em; filter: blur(1px); color: #ff6b6b; }
+ 100% { transform: scale(2.5); opacity: 0; letter-spacing: 0.4em; filter: blur(6px); color: #ff6b6b; }
+}
+
+@keyframes fadeInFinal {
+ 0% { opacity: 0; transform: scale(0.3); filter: blur(10px); }
+ 100% { opacity: 1; transform: scale(1); filter: blur(0); }
+}
+
+.number.exploding {
+ animation: explodeNum 0.7s ease-out forwards;
+ position: relative;
+ z-index: 2;
+}
+
+.number.fade-in-final {
+ animation: fadeInFinal 0.5s ease-out forwards;
+}
+
+.fragment {
+ pointer-events: none;
+ will-change: transform, opacity, left, top;
+}
+
.reveal {
opacity: 0;
transform: translateY(30px);
@@ -228,6 +254,7 @@ section h2 {
border-radius: 1rem;
padding: 2rem 1rem;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
+ position: relative;
}
.stat:hover {