https://pastein.ru/t/Qyq
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discord</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%; height: 100%;
overflow: hidden;
background: #07000f;
}
/* ── Gradient BG ── */
.bg {
position: fixed; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 70% 55% at 15% 15%, rgba(88,101,242,0.4) 0%, transparent 55%),
radial-gradient(ellipse 55% 65% at 85% 85%, rgba(124,58,237,0.35) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 75% 10%, rgba(6,182,212,0.22) 0%, transparent 50%),
radial-gradient(ellipse 60% 45% at 20% 90%, rgba(236,72,153,0.18) 0%, transparent 50%),
linear-gradient(135deg, #07000f 0%, #0d0025 40%, #010a18 100%);
}
/* animated mesh orbs */
.orb {
position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
filter: blur(90px); animation: drift ease-in-out infinite alternate;
}
.o1 { width: 600px; height: 600px; top: -150px; left: -150px; background: rgba(88,101,242,0.22); animation-duration: 14s; }
.o2 { width: 500px; height: 500px; bottom: -120px; right: -120px; background: rgba(124,58,237,0.2); animation-duration: 18s; animation-delay: -5s; }
.o3 { width: 350px; height: 350px; top: 35%; right: 5%; background: rgba(6,182,212,0.15); animation-duration: 22s; animation-delay: -9s; }
.o4 { width: 280px; height: 280px; bottom: 15%; left: 8%; background: rgba(236,72,153,0.13); animation-duration: 20s; animation-delay: -13s; }
@keyframes drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(25px, -18px) scale(1.04); }
100% { transform: translate(-15px, 20px) scale(0.97); }
}
/* subtle grid */
.grid {
position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04;
background-image:
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
background-size: 60px 60px;
}
/* ── Scene ── */
.scene {
position: fixed; inset: 0; z-index: 10;
display: flex; align-items: center; justify-content: center;
perspective: 900px;
}
/* wrapper that gets the 3d transform */
#tilt {
transform-style: preserve-3d;
will-change: transform;
transition: transform 0.08s linear;
position: relative;
}
/* glow ring behind iframe */
#tilt::before {
content: '';
position: absolute;
inset: -18px;
border-radius: 22px;
background: linear-gradient(135deg,
rgba(88,101,242,0.55) 0%,
rgba(124,58,237,0.45) 35%,
rgba(6,182,212,0.35) 70%,
rgba(236,72,153,0.4) 100%);
filter: blur(22px);
z-index: -1;
opacity: 0.85;
animation: glowPulse 4s ease-in-out infinite alternate;
}
@keyframes glowPulse {
0% { opacity: 0.7; filter: blur(22px); }
100% { opacity: 1; filter: blur(30px); }
}
/* border frame around iframe */
#tilt::after {
content: '';
position: absolute;
inset: -1.5px;
border-radius: 18px;
background: linear-gradient(135deg,
rgba(88,101,242,0.7),
rgba(168,85,247,0.5),
rgba(6,182,212,0.4),
rgba(236,72,153,0.5));
z-index: 2;
pointer-events: none;
}
iframe {
display: block;
border-radius: 16px;
position: relative;
z-index: 3;
/* shadow depth under card */
filter: drop-shadow(0 40px 60px rgba(0,0,0,0.7));
}
/* corner sparkles */
.sparkle {
position: absolute; pointer-events: none; z-index: 4;
width: 6px; height: 6px; border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px 3px rgba(168,85,247,0.9);
animation: sparklePulse 2s ease-in-out infinite;
}
.sp1 { top: -3px; left: -3px; animation-delay: 0s; }
.sp2 { top: -3px; right: -3px; animation-delay: 0.5s; }
.sp3 { bottom: -3px; left: -3px; animation-delay: 1s; }
.sp4 { bottom: -3px; right: -3px; animation-delay: 1.5s; }
@keyframes sparklePulse {
0%,100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.6); }
}
/* label above */
.label {
position: absolute;
top: -38px; left: 50%; transform: translateX(-50%);
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(168,85,247,0.7);
white-space: nowrap;
z-index: 4;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="orb o1"></div>
<div class="orb o2"></div>
<div class="orb o3"></div>
<div class="orb o4"></div>
<div class="grid"></div>
<div class="scene">
<div id="tilt">
<div class="label">s1mclick · Discord</div>
<span class="sparkle sp1"></span>
<span class="sparkle sp2"></span>
<span class="sparkle sp3"></span>
<span class="sparkle sp4"></span>
<iframe
src="https://discord.com/widget?id=1506958285562187846&theme=dark"
width="350" height="500"
allowtransparency="true"
frameborder="0"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
</iframe>
</div>
</div>
<script>
const tilt = document.getElementById('tilt');
const MAX = 22; // max degrees
let cx = window.innerWidth / 2;
let cy = window.innerHeight / 2;
let curRX = 0, curRY = 0;
let targetRX = 0, targetRY = 0;
// smooth lerp
let raf;
function lerp(a, b, t) { return a + (b - a) * t; }
function animate() {
curRX = lerp(curRX, targetRX, 0.1);
curRY = lerp(curRY, targetRY, 0.1);
// rotateX tilts top/bottom, rotateY tilts left/right
// "вогнуто к мышке" = сторона ближе к мышке — вперёд, дальняя — назад
tilt.style.transform = `rotateX(${curRX}deg) rotateY(${curRY}deg)`;
raf = requestAnimationFrame(animate);
}
animate();
document.addEventListener('mousemove', e => {
const dx = (e.clientX - cx) / cx; // -1 .. 1
const dy = (e.clientY - cy) / cy; // -1 .. 1
// когда мышь справа (dx>0) — правая сторона ближе к нам → rotateY положительный
// когда мышь снизу (dy>0) — нижняя сторона ближе → rotateX отрицательный
targetRY = dx * MAX;
targetRX = -dy * MAX;
});
// reset on mouse leave
document.addEventListener('mouseleave', () => {
targetRX = 0;
targetRY = 0;
});
window.addEventListener('resize', () => {
cx = window.innerWidth / 2;
cy = window.innerHeight / 2;
});
</script>
</body>
</html>
