diff --git a/index.html b/index.html index b9b1df4..fa27939 100644 --- a/index.html +++ b/index.html @@ -17,42 +17,42 @@
-
+

He's Just Him

Some yinglets are good. Some are great. And then there's Zeppo.

-
+

Why Zeppo is the Best

-
+
⚡

Unmatched Swagger

Zeppo doesn't walk into a room — he arrives. Whiskers perfectly groomed, tail held high and shelltooth sharp. He knows he's him.

-
+
🧠

Galaxy Brain

Wits sharper than a creystone blade. Zeppo could scheme his way out of any jam and still have time to steal your lunch.

-
+
❤️

Big Heart (Literally)

Despite being a tiny rodent-person, his heart is the size of a melon. Loyal, fierce, and ride-or-die for his crew.

-
+
🦷

Magnificent Tooth

Name a better dental situation. You can't. That shelltooth has 10,000 PSI of pure charisma.

-
+
🌪️

Chaos Magnet

Where Zeppo goes, adventure follows. Not always good adventure, but never boring. The universe literally cannot ignore him.

-
+
👑

King Energy

No throne needed. Zeppo rules through sheer force of personality. Say his name three times and he appears to judge you.

@@ -60,7 +60,7 @@
-
+

What Others Are Saying

@@ -80,29 +80,29 @@
-
+

Zeppo by the Numbers

-
- 100% +
+ 100% Pure Yinglet
-
- ∞ +
+ ∞ Swagger Units
-
- 11/10 +
+ 11/10 Whisker Rating
-
- 0 +
+ 0 Enemies (They All Folded)
-
+

The Verdict

Zeppo is the GOAT. Well, GY — Greatest Yinglet. In a world full of yinglets, he's the one you'd want on your side, in your corner, and absolutely never playing cards against.

Zeppo. Believe the hype.

