Nikita
c26a2cd7e4
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BCrwHHnGCB5XH968Nxokqw
130 lines
7.1 KiB
HTML
130 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Sekai — 星雲 Nebula</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ═══ Sekai Nebula — самодостаточный компонент ═══
|
||
Вставляется целиком: <div class="sk-nebula"> + скрипт звёзд.
|
||
Слои: фоновые звёзды → туман → ядро (дуга) → пылевые разломы → звёзды полосы. */
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{background:#070912;min-height:100vh}
|
||
|
||
.sk-nebula{position:relative;min-height:100vh;background:#070912;overflow:hidden}
|
||
.sk-nebula__layer{position:absolute;pointer-events:none}
|
||
|
||
/* базовый туман */
|
||
.sk-nebula__mist{top:26%;left:-22%;width:150%;height:52%;filter:blur(34px);opacity:.72;
|
||
animation:skNebula 46s ease-in-out infinite;
|
||
background:
|
||
radial-gradient(ellipse 42% 58% at 20% 60%, rgba(234,143,174,.20), transparent 70%),
|
||
radial-gradient(ellipse 58% 46% at 48% 44%, rgba(232,78,138,.14), transparent 72%),
|
||
radial-gradient(ellipse 38% 54% at 70% 57%, rgba(159,143,203,.17), transparent 70%),
|
||
radial-gradient(ellipse 28% 40% at 88% 51%, rgba(143,214,220,.11), transparent 70%),
|
||
radial-gradient(ellipse 52% 34% at 36% 62%, rgba(53,92,214,.11), transparent 72%)}
|
||
|
||
/* яркое ядро — сгустки по дуге */
|
||
.sk-nebula__core{top:44%;left:-15%;width:135%;height:14%;filter:blur(14px);opacity:.7;
|
||
animation:skNebulaCore 58s ease-in-out infinite;
|
||
background:
|
||
radial-gradient(ellipse 20% 70% at 8% 71%, rgba(247,206,220,.22), transparent 70%),
|
||
radial-gradient(ellipse 14% 90% at 22% 52%, rgba(242,236,224,.18), transparent 70%),
|
||
radial-gradient(ellipse 18% 80% at 36% 48%, rgba(234,143,174,.22), transparent 72%),
|
||
radial-gradient(ellipse 12% 100% at 48% 38%, rgba(247,206,220,.24), transparent 70%),
|
||
radial-gradient(ellipse 16% 85% at 60% 43%, rgba(242,236,224,.17), transparent 72%),
|
||
radial-gradient(ellipse 13% 75% at 72% 43%, rgba(234,143,174,.20), transparent 70%),
|
||
radial-gradient(ellipse 18% 90% at 86% 55%, rgba(247,206,220,.18), transparent 72%),
|
||
radial-gradient(ellipse 10% 60% at 94% 61%, rgba(143,214,220,.12), transparent 70%)}
|
||
|
||
/* тёмные пылевые разломы поверх ядра */
|
||
.sk-nebula__dust{top:44%;left:-15%;width:135%;height:14%;filter:blur(10px);opacity:.8;
|
||
animation:skNebula 46s ease-in-out infinite;
|
||
background:
|
||
radial-gradient(ellipse 20% 38% at 16% 72%, rgba(7,9,18,.6), transparent 75%),
|
||
radial-gradient(ellipse 28% 34% at 44% 55%, rgba(9,11,22,.55), transparent 75%),
|
||
radial-gradient(ellipse 18% 38% at 70% 50%, rgba(7,9,18,.55), transparent 75%),
|
||
radial-gradient(ellipse 14% 30% at 90% 68%, rgba(9,11,22,.5), transparent 75%)}
|
||
|
||
/* контейнеры звёзд (наполняются скриптом) */
|
||
.sk-nebula__stars{inset:0;overflow:hidden}
|
||
.sk-nebula__band{top:44%;left:-15%;width:135%;height:14%;transform:rotate(-14deg)}
|
||
|
||
.sk-nebula__caption{position:absolute;left:0;right:0;bottom:36px;display:flex;justify-content:center;padding:0 32px}
|
||
.sk-nebula__caption>div{max-width:640px;text-align:center}
|
||
.sk-nebula__caption .t{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.35em;color:#8FD6DC;margin-bottom:10px}
|
||
.sk-nebula__caption p{font-family:'Space Grotesk',sans-serif;font-size:13px;line-height:1.7;color:#6B7099}
|
||
|
||
@keyframes skTwinkle{0%,100%{opacity:.15}50%{opacity:.75}}
|
||
@keyframes skNebula{0%,100%{transform:rotate(-14deg) translateX(-2.5%)}50%{transform:rotate(-14deg) translateX(2.5%)}}
|
||
@keyframes skNebulaCore{0%,100%{transform:rotate(-14deg) translateX(3%)}50%{transform:rotate(-14deg) translateX(-3%)}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="sk-nebula">
|
||
<div class="sk-nebula__layer sk-nebula__stars" data-sk-stars></div>
|
||
<div class="sk-nebula__layer sk-nebula__mist"></div>
|
||
<div class="sk-nebula__layer sk-nebula__core"></div>
|
||
<div class="sk-nebula__layer sk-nebula__dust"></div>
|
||
<div class="sk-nebula__layer sk-nebula__band" data-sk-band></div>
|
||
|
||
<div class="sk-nebula__caption">
|
||
<div>
|
||
<div class="t">星雲 · SEKAI NEBULA</div>
|
||
<p>Млечная полоса мира Sekai — диск галактики, видимый с планеты Fumi с ребра, поэтому он ложится дугой через всё небо. Розовое свечение — цветение (сакура), редкие голубые вспышки — лёд и вода, а тёмные разрывы в ядре — пылевые рукава, скрывающие свет.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
function star(color, size, bright, x, y, dur, delay) {
|
||
var s = document.createElement('div');
|
||
s.style.cssText = 'position:absolute;border-radius:50%;' +
|
||
'left:' + x + '%;top:' + y + '%;width:' + size + 'px;height:' + size + 'px;' +
|
||
'background:' + color + ';' +
|
||
(bright ? 'box-shadow:0 0 6px ' + color + ';' : '') +
|
||
'animation:skTwinkle ' + dur + 's ease-in-out ' + delay + 's infinite';
|
||
return s;
|
||
}
|
||
|
||
// фоновые звёзды
|
||
var sky = document.querySelector('[data-sk-stars]');
|
||
for (var i = 0; i < 90; i++) {
|
||
sky.appendChild(star(
|
||
Math.random() < 0.2 ? '#8FD6DC' : '#F2ECE0',
|
||
Math.random() < 0.85 ? 1.5 : 2.5, false,
|
||
(Math.random() * 100).toFixed(2), (Math.random() * 100).toFixed(2),
|
||
(3 + Math.random() * 5).toFixed(1), (-Math.random() * 8).toFixed(1)
|
||
));
|
||
}
|
||
|
||
// россыпь внутри полосы: гауссово распределение вокруг дуги,
|
||
// дуга = парабола + дополнительный увод левого края вниз
|
||
var band = document.querySelector('[data-sk-band]');
|
||
for (var j = 0; j < 170; j++) {
|
||
var bright = Math.random() < 0.08;
|
||
var r = Math.random();
|
||
var color = r < 0.68 ? '#F2ECE0' : (r < 0.88 ? '#F7CEDC' : '#8FD6DC');
|
||
var g = (Math.random() + Math.random() + Math.random()) / 3;
|
||
var x = Math.random() * 100;
|
||
var arc = 28 * Math.pow((x - 50) / 50, 2) + Math.max(0, 35 - x) * 0.35;
|
||
band.appendChild(star(
|
||
color,
|
||
bright ? 2.2 : (0.8 + Math.random() * 1.1).toFixed(1), bright,
|
||
x.toFixed(2), (6 + g * 55 + arc).toFixed(2),
|
||
(2.5 + Math.random() * 5).toFixed(1), (-Math.random() * 8).toFixed(1)
|
||
));
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<template id="__bundler_thumbnail">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#070912"/><ellipse cx="50" cy="52" rx="34" ry="10" fill="#EA8FAE" opacity=".35" transform="rotate(-14 50 52)"/><ellipse cx="50" cy="50" rx="24" ry="4" fill="#F7CEDC" opacity=".6" transform="rotate(-14 50 50)"/><circle cx="30" cy="38" r="1.2" fill="#F2ECE0"/><circle cx="68" cy="60" r="1.2" fill="#F2ECE0"/><circle cx="60" cy="34" r="1" fill="#8FD6DC"/></svg>
|
||
</template>
|
||
</body>
|
||
</html>
|