<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>The Strongest</title><style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; background: radial-gradient(ellipse at center, #1a1040 0%, #05030f 70%); display: flex; align-items: center; justify-content: center; font-family: "Arial Black", Impact, sans-serif; } h1 { position: relative; z-index: 2; text-align: center; font-size: clamp(2.5rem, 9vw, 7rem); line-height: 1.1; background: linear-gradient(90deg, #fff, #7fd4ff, #b48cff, #ffffff, #5ab8ff, #e0c3ff, #fff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite, pulse 2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(127, 212, 255, 0.8)) drop-shadow(0 0 30px rgba(180, 140, 255, 0.6)); } h1 span { display: block; font-size: 0.5em; letter-spacing: 0.3em; } @keyframes shimmer { to { background-position: 300% 0; } } @keyframes pulse { 50% { transform: scale(1.04); } } canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }</style></head><body><canvas id="glitter"></canvas><h1>GOJO<span>IS THE STRONGEST</span></h1><script> const c = document.getElementById("glitter"); const ctx = c.getContext("2d"); const colors = ["#ffffff", "#7fd4ff", "#b48cff", "#ffe9a8", "#5ab8ff"]; let W, H, sparks = []; function resize() { W = c.width = innerWidth; H = c.height = innerHeight; } addEventListener("resize", resize); resize(); function spawn(x, y) { return { x: x ?? Math.random() * W, y: y ?? Math.random() * H, r: Math.random() * 2.5 + 0.5, vx: (Math.random() - 0.5) * 0.6, vy: Math.random() * 0.8 + 0.2, life: 1, decay: Math.random() * 0.01 + 0.004, color: colors[Math.floor(Math.random() * colors.length)] }; } for (let i = 0; i < 200; i++) sparks.push(spawn()); function star(s) { const a = s.life; ctx.globalAlpha = a * (0.6 + Math.random() * 0.4); ctx.fillStyle = s.color; ctx.shadowColor = s.color; ctx.shadowBlur = 10; ctx.beginPath(); for (let i = 0; i < 4; i++) { const ang = (Math.PI / 2) * i; ctx.lineTo(s.x + Math.cos(ang) * s.r * 3, s.y + Math.sin(ang) * s.r * 3); ctx.lineTo(s.x + Math.cos(ang + Math.PI / 4) * s.r * 0.7, s.y + Math.sin(ang + Math.PI / 4) * s.r * 0.7); } ctx.closePath(); ctx.fill(); } function loop() { ctx.clearRect(0, 0, W, H); sparks.forEach((s, i) => { s.x += s.vx; s.y += s.vy; s.life -= s.decay; if (s.life <= 0 || s.y > H) sparks[i] = spawn(undefined, -5); star(s); }); ctx.globalAlpha = 1; requestAnimationFrame(loop); } loop(); // Glitter burst on mouse move / tap function burst(e) { const p = e.touches ? e.touches[0] : e; for (let i = 0; i < 6; i++) sparks.push(spawn(p.clientX, p.clientY)); if (sparks.length > 600) sparks.splice(0, sparks.length - 600); } addEventListener("mousemove", burst); addEventListener("touchmove", burst);</script></body></html>
0