diff --git a/script.js b/script.js index 888466f..8466904 100644 --- a/script.js +++ b/script.js @@ -1004,7 +1004,11 @@ var viewport = track.parentElement; var paused = false; var scrollPos = 0; - var speed = 0.35; + var speed = 0.55; + + while (track.scrollHeight < viewport.clientHeight * 1.5) { + track.appendChild(createElement(generateQuote())); + } function step() { try { @@ -1018,6 +1022,7 @@ var distance = second.offsetTop - first.offsetTop; if (distance > 0 && scrollPos >= distance) { scrollPos -= distance; + track.style.transform = 'translateY(' + (-scrollPos) + 'px)'; track.removeChild(first); track.appendChild(createElement(generateQuote())); } @@ -1027,8 +1032,67 @@ requestAnimationFrame(step); } - viewport.addEventListener('mouseenter', function () { paused = true; }); - viewport.addEventListener('mouseleave', function () { paused = false; }); - step(); + + // Scroll reveal + var reveals = document.querySelectorAll('.reveal'); + var revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + } + }); + }, { threshold: 0.1 }); + reveals.forEach(function(el) { revealObserver.observe(el); }); + + // Stat counter + var statsSection = document.querySelector('.stats'); + if (statsSection) { + var counted = false; + var statObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting && !counted) { + counted = true; + var numbers = document.querySelectorAll('.stat .number[data-target]'); + numbers.forEach(function(el) { + var target = parseInt(el.getAttribute('data-target')); + var suffix = el.getAttribute('data-suffix') || ''; + var current = 0; + if (target <= 0) return; + var duration = parseInt(el.getAttribute('data-duration')) || 1000; + var final = el.getAttribute('data-final'); + var ticks = Math.min(target, Math.floor(duration / 10)); + var step = Math.max(1, Math.floor(target / ticks)); + var intervalMs = Math.max(10, Math.floor(duration / ticks)); + var timer = setInterval(function() { + current += step; + if (current >= target) { + current = target; + clearInterval(timer); + if (final) { + el.textContent = final; + return; + } + } + el.textContent = current + suffix; + }, intervalMs); + }); + } + }); + }, { threshold: 0.5 }); + statObserver.observe(statsSection); + } + + // Sparkle particles + for (var i = 0; i < 25; i++) { + var dot = document.createElement('div'); + dot.className = 'particle'; + dot.style.left = Math.random() * 100 + '%'; + dot.style.top = Math.random() * 100 + '%'; + dot.style.animationDelay = Math.random() * 5 + 's'; + dot.style.animationDuration = (3 + Math.random() * 4) + 's'; + dot.style.width = (2 + Math.random() * 3) + 'px'; + dot.style.height = dot.style.width; + document.body.appendChild(dot); + } })(); diff --git a/style.css b/style.css index 06b0bc2..3a8e61e 100644 --- a/style.css +++ b/style.css @@ -7,6 +7,43 @@ --accent-dim: #b87d1a; --text: #e8e8ee; --muted: #8888a0; + --glow-rgb: 245, 166, 35; +} + +@keyframes fadeInUp { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes pulse { + 0%, 100% { opacity: 1; filter: drop-shadow(0 0 20px rgba(var(--glow-rgb), 0.3)); } + 50% { opacity: 0.85; filter: drop-shadow(0 0 40px rgba(var(--glow-rgb), 0.5)); } +} + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +@keyframes twinkle { + 0%, 100% { opacity: 0; transform: scale(0.5); } + 50% { opacity: 0.6; transform: scale(1); } +} + +@keyframes breathe { + 0%, 100% { box-shadow: 0 0 20px rgba(var(--glow-rgb), 0.1); } + 50% { box-shadow: 0 0 40px rgba(var(--glow-rgb), 0.25); } +} + +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.7s ease, transform 0.7s ease; +} + +.reveal.revealed { + opacity: 1; + transform: translateY(0); } * { @@ -23,6 +60,18 @@ body { overflow-x: hidden; } +/* Sparkle particles */ +.particle { + position: fixed; + width: 3px; + height: 3px; + background: var(--accent); + border-radius: 50%; + pointer-events: none; + z-index: -1; + animation: twinkle 4s ease-in-out infinite; +} + header { text-align: center; padding: 4rem 1rem 2rem; @@ -64,7 +113,8 @@ h1 { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - text-shadow: 0 0 40px rgba(245, 166, 35, 0.3); + animation: pulse 3s ease-in-out infinite; + filter: drop-shadow(0 0 30px rgba(var(--glow-rgb), 0.3)); } .hero p { @@ -99,12 +149,13 @@ section h2 { border: 1px solid #2a2a3a; border-radius: 1rem; padding: 2rem; - transition: transform 0.2s, border-color 0.2s; + transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .card:hover { - transform: translateY(-4px); - border-color: var(--accent-dim); + transform: translateY(-6px); + border-color: var(--accent); + box-shadow: 0 8px 32px rgba(var(--glow-rgb), 0.12); } .card .emoji { @@ -142,6 +193,13 @@ section h2 { border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1rem; + transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; +} + +.testimonial:hover { + transform: translateX(4px); + border-color: var(--accent-dim); + box-shadow: 0 4px 20px rgba(var(--glow-rgb), 0.08); } .testimonial p { @@ -169,6 +227,13 @@ section h2 { border: 1px solid #2a2a3a; border-radius: 1rem; padding: 2rem 1rem; + transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; +} + +.stat:hover { + transform: scale(1.05); + border-color: var(--accent-dim); + box-shadow: 0 4px 24px rgba(var(--glow-rgb), 0.1); } .stat .number { @@ -207,6 +272,8 @@ section h2 { -webkit-text-fill-color: transparent; background-clip: text; margin-top: 1.5rem !important; + animation: float 3s ease-in-out infinite; + filter: drop-shadow(0 0 20px rgba(var(--glow-rgb), 0.2)); } footer { @@ -220,10 +287,22 @@ footer { .testimonial-viewport { overflow: hidden; - max-height: 320px; + max-height: 480px; position: relative; } +.testimonial-viewport::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 48px; + background: linear-gradient(#151520, transparent); + pointer-events: none; + z-index: 1; +} + .testimonial-viewport::after { content: ''; position: absolute;